madhu / index.html
creativecompas's picture
Update index.html
b08c6ea verified
Raw History Blame Contribute Delete
31.8 kB
<!DOCTYPE html>
<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>