| ```html |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Our Products | Appliant Robotics</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> |
| </head> |
| <body class="bg-white text-gray-800 min-h-screen"> |
| <custom-navbar></custom-navbar> |
|
|
| <main class="container mx-auto px-4 py-12"> |
| |
| <section class="py-16 bg-gradient-to-r from-blue-50 to-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Our <span class="text-primary">Product Lineup</span></h1> |
| <p class="text-xl max-w-2xl mx-auto text-gray-600">Explore our range of AI-powered kitchen automation solutions designed for professional and commercial use.</p> |
| </div> |
| </section> |
|
|
| |
| <section id="chefbot" class="py-16"> |
| <div class="flex flex-col lg:flex-row items-center gap-12"> |
| <div class="lg:w-1/2"> |
| <div class="bg-blue-100 p-3 rounded-lg inline-block mb-4"> |
| <span class="text-primary font-semibold">FLAGSHIP PRODUCT</span> |
| </div> |
| <h2 class="text-3xl font-bold mb-6">ChefBot Pro</h2> |
| <p class="text-xl text-gray-600 mb-8">The ultimate kitchen automation solution for high-volume food service operations.</p> |
| |
| <div class="grid md:grid-cols-2 gap-6 mb-8"> |
| <div class="flex items-start gap-3"> |
| <div class="bg-blue-100 p-2 rounded-lg"> |
| <i data-feather="cpu" class="text-primary w-5 h-5"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold mb-1">AI Vision System</h3> |
| <p class="text-gray-600">Real-time object recognition</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="bg-blue-100 p-2 rounded-lg"> |
| <i data-feather="zap" class="text-primary w-5 h-5"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold mb-1">6-Axis Precision</h3> |
| <p class="text-gray-600">±0.1mm repeatability</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="bg-blue-100 p-2 rounded-lg"> |
| <i data-feather="database" class="text-primary w-5 h-5"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold mb-1">Recipe Database</h3> |
| <p class="text-gray-600">500+ pre-programmed recipes</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="bg-blue-100 p-2 rounded-lg"> |
| <i data-feather="clock" class="text-primary w-5 h-5"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold mb-1">24/7 Operation</h3> |
| <p class="text-gray-600">Continuous production capability</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="bg-primary hover:bg-secondary text-white font-semibold px-6 py-3 rounded-lg transition">Request Quote</a> |
| <a href="#" class="border border-primary text-primary hover:bg-blue-50 font-semibold px-6 py-3 rounded-lg transition">Tech Specs</a> |
| </div> |
| </div> |
| <div class="lg:w-1/2"> |
| <img src="http://static.photos/food/1024x576/10" alt="ChefBot Pro in action" class="rounded-xl shadow-xl"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="mixmaster" class="py-16 bg-gray-50 rounded-xl"> |
| <div class="flex flex-col lg:flex-row items-center gap-12"> |
| <div class="lg:w-1/2 order-2 lg:order-1"> |
| <img src="http://static.photos/food/1024x576/11" alt="MixMaster 3000" class="rounded-xl shadow-xl"> |
| </div> |
| <div class="lg:w-1/2 order-1 lg:order-2"> |
| <div class="bg-blue-100 p-3 rounded-lg inline-block mb-4"> |
| <span class="text-primary font-semibold">BAKERY SPECIALTY</span> |
| </div> |
| <h2 class="text-3xl font-bold mb-6">MixMaster 3000</h2> |
| <p class="text-xl text-gray-600 mb-8">Automated mixing and preparation station for bakeries and dessert production.</p> |
| |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>Precise ingredient measurement</span> |
| </li> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>Variable speed mixing</span> |
| </li> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>Temperature-controlled bowls</span> |
| </li> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>Self-cleaning mechanism</span> |
| </li> |
| </ul> |
|
|
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="bg-primary hover:bg-secondary text-white font-semibold px-6 py-3 rounded-lg transition">Request Quote</a> |
| <a href="#" class="border border-primary text-primary hover:bg-blue-50 font-semibold px-6 py-3 rounded-lg transition">Tech Specs</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="baristabot" class="py-16"> |
| <div class="flex flex-col lg:flex-row items-center gap-12"> |
| <div class="lg:w-1/2"> |
| <div class="bg-blue-100 p-3 rounded-lg inline-block mb-4"> |
| <span class="text-primary font-semibold">BEVERAGE AUTOMATION</span> |
| </div> |
| <h2 class="text-3xl font-bold mb-6">BaristaBot</h2> |
| <p class="text-xl text-gray-600 mb-8">Coffee preparation robot for cafes with customizable drink recipes.</p> |
| |
| <div class="mb-8"> |
| <h3 class="font-semibold mb-2">Key Features:</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>100+ drink combinations</span> |
| </li> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>Milk frothing technology</span> |
| </li> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>Customizable recipes</span> |
| </li> |
| <li class="flex items-center gap-2"> |
| <i data-feather="check" class="text-primary"></i> |
| <span>Integrated payment system</span> |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="flex flex-wrap gap-4"> |
| <a href="#contact" class="bg-primary hover:bg-secondary text-white font-semibold px-6 py-3 rounded-lg transition">Request Quote</a> |
| <a href="#" class="border border-primary text-primary hover:bg-blue-50 font-semibold px-6 py-3 rounded-lg transition">View Menu Options</a> |
| </div> |
| </div> |
| <div class="lg:w-1/2"> |
| <img src="http://static.photos/food/1024x576/12" alt="BaristaBot making coffee" class="rounded-xl shadow-xl"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50 rounded-xl"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-12 text-center">Product <span class="text-primary">Comparison</span></h2> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full bg-white rounded-lg overflow-hidden"> |
| <thead class="bg-primary text-white"> |
| <tr> |
| <th class="py-4 px-6 text-left">Feature</th> |
| <th class="py-4 px-6 text-center">ChefBot Pro</th> |
| <th class="py-4 px-6 text-center">MixMaster 3000</th> |
| <th class="py-4 px-6 text-center">BaristaBot</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| <tr> |
| <td class="py-4 px-6">Workspace</td> |
| <td class="py-4 px-6 text-center">1.5m x 1.5m</td> |
| <td class="py-4 px-6 text-center">1m x 1m</td> |
| <td class="py-4 px-6 text-center">0.8m x 0.8m</td> |
| </tr> |
| <tr class="bg-gray-50"> |
| <td class="py-4 px-6">Payload Capacity</td> |
| <td class="py-4 px-6 text-center">5kg</td> |
| <td class="py-4 px-6 text-center">10kg</td> |
| <td class="py-4 px-6 text-center">3kg</td> |
| </tr> |
| <tr> |
| <td class="py-4 px-6">Precision</td> |
| <td class="py-4 px-6 text-center">±0.1mm</td> |
| <td class="py-4 px-6 text-center">±0.3mm</td> |
| <td class="py-4 px-6 text-center">±0.2mm</td> |
| </tr> |
| <tr class="bg-gray-50"> |
| <td class="py-4 px-6">Power Requirements</td> |
| <td class="py-4 px-6 text-center">220V 30A</td> |
| <td class="py-4 px-6 text-center">220V 20A</td> |
| <td class="py-4 px-6 text-center">110V 15A</td> |
| </tr> |
| <tr> |
| <td class="py-4 px-6">Starting Price</td> |
| <td class="py-4 px-6 text-center font-semibold">$49,999</td> |
| <td class="py-4 px-6 text-center font-semibold">$34,999</td> |
| <td class="py-4 px-6 text-center font-semibold">$24,999</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="bg-primary rounded-xl p-8 md:p-12 text-center text-white"> |
| <h2 class="text-3xl font-bold mb-4">Ready to Automate Your Kitchen?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Schedule a consultation with our automation specialists to find the right solution for your business.</p> |
| <a href="#contact" class="bg-white text-primary hover:bg-gray-100 font-semibold px-8 py-3 rounded-lg transition inline-block">Get Started</a> |
| </div> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/nav |
