|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Appliant Robotics - AI-Powered Kitchen Robots</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> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#1E40AF', |
| secondary: '#1E3A8A', |
| accent: '#3B82F6' |
| } |
| } |
| } |
| } |
| </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"> |
| |
| <section class="relative h-screen flex items-center bg-gradient-to-r from-blue-50 to-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row items-center gap-12"> |
| <div class="lg:w-1/2 animate__animated animate__fadeInLeft"> |
| <h1 class="text-5xl font-bold mb-6 text-gray-900">Smart Kitchen <span class="text-primary">Robotic Solutions</span></h1> |
| <p class="text-xl mb-8 text-gray-600">Professional AI-powered robotic arms for modern kitchens and food service automation.</p> |
| <div class="flex gap-4"> |
| <a href="/products.html" class="bg-primary hover:bg-secondary text-white font-semibold px-6 py-3 rounded-lg transition">View Products</a> |
| <a href="#contact" class="border border-primary text-primary hover:bg-blue-50 font-semibold px-6 py-3 rounded-lg transition">Contact Us</a> |
| </div> |
| </div> |
| <div class="lg:w-1/2 animate__animated animate__fadeInRight"> |
| <img src="http://static.photos/technology/1200x630/42" alt="Robotic Arm in Kitchen" class="rounded-xl shadow-xl"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-12 text-center">Our <span class="text-primary">Products</span></h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300"> |
| <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6"> |
| <i data-feather="cpu" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">ChefBot Pro</h3> |
| <p class="text-gray-600 mb-4">High-precision robotic arm for professional kitchens with AI recipe execution.</p> |
| <a href="/products.html#chefbot" class="text-primary font-medium">Learn More →</a> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300"> |
| <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6"> |
| <i data-feather="box" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">MixMaster 3000</h3> |
| <p class="text-gray-600 mb-4">Automated mixing and preparation station for bakeries and dessert shops.</p> |
| <a href="/products.html#mixmaster" class="text-primary font-medium">Learn More →</a> |
| </div> |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300"> |
| <div class="bg-blue-100 p-4 rounded-lg inline-block mb-6"> |
| <i data-feather="coffee" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-4">BaristaBot</h3> |
| <p class="text-gray-600 mb-4">Coffee preparation robot for cafes with customizable drink recipes.</p> |
| <a href="/products.html#baristabot" class="text-primary font-medium">Learn More →</a> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row items-center gap-12"> |
| <div class="lg:w-1/2"> |
| <img src="http://static.photos/technology/1024x576/43" alt="Robotic Technology" class="rounded-xl shadow-xl"> |
| </div> |
| <div class="lg:w-1/2"> |
| <h2 class="text-3xl font-bold mb-6">Advanced <span class="text-primary">Technology</span></h2> |
| <div class="space-y-6"> |
| <div class="flex items-start gap-4"> |
| <div class="bg-blue-100 p-2 rounded-lg mt-1"> |
| <i data-feather="cpu" class="text-primary w-5 h-5"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold">AI Vision System</h3> |
| <p class="text-gray-600">Computer vision for object recognition and precise manipulation.</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div class="bg-blue-100 p-2 rounded-lg mt-1"> |
| <i data-feather="zap" class="text-primary w-5 h-5"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold">6-Axis Precision</h3> |
| <p class="text-gray-600">Industrial-grade robotic arms with ±0.1mm repeatability.</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div class="bg-blue-100 p-2 rounded-lg mt-1"> |
| <i data-feather="database" class="text-primary w-5 h-5"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold">Recipe Database</h3> |
| <p class="text-gray-600">Cloud-connected library with thousands of professional recipes.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-12 text-center">Industry <span class="text-primary">Applications</span></h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="bg-blue-100 p-4 rounded-full inline-block mb-4"> |
| <i data-feather="home" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Restaurants</h3> |
| <p class="text-gray-600">Automate repetitive tasks and improve kitchen efficiency.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="bg-blue-100 p-4 rounded-full inline-block mb-4"> |
| <i data-feather="coffee" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Cafes & Bars</h3> |
| <p class="text-gray-600">Consistent drink preparation with robotic precision.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> |
| <div class="bg-blue-100 p-4 rounded-full inline-block mb-4"> |
| <i data-feather="shopping-bag" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Retail Food</h3> |
| <p class="text-gray-600">Automated food preparation for supermarkets and delis.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold mb-12 text-center">Trusted By <span class="text-primary">Leading Brands</span></h2> |
| <div class="flex flex-wrap justify-center gap-8 md:gap-16"> |
| <img src="http://static.photos/retail/200x200/1" alt="Customer Logo" class="h-12 grayscale hover:grayscale-0 transition"> |
| <img src="http://static.photos/retail/200x200/2" alt="Customer Logo" class="h-12 grayscale hover:grayscale-0 transition"> |
| <img src="http://static.photos/retail/200x200/3" alt="Customer Logo" class="h-12 grayscale hover:grayscale-0 transition"> |
| <img src="http://static.photos/retail/200x200/4" alt="Customer Logo" class="h-12 grayscale hover:grayscale-0 transition"> |
| <img src="http://static.photos/retail/200x200/5" alt="Customer Logo" class="h-12 grayscale hover:grayscale-0 transition"> |
| </div> |
| </div> |
| </section> |
| |
| <section id="contact" class="py-16 bg-primary text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-4">Get In Touch</h2> |
| <p class="text-xl">Ready to automate your kitchen operations? Contact our sales team today.</p> |
| </div> |
| <form class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <input type="text" placeholder="Name" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:border-opacity-100 focus:outline-none placeholder-white placeholder-opacity-70"> |
| </div> |
| <div> |
| <input type="email" placeholder="Email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:border-opacity-100 focus:outline-none placeholder-white placeholder-opacity-70"> |
| </div> |
| <div class="md:col-span-2"> |
| <input type="text" placeholder="Company" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:border-opacity-100 focus:outline-none placeholder-white placeholder-opacity-70"> |
| </div> |
| <div class="md:col-span-2"> |
| <textarea placeholder="How can we help you?" rows="4" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:border-opacity-100 focus:outline-none placeholder-white placeholder-opacity-70"></textarea> |
| </div> |
| <div class="md:col-span-2 text-center"> |
| <button type="submit" class="bg-white text-primary hover:bg-gray-100 font-semibold px-8 py-3 rounded-lg transition">Send Message</button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4 max-w-4xl"> |
| <div class="bg-white rounded-xl shadow-md p-8 text-center"> |
| <h3 class="text-2xl font-bold mb-4">Subscribe to Our Newsletter</h3> |
| <p class="text-gray-600 mb-6">Get the latest updates on our products and industry news.</p> |
| <div class="flex flex-col sm:flex-row gap-2 max-w-md mx-auto"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"> |
| <button class="bg-primary hover:bg-secondary text-white font-semibold px-6 py-3 rounded-lg transition">Subscribe</button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const animateElements = document.querySelectorAll('.animate-on-scroll'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate__animated', 'animate__fadeInUp'); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| animateElements.forEach(el => observer.observe(el)); |
| }); |
| </script> |
| </body> |
| </html> |
