Spaces:
Running
Running
Download index.html from creativecompas/madhu: direct link, hf CLI and curl.
- Browser
- Download file 31.8 kB
-
https://huggingface.co/spaces/creativecompas/madhu/resolve/main/index.html
- Command line
-
hf download hf://spaces/creativecompas/madhu/index.html
-
curl -L -o index.html https://huggingface.co/spaces/creativecompas/madhu/resolve/main/index.html
31.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Madhu - Nature's Sweet Essence</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #fef6e4; | |
| color: #172c66; | |
| overflow-x: hidden; | |
| } | |
| .honeycomb { | |
| position: relative; | |
| height: 300px; | |
| width: 300px; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 0 L100 25 L100 75 L50 100 L0 75 L0 25 Z" fill="%23f3d2c1" stroke="%23f582ae" stroke-width="2"/></svg>') repeat; | |
| background-size: 100px 100px; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .honey-drip { | |
| position: absolute; | |
| width: 8px; | |
| height: 30px; | |
| background: linear-gradient(to bottom, #ffaa00, #ff7700); | |
| border-radius: 0 0 4px 4px; | |
| animation: drip 2s infinite; | |
| opacity: 0; | |
| } | |
| @keyframes drip { | |
| 0% { transform: translateY(-30px); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { transform: translateY(30px); opacity: 0; } | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .bee { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| background: radial-gradient(circle at 30% 50%, #ffeb3b 25%, #000 25%, #000 30%, #ffeb3b 30%); | |
| border-radius: 50%; | |
| animation: fly 15s linear infinite; | |
| } | |
| .bee:before, .bee:after { | |
| content: ''; | |
| position: absolute; | |
| width: 10px; | |
| height: 20px; | |
| background: transparent; | |
| border: 2px solid #000; | |
| border-radius: 50%; | |
| top: 5px; | |
| } | |
| .bee:before { | |
| left: -5px; | |
| animation: wingFlap 0.1s infinite; | |
| } | |
| .bee:after { | |
| right: -5px; | |
| animation: wingFlap 0.1s infinite 0.05s; | |
| } | |
| @keyframes fly { | |
| 0% { transform: translate(0, 0); } | |
| 25% { transform: translate(200px, 100px); } | |
| 50% { transform: translate(400px, 0); } | |
| 75% { transform: translate(200px, -100px); } | |
| 100% { transform: translate(0, 0); } | |
| } | |
| @keyframes wingFlap { | |
| 0%, 100% { transform: rotate(0deg); } | |
| 50% { transform: rotate(30deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Floating Bees --> | |
| <div class="bee" style="top: 10%; left: 5%;"></div> | |
| <div class="bee" style="top: 30%; left: 20%;"></div> | |
| <div class="bee" style="top: 70%; left: 80%;"></div> | |
| <!-- Header --> | |
| <header class="bg-amber-50 shadow-md"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="honeycomb mr-4 relative"> | |
| <!-- Honey drips --> | |
| <div class="honey-drip" style="left: 50px; top: 50px; animation-delay: 0.5s;"></div> | |
| <div class="honey-drip" style="left: 80px; top: 80px; animation-delay: 1s;"></div> | |
| <div class="honey-drip" style="left: 120px; top: 60px; animation-delay: 1.5s;"></div> | |
| </div> | |
| <h1 class="text-4xl font-bold text-amber-800 font-['Playfair_Display']">Madhu</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-amber-800 hover:text-amber-600 transition">Home</a> | |
| <a href="#" class="text-amber-800 hover:text-amber-600 transition">Products</a> | |
| <a href="#" class="text-amber-800 hover:text-amber-600 transition">About</a> | |
| <a href="#" class="text-amber-800 hover:text-amber-600 transition">Blog</a> | |
| <a href="#" class="text-amber-800 hover:text-amber-600 transition">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-amber-800 hover:text-amber-600"> | |
| <i class="fas fa-search text-xl"></i> | |
| </button> | |
| <button class="p-2 text-amber-800 hover:text-amber-600"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| </button> | |
| <button class="md:hidden p-2 text-amber-800 hover:text-amber-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-b from-amber-50 to-amber-100 py-20"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-5xl font-bold text-amber-900 mb-6 font-['Playfair_Display']">Nature's Liquid Gold</h2> | |
| <p class="text-lg text-amber-800 mb-8">Discover the purest, most delicious honey from the untouched forests of India. Our Madhu is collected sustainably by local beekeepers, preserving both the environment and ancient traditions.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-semibold transition transform hover:scale-105"> | |
| Shop Now | |
| </button> | |
| <button class="border-2 border-amber-600 text-amber-600 hover:bg-amber-50 px-6 py-3 rounded-full font-semibold transition transform hover:scale-105"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1587049352850-3af0b2f1e37f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" | |
| alt="Honey Jar" | |
| class="w-full max-w-md rounded-lg shadow-2xl transform rotate-3 hover:rotate-0 transition duration-500"> | |
| <div class="absolute -bottom-5 -right-5 bg-amber-200 p-4 rounded-full shadow-lg"> | |
| <div class="bg-amber-100 p-3 rounded-full"> | |
| <i class="fas fa-award text-amber-600 text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-16 font-['Playfair_Display']">Why Choose Madhu?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> | |
| <div class="text-center p-6 rounded-xl bg-amber-50 hover:bg-amber-100 transition"> | |
| <div class="bg-amber-200 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-leaf text-amber-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-amber-800">100% Organic</h3> | |
| <p class="text-amber-700">Our honey is completely free from pesticides, antibiotics, and additives. Pure as nature intended.</p> | |
| </div> | |
| <div class="text-center p-6 rounded-xl bg-amber-50 hover:bg-amber-100 transition"> | |
| <div class="bg-amber-200 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-hand-holding-heart text-amber-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-amber-800">Ethically Sourced</h3> | |
| <p class="text-amber-700">Supporting local beekeeping communities while preserving biodiversity.</p> | |
| </div> | |
| <div class="text-center p-6 rounded-xl bg-amber-50 hover:bg-amber-100 transition"> | |
| <div class="bg-amber-200 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-heartbeat text-amber-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-amber-800">Health Benefits</h3> | |
| <p class="text-amber-700">Rich in antioxidants, enzymes, and nutrients to boost your immunity naturally.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section class="py-16 bg-amber-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-16 font-['Playfair_Display']">Our Honey Collection</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 - Wild Forest Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1558645834-ea299e9ad8e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Wild Forest Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute top-3 right-3 bg-amber-100 text-amber-800 px-2 py-1 rounded-full text-xs font-semibold"> | |
| Best Seller | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Wild Forest Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">Collected from deep forests with diverse flora</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹499</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 - Himalayan Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1603569283847-aa6f53f320a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Himalayan Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Himalayan Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">From the pristine Himalayan valleys</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹699</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 - Neem Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1587049352851-8d4e89133924?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Neem Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Neem Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">With natural medicinal properties</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹599</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 - Comb Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1558645834-9a6cbfdc2a1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Comb Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute top-3 right-3 bg-amber-100 text-amber-800 px-2 py-1 rounded-full text-xs font-semibold"> | |
| New | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Comb Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">Pure honeycomb straight from the hive</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹899</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 5 - Eucalyptus Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1587049352851-8d4e89133924?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Eucalyptus Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Eucalyptus Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">Great for respiratory health</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹549</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 6 - Multiflora Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1558645834-ea299e9ad8e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Multiflora Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Multiflora Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">From various wildflowers</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹449</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 7 - Sidr Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1603569283847-aa6f53f320a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Sidr Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| <div class="absolute top-3 right-3 bg-amber-100 text-amber-800 px-2 py-1 rounded-full text-xs font-semibold"> | |
| Premium | |
| </div> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Sidr Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">Rare and highly valued</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹1299</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 8 - Acacia Honey --> | |
| <div class="product-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> | |
| <div class="relative h-60 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1558645834-9a6cbfdc2a1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Acacia Honey" | |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> | |
| </div> | |
| <div class="p-5"> | |
| <h3 class="text-xl font-semibold mb-2 text-amber-900">Acacia Honey</h3> | |
| <p class="text-amber-700 text-sm mb-4">Light and delicate flavor</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-lg font-bold text-amber-800">₹599</span> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border-2 border-amber-600 text-amber-600 hover:bg-amber-50 px-8 py-3 rounded-full font-semibold transition"> | |
| View All Products | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-16 font-['Playfair_Display']">What Our Customers Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-amber-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-500 mr-2"> | |
| <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> | |
| </div> | |
| <p class="text-amber-800 mb-6">"The Wild Forest Honey has transformed my morning routine. The flavor is unlike anything I've tasted before - rich, floral, and complex."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-amber-900">Priya Sharma</h4> | |
| <p class="text-sm text-amber-700">Delhi</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-amber-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-500 mr-2"> | |
| <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> | |
| </div> | |
| <p class="text-amber-800 mb-6">"As someone who values ethical products, I appreciate Madhu's commitment to sustainable beekeeping. Plus, the honey is delicious!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-amber-900">Rahul Mehta</h4> | |
| <p class="text-sm text-amber-700">Mumbai</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-amber-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-500 mr-2"> | |
| <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> | |
| </div> | |
| <p class="text-amber-800 mb-6">"The Neem Honey has helped with my seasonal allergies. I can't believe I didn't try this natural remedy sooner!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold text-amber-900">Ananya Patel</h4> | |
| <p class="text-sm text-amber-700">Bangalore</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-amber-100"> | |
| <div class="container mx-auto px-6 max-w-4xl text-center"> | |
| <h2 class="text-3xl font-bold text-amber-900 mb-6 font-['Playfair_Display']">Join Our Hive</h2> | |
| <p class="text-amber-800 mb-8">Subscribe to our newsletter for exclusive offers, honey recipes, and beekeeping stories.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <input type="email" placeholder="Your email address" class="px-6 py-3 rounded-full border-2 border-amber-300 focus:outline-none focus:border-amber-500 flex-grow max-w-md"> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full font-semibold transition"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-amber-900 text-amber-100 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-10"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="honeycomb mr-3"> | |
| <div class="honey-drip" style="left: 30px; top: 30px; animation-delay: 0.3s;"></div> | |
| </div> | |
| <h3 class="text-2xl font-bold font-['Playfair_Display']">Madhu</h3> | |
| </div> | |
| <p class="mb-4">Bringing you the pureest honey from India's diverse landscapes.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-amber-200 hover:text-white text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-amber-200 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-amber-200 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-amber-200 hover:text-white text-xl"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="hover:text-white transition">Products</a></li> | |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Customer Care</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">My Account</a></li> | |
| <li><a href="#" class="hover:text-white transition">Order Tracking</a></li> | |
| <li><a href="#" class="hover:text-white transition">Wishlist</a></li> | |
| <li><a href="#" class="hover:text-white transition">Shipping Policy</a></li> | |
| <li><a href="#" class="hover:text-white transition">Returns & Refunds</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact Us</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span>123 Honey Lane, Forest Hills, India</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3"></i> | |
| <span>+91 98765 43210</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span>hello@madhu.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-amber-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2023 Madhu. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="hover:text-white transition">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for honey drips | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Create additional honey drips dynamically | |
| const honeycomb = document.querySelector('.honeycomb'); | |
| for (let i = 0; i < 5; i++) { | |
| const drip = document.createElement('div'); | |
| drip.className = 'honey-drip'; | |
| drip.style.left = Math.random() * 250 + 'px'; | |
| drip.style.top = Math.random() * 100 + 'px'; | |
| drip.style.animationDelay = (Math.random() * 2) + 's'; | |
| honeycomb.appendChild(drip); | |
| } | |
| // Add more bees | |
| for (let i = 0; i < 3; i++) { | |
| const bee = document.createElement('div'); | |
| bee.className = 'bee'; | |
| bee.style.top = Math.random() * 100 + '%'; | |
| bee.style.left = Math.random() * 100 + '%'; | |
| bee.style.animationDuration = (10 + Math.random() * 10) + 's'; | |
| document.body.appendChild(bee); | |
| } | |
| // Mobile menu toggle would go here | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| // Implementation for mobile menu toggle | |
| alert('Mobile menu would open here in a full implementation.'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |