Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PiZero Workstations - Professional Desktop Setup</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .workspace-scene { | |
| perspective: 2000px; | |
| transform-style: preserve-3d; | |
| } | |
| .desk-surface { | |
| transform: rotateX(60deg) rotateZ(-20deg) translateZ(-100px); | |
| transform-style: preserve-3d; | |
| } | |
| .laptop { | |
| transform: translateZ(20px) rotateX(-5deg); | |
| transform-origin: bottom; | |
| transition: all 0.3s ease; | |
| } | |
| .laptop:hover { | |
| transform: translateZ(20px) rotateX(-15deg); | |
| } | |
| .pi-tower { | |
| transform: translateZ(30px) rotateY(-10deg); | |
| transition: all 0.3s ease; | |
| } | |
| .pi-tower:hover { | |
| transform: translateZ(30px) rotateY(-20deg) translateY(-5px); | |
| } | |
| .keyboard { | |
| transform: translateZ(10px); | |
| } | |
| .mouse { | |
| transform: translateZ(15px) rotateZ(-30deg); | |
| } | |
| .notebook { | |
| transform: translateZ(5px) rotateZ(10deg); | |
| } | |
| .coffee-mug { | |
| transform: translateZ(8px) rotateZ(-15deg); | |
| } | |
| .desk-shadow { | |
| filter: blur(10px); | |
| opacity: 0.3; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-gray-900 text-white py-6 shadow-lg px-6"> | |
| <div class="container mx-auto"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-microchip text-blue-400 text-3xl"></i> | |
| <h1 class="text-2xl font-bold">PiZero<span class="text-blue-400">Workstations</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#features" class="hover:text-blue-400 transition">Features</a> | |
| <a href="#gallery" class="hover:text-blue-400 transition">Gallery</a> | |
| <a href="#desktop-scene" class="hover:text-blue-400 transition">3D Workspace</a> | |
| <a href="#reviews" class="hover:text-blue-400 transition">Reviews</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section with 3D Workspace --> | |
| <section class="bg-gradient-to-br from-gray-800 to-gray-900 text-white py-16 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0"> | |
| <span class="bg-blue-500 text-white text-xs px-3 py-1 rounded-full">PROFESSIONAL SETUP</span> | |
| <h1 class="text-4xl md:text-5xl font-bold mt-4 mb-6">Mini Tower Workstation</h1> | |
| <p class="text-xl text-gray-300 mb-8">Compact yet powerful desktop setup featuring our Pi Zero tower case with professional workstation aesthetics.</p> | |
| <div class="flex flex-wrap gap-4 mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-desktop text-blue-400 mr-2"></i> | |
| <span>Professional Design</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-expand text-blue-400 mr-2"></i> | |
| <span>Expandable Storage</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-wind text-blue-400 mr-2"></i> | |
| <span>Active Cooling</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div> | |
| <span class="text-3xl font-bold">$59.99</span> | |
| <span class="text-gray-400 line-through ml-2">$69.99</span> | |
| </div> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition transform hover:scale-105 flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <!-- 3D Workspace Scene --> | |
| <div class="workspace-scene relative h-96 w-full mx-auto"> | |
| <div class="absolute inset-0 desk-surface"> | |
| <!-- Desk Surface --> | |
| <div class="absolute bottom-0 left-0 right-0 h-64 bg-gradient-to-br from-gray-700 to-gray-800 rounded-lg shadow-xl"></div> | |
| <!-- Laptop --> | |
| <div class="laptop absolute left-1/4 bottom-16 w-32 h-20 bg-gray-100 rounded-lg shadow-lg"> | |
| <div class="absolute top-0 left-0 right-0 h-1 bg-gray-300"></div> | |
| <div class="absolute top-1 left-1 right-1 bottom-1 bg-gray-800 rounded"> | |
| <div class="absolute top-1 left-1 right-1 h-3 bg-gray-900 rounded-t"></div> | |
| <div class="absolute bottom-1 left-1 right-1 h-3 bg-gray-700 rounded-b flex justify-center"> | |
| <div class="w-8 h-1 bg-gray-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-5 left-0 right-0 h-5 bg-gray-300 rounded-b-lg shadow-inner"> | |
| <div class="absolute top-0 left-0 right-0 h-1 bg-gray-400"></div> | |
| <div class="absolute top-1 left-4 right-4 h-4 bg-gray-200 rounded-b"></div> | |
| </div> | |
| </div> | |
| <!-- Pi Zero Tower (Mini Dell Precision style) --> | |
| <div class="pi-tower absolute right-1/4 bottom-16 w-16 h-24 bg-gray-200 rounded shadow-lg floating"> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-lg"> | |
| <div class="absolute top-1 left-2 right-2 h-2 bg-gray-400 rounded"></div> | |
| </div> | |
| <div class="absolute top-4 left-0 right-0 bottom-0 bg-gray-100 rounded-b-lg"> | |
| <!-- Front panel details --> | |
| <div class="absolute top-2 left-2 w-2 h-2 bg-blue-500 rounded-full"></div> | |
| <div class="absolute top-2 left-5 w-2 h-2 bg-gray-500 rounded-full"></div> | |
| <div class="absolute top-6 left-2 right-2 h-8 bg-gray-300 rounded-sm"> | |
| <div class="absolute top-1 left-1 right-1 bottom-1 bg-gray-700 rounded"></div> | |
| </div> | |
| <!-- Side vents --> | |
| <div class="absolute top-8 -left-1 w-1 h-12 bg-gray-300 rounded-l"> | |
| <div class="absolute top-1 left-0 right-0 h-1 bg-gray-400"></div> | |
| <div class="absolute top-3 left-0 right-0 h-1 bg-gray-400"></div> | |
| <div class="absolute top-5 left-0 right-0 h-1 bg-gray-400"></div> | |
| <div class="absolute top-7 left-0 right-0 h-1 bg-gray-400"></div> | |
| <div class="absolute top-9 left-0 right-0 h-1 bg-gray-400"></div> | |
| </div> | |
| <!-- Branding --> | |
| <div class="absolute bottom-1 left-2 right-2 text-center"> | |
| <span class="text-xs font-bold text-gray-600">PiZero TOWER</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Keyboard --> | |
| <div class="keyboard absolute left-1/4 bottom-4 w-32 h-8 bg-gray-800 rounded shadow"> | |
| <div class="absolute top-1 left-1 right-1 bottom-1 bg-gray-900 rounded flex flex-wrap"> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| <div class="w-1/12 h-2 border border-gray-700"></div> | |
| </div> | |
| </div> | |
| <!-- Mouse --> | |
| <div class="mouse absolute left-3/4 bottom-6 w-6 h-4 bg-gray-700 rounded-full shadow"></div> | |
| <!-- Notebook --> | |
| <div class="notebook absolute left-1/2 bottom-8 w-12 h-16 bg-blue-50 rounded-sm shadow"> | |
| <div class="absolute top-0 left-0 right-0 h-1 bg-blue-100"></div> | |
| <div class="absolute top-1 left-0 right-0 h-4 bg-white"> | |
| <div class="absolute top-1 left-1 right-1 h-0.5 bg-blue-200"></div> | |
| <div class="absolute top-2 left-1 right-1 h-0.5 bg-blue-200"></div> | |
| </div> | |
| </div> | |
| <!-- Coffee Mug --> | |
| <div class="coffee-mug absolute left-1/3 bottom-8 w-5 h-6 bg-white rounded-full shadow"> | |
| <div class="absolute top-0 left-0 right-0 h-1 bg-gray-200 rounded-t-full"></div> | |
| <div class="absolute top-1 left-0 right-0 bottom-0 bg-gray-100 rounded-b-full"> | |
| <div class="absolute top-0 left-1 right-1 h-4 bg-brown-300 rounded-b-full" style="background-color: #a05a2c;"></div> | |
| </div> | |
| <div class="absolute top-0 right-0 w-1 h-3 bg-gray-200 rounded-r-full"></div> | |
| </div> | |
| <!-- Desk Shadow --> | |
| <div class="desk-shadow absolute -bottom-2 left-0 right-0 h-4 bg-black rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <p class="text-gray-400">Hover over the devices to see them in action</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 bg-white px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Tower Case Features</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Professional workstation features in a compact Pi Zero form factor</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-expand"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Expandable Design</h3> | |
| <p class="text-gray-600">Supports additional storage drives and expansion cards with our modular bay system.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-fan"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Active Cooling</h3> | |
| <p class="text-gray-600">Dual 40mm fans with speed control keep your Pi Zero cool under heavy workloads.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-plug"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-3">Easy Access Ports</h3> | |
| <p class="text-gray-600">Front-mounted USB and power buttons for convenient access in desktop setups.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D Desktop Scene Section --> | |
| <section id="desktop-scene" class="py-16 bg-gray-100 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Professional Desktop Experience</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our tower case brings workstation aesthetics to your Pi Zero projects</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold mb-4">Scale Down, Power Up</h3> | |
| <p class="text-gray-600 mb-6">The PiZero Tower Case gives you all the professional desktop features in a compact form factor that fits perfectly on any workspace.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mt-1 mr-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Workstation Design</h4> | |
| <p class="text-gray-600 text-sm">Vertical tower design with front I/O panel inspired by professional workstations</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mt-1 mr-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Tool-Free Access</h4> | |
| <p class="text-gray-600 text-sm">Easy-open side panel for quick upgrades and maintenance</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-500 mt-1 mr-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Cable Management</h4> | |
| <p class="text-gray-600 text-sm">Integrated routing channels keep your workspace clean and organized</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 bg-gray-800 p-8 flex items-center justify-center"> | |
| <!-- Enhanced 3D Scene --> | |
| <div class="workspace-scene relative h-64 w-full"> | |
| <div class="absolute inset-0 desk-surface"> | |
| <!-- Desk Surface --> | |
| <div class="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-br from-gray-600 to-gray-700 rounded-lg shadow-xl"></div> | |
| <!-- Laptop --> | |
| <div class="laptop absolute left-1/4 bottom-12 w-24 h-16 bg-gray-100 rounded-lg shadow-lg"> | |
| <div class="absolute top-0 left-0 right-0 h-1 bg-gray-300"></div> | |
| <div class="absolute top-1 left-1 right-1 bottom-1 bg-gray-800 rounded"> | |
| <div class="absolute top-1 left-1 right-1 h-3 bg-gray-900 rounded-t"></div> | |
| <div class="absolute bottom-1 left-1 right-1 h-3 bg-gray-700 rounded-b flex justify-center"> | |
| <div class="w-6 h-1 bg-gray-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pi Zero Tower --> | |
| <div class="pi-tower absolute right-1/4 bottom-12 w-12 h-20 bg-gray-200 rounded shadow-lg"> | |
| <div class="absolute top-0 left-0 right-0 h-3 bg-gray-300 rounded-t-lg"> | |
| <div class="absolute top-1 left-2 right-2 h-1 bg-gray-400 rounded"></div> | |
| </div> | |
| <div class="absolute top-3 left-0 right-0 bottom-0 bg-gray-100 rounded-b-lg"> | |
| <div class="absolute top-2 left-2 w-1 h-1 bg-blue-500 rounded-full"></div> | |
| <div class="absolute top-2 left-4 w-1 h-1 bg-gray-500 rounded-full"></div> | |
| <div class="absolute top-5 left-2 right-2 h-6 bg-gray-300 rounded-sm"> | |
| <div class="absolute top-1 left-1 right-1 bottom-1 bg-gray-700 rounded"></div> | |
| </div> | |
| <div class="absolute bottom-1 left-2 right-2 text-center"> | |
| <span class="text-xs font-bold text-gray-600">PiZero TOWER</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Peripherals --> | |
| <div class="keyboard absolute left-1/4 bottom-4 w-24 h-6 bg-gray-800 rounded shadow"></div> | |
| <div class="mouse absolute left-3/4 bottom-4 w-4 h-3 bg-gray-700 rounded-full shadow"></div> | |
| <!-- Desk Shadow --> | |
| <div class="desk-shadow absolute -bottom-2 left-0 right-0 h-3 bg-black rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="gallery" class="py-16 bg-white px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Tower Case Gallery</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Professional aesthetics meets Raspberry Pi compactness</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-100 rounded-xl overflow-hidden shadow-md"> | |
| <div class="h-64 bg-gray-200 flex items-center justify-center"> | |
| <div class="workspace-scene relative h-full w-full"> | |
| <div class="absolute inset-0"> | |
| <!-- Tower Front View --> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-32 bg-gray-200 rounded shadow-lg"> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-lg"> | |
| <div class="absolute top-1 left-3 right-3 h-2 bg-gray-400 rounded"></div> | |
| </div> | |
| <div class="absolute top-4 left-0 right-0 bottom-0 bg-gray-100 rounded-b-lg"> | |
| <div class="absolute top-3 left-3 w-2 h-2 bg-blue-500 rounded-full"></div> | |
| <div class="absolute top-3 left-7 w-2 h-2 bg-gray-500 rounded-full"></div> | |
| <div class="absolute top-8 left-3 right-3 h-8 bg-gray-300 rounded-sm"> | |
| <div class="absolute top-1 left-1 right-1 bottom-1 bg-gray-700 rounded"></div> | |
| </div> | |
| <div class="absolute bottom-3 left-0 right-0 text-center"> | |
| <span class="text-xs font-bold text-gray-600">PiZero TOWER</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium">Front View</h3> | |
| <p class="text-gray-500 text-sm">Professional front panel with status LEDs</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-xl overflow-hidden shadow-md"> | |
| <div class="h-64 bg-gray-200 flex items-center justify-center"> | |
| <div class="workspace-scene relative h-full w-full"> | |
| <div class="absolute inset-0"> | |
| <!-- Tower Side View --> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-32 bg-gray-200 rounded shadow-lg"> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-lg"></div> | |
| <div class="absolute top-4 left-0 right-0 bottom-0 bg-gray-100 rounded-b-lg"> | |
| <!-- Side vents --> | |
| <div class="absolute top-6 left-1 right-1 h-16"> | |
| <div class="absolute top-0 left-0 right-0 h-3 bg-gray-300 rounded-sm"></div> | |
| <div class="absolute top-4 left-0 right-0 h-3 bg-gray-300 rounded-sm"></div> | |
| <div class="absolute top-8 left-0 right-0 h-3 bg-gray-300 rounded-sm"></div> | |
| <div class="absolute top-12 left-0 right-0 h-3 bg-gray-300 rounded-sm"></div> | |
| </div> | |
| <div class="absolute bottom-3 left-0 right-0 text-center"> | |
| <span class="text-xs font-bold text-gray-600">PiZero TOWER</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium">Side View</h3> | |
| <p class="text-gray-500 text-sm">Optimized ventilation with stylish vents</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-xl overflow-hidden shadow-md"> | |
| <div class="h-64 bg-gray-200 flex items-center justify-center"> | |
| <div class="workspace-scene relative h-full w-full"> | |
| <div class="absolute inset-0"> | |
| <!-- Tower Back View --> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-32 bg-gray-200 rounded shadow-lg"> | |
| <div class="absolute top-0 left-0 right-0 h-4 bg-gray-300 rounded-t-lg"></div> | |
| <div class="absolute top-4 left-0 right-0 bottom-0 bg-gray-100 rounded-b-lg"> | |
| <!-- Ports --> | |
| <div class="absolute top-6 left-3 w-16 h-10 bg-gray-300 rounded-sm"> | |
| <div class="absolute top-1 left-1 right-1 h-2 bg-gray-700 rounded-full"></div> | |
| <div class="absolute top-3 left-1 right-1 h-2 bg-gray-700 rounded-full"></div> | |
| <div class="absolute top-5 left-1 right-1 h-2 bg-gray-700 rounded-full"></div> | |
| </div> | |
| <div class="absolute bottom-3 left-0 right-0 text-center"> | |
| <span class="text-xs font-bold text-gray-600">PiZero TOWER</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium">Rear View</h3> | |
| <p class="text-gray-500 text-sm">Full I/O access with organized ports</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reviews Section --> | |
| <section id="reviews" class="py-16 bg-gray-100 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Customer Reviews</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">What professionals say about our tower case</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm ml-2">5.0</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Perfect for My Desk</h3> | |
| <p class="text-gray-600 mb-4">The tower case looks professional next to my work laptop. The cooling is excellent and it's so quiet!</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3"></div> | |
| <div> | |
| <p class="font-medium">Michael R.</p> | |
| <p class="text-gray-500 text-sm">Software Developer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm ml-2">5.0</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Great Build Quality</h3> | |
| <p class="text-gray-600 mb-4">The aluminum construction feels premium and the tool-less design makes upgrades a breeze.</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3"></div> | |
| <div> | |
| <p class="font-medium">Jennifer L.</p> | |
| <p class="text-gray-500 text-sm">IT Consultant</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-sm ml-2">4.5</span> | |
| </div> | |
| <h3 class="font-bold mb-2">Impressive Design</h3> | |
| <p class="text-gray-600 mb-4">Looks just like a mini workstation. Only wish it had more color options to match different setups.</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 mr-3"></div> | |
| <div> | |
| <p class="font-medium">David K.</p> | |
| <p class="text-gray-500 text-sm">Graphic Designer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-blue-600 text-white px-6"> | |
| <div class="container mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready for a Professional Pi Setup?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Upgrade your workspace with our premium tower case designed for Raspberry Pi Zero.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Buy Now - $59.99 | |
| </button> | |
| <button class="border border-white text-white hover:bg-blue-700 px-8 py-3 rounded-lg font-medium transition transform hover:scale-105"> | |
| Configure Your Setup | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-microchip text-blue-400 mr-2"></i> | |
| PiZeroWorkstations | |
| </h3> | |
| <p class="text-gray-400">Professional cases and accessories for Raspberry Pi enthusiasts and developers.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tower Cases</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Desktop Cases</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Server Racks</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Accessories</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <p class="text-gray-400 text-sm">Subscribe for updates</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-3 py-2 rounded-l focus:outline-none w-full"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded-r"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 PiZeroWorkstations. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple hover effects for 3D elements | |
| document.querySelectorAll('.laptop, .pi-tower').forEach(element => { | |
| element.addEventListener('mouseenter', () => { | |
| element.classList.add('floating'); | |
| }); | |
| element.addEventListener('mouseleave', () => { | |
| element.classList.remove('floating'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/pizeroworkstations" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |