Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GreenThumb | Your Gardening Companion</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> | |
| /* Custom CSS for animations and effects */ | |
| .plant-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?ixlib=rb-4.0.3'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .seasonal-banner { | |
| background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating-icon { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -60px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-green-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-leaf text-green-600 text-2xl"></i> | |
| <h1 class="text-xl font-bold text-green-800">GreenThumb</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-green-700 hover:text-green-500 font-medium">Home</a> | |
| <a href="#plants" class="text-green-700 hover:text-green-500 font-medium">Plants</a> | |
| <a href="#guides" class="text-green-700 hover:text-green-500 font-medium">Guides</a> | |
| <a href="#tools" class="text-green-700 hover:text-green-500 font-medium">Tools</a> | |
| <a href="#community" class="text-green-700 hover:text-green-500 font-medium">Community</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition duration-300"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden text-green-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Grow Your Perfect Garden</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Discover expert tips, plant care guides, and connect with fellow gardening enthusiasts.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full text-lg font-medium transition duration-300"> | |
| Get Started | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-green-700 px-8 py-3 rounded-full text-lg font-medium transition duration-300"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Seasonal Banner --> | |
| <section class="seasonal-banner text-white py-4"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p class="text-lg font-medium"><i class="fas fa-seedling mr-2"></i> Spring Planting Guide Now Available! <a href="#" class="underline ml-2">Check it out</a></p> | |
| </div> | |
| </section> | |
| <!-- Featured Plants --> | |
| <section id="plants" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-green-800 mb-4">Featured Plants</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Discover our curated selection of plants perfect for your garden this season</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Plant Card 1 --> | |
| <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1598971861713-54ad16a7e72d?ixlib=rb-4.0.3" alt="Lavender" class="w-full h-64 object-cover"> | |
| <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Easy Care</span> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800">Lavender</h3> | |
| <span class="text-green-600 font-bold">$12.99</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Fragrant purple flowers perfect for borders and containers.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-1 text-yellow-400"> | |
| <i class="fas fa-sun"></i> | |
| <span class="text-gray-600 text-sm">Full Sun</span> | |
| </div> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plant Card 2 --> | |
| <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1597848212624-a19eb35e2651?ixlib=rb-4.0.3" alt="Snake Plant" class="w-full h-64 object-cover"> | |
| <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Low Light</span> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800">Snake Plant</h3> | |
| <span class="text-green-600 font-bold">$18.99</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Air-purifying and nearly indestructible houseplant.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-1 text-gray-400"> | |
| <i class="fas fa-cloud"></i> | |
| <span class="text-gray-600 text-sm">Low Light</span> | |
| </div> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plant Card 3 --> | |
| <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1518977676601-b53f467aba1a?ixlib=rb-4.0.3" alt="Tomato Plant" class="w-full h-64 object-cover"> | |
| <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Edible</span> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800">Cherry Tomato</h3> | |
| <span class="text-green-600 font-bold">$9.99</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Sweet, bite-sized tomatoes perfect for home gardens.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-1 text-yellow-400"> | |
| <i class="fas fa-sun"></i> | |
| <span class="text-gray-600 text-sm">Full Sun</span> | |
| </div> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plant Card 4 --> | |
| <div class="plant-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1593483316242-efda5721104c?ixlib=rb-4.0.3" alt="Monstera" class="w-full h-64 object-cover"> | |
| <span class="absolute top-4 right-4 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Tropical</span> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-gray-800">Monstera Deliciosa</h3> | |
| <span class="text-green-600 font-bold">$24.99</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Iconic split-leaf plant that makes a statement.</p> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-1 text-yellow-300"> | |
| <i class="fas fa-cloud-sun"></i> | |
| <span class="text-gray-600 text-sm">Partial Sun</span> | |
| </div> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full text-lg font-medium transition duration-300"> | |
| View All Plants | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gardening Guides --> | |
| <section id="guides" class="py-16 bg-green-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-green-800 mb-4">Gardening Guides</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Learn from our comprehensive guides tailored for all skill levels</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Guide Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3" alt="Vegetable Gardening" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full mr-2">Beginner</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 10 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Starting a Vegetable Garden</h3> | |
| <p class="text-gray-600 mb-4">Everything you need to know to grow your own food, from soil prep to harvest.</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm text-gray-600">By Sarah Johnson</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Guide Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1560713781-d1c8b1ade0e2?ixlib=rb-4.0.3" alt="Indoor Plants" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full mr-2">Intermediate</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 15 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Indoor Plant Care Guide</h3> | |
| <p class="text-gray-600 mb-4">Keep your houseplants thriving with these essential care tips and troubleshooting advice.</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm text-gray-600">By Michael Chen</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Guide Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1523348837708-15d4a09cfac2?ixlib=rb-4.0.3" alt="Composting" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full mr-2">Advanced</span> | |
| <span class="text-gray-500 text-sm"><i class="far fa-clock mr-1"></i> 20 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">The Complete Guide to Composting</h3> | |
| <p class="text-gray-600 mb-4">Turn your kitchen scraps into garden gold with our comprehensive composting guide.</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm text-gray-600">By Emily Rodriguez</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tools & Equipment --> | |
| <section id="tools" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-green-800 mb-4">Essential Gardening Tools</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Quality tools make gardening easier and more enjoyable</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Tool 1 --> | |
| <div class="bg-green-50 rounded-lg p-6 text-center"> | |
| <div class="floating-icon mb-4"> | |
| <i class="fas fa-trowel text-4xl text-green-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Hand Trowel</h3> | |
| <p class="text-gray-600 text-sm">Perfect for planting, transplanting and potting</p> | |
| </div> | |
| <!-- Tool 2 --> | |
| <div class="bg-green-50 rounded-lg p-6 text-center"> | |
| <div class="floating-icon mb-4"> | |
| <i class="fas fa-cut text-4xl text-green-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Pruners</h3> | |
| <p class="text-gray-600 text-sm">Keep your plants healthy with clean cuts</p> | |
| </div> | |
| <!-- Tool 3 --> | |
| <div class="bg-green-50 rounded-lg p-6 text-center"> | |
| <div class="floating-icon mb-4"> | |
| <i class="fas fa-faucet text-4xl text-green-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Watering Can</h3> | |
| <p class="text-gray-600 text-sm">Gentle watering for delicate plants</p> | |
| </div> | |
| <!-- Tool 4 --> | |
| <div class="bg-green-50 rounded-lg p-6 text-center"> | |
| <div class="floating-icon mb-4"> | |
| <i class="fas fa-gloves text-4xl text-green-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg text-gray-800 mb-2">Gardening Gloves</h3> | |
| <p class="text-gray-600 text-sm">Protect your hands while you work</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-green-100 rounded-xl p-8 md:p-12 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h3 class="text-2xl font-bold text-green-800 mb-4">Need Help Choosing Tools?</h3> | |
| <p class="text-gray-700 mb-6">Our expert team can help you select the perfect tools for your gardening needs and budget.</p> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-full font-medium transition duration-300"> | |
| Chat With an Expert | |
| </button> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1582373630419-0fe7ce7e0e6f?ixlib=rb-4.0.3" alt="Gardening Tools" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="py-16 bg-green-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-green-800 mb-4">Join Our Gardening Community</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Connect with fellow plant lovers, share tips, and get inspired</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Community Feature 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-comments text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Discussion Forums</h3> | |
| <p class="text-gray-600">Ask questions and share your gardening experiences with our active community.</p> | |
| </div> | |
| <!-- Community Feature 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-calendar-check text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Local Events</h3> | |
| <p class="text-gray-600">Find plant swaps, workshops, and garden tours in your area.</p> | |
| </div> | |
| <!-- Community Feature 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-trophy text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Monthly Challenges</h3> | |
| <p class="text-gray-600">Participate in fun gardening challenges and win prizes.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12"> | |
| <h3 class="text-2xl font-bold text-green-800 mb-4">Ready to Grow With Us?</h3> | |
| <p class="text-gray-600 mb-6">Join thousands of gardeners sharing knowledge, inspiration, and their love for plants.</p> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="experience" class="block text-sm font-medium text-gray-700 mb-1">Gardening Experience</label> | |
| <select id="experience" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| <option>Beginner</option> | |
| <option>Intermediate</option> | |
| <option>Advanced</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300"> | |
| Join Community | |
| </button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2 bg-green-100 flex items-center justify-center p-8"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3" alt="Community" class="rounded-lg shadow-md w-full max-w-md"> | |
| <div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-md"> | |
| <div class="flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/24.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">1,200+ Members</p> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="text-xs text-gray-600">4.9 (120 reviews)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-green-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="max-w-2xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-4">Get Gardening Tips Delivered</h2> | |
| <p class="text-lg mb-8">Subscribe to our newsletter for seasonal advice, exclusive content, and special offers.</p> | |
| <form class="flex flex-col sm:flex-row gap-2 max-w-lg mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-green-300"> | |
| <button type="submit" class="bg-green-800 hover:bg-green-900 px-6 py-3 rounded-lg font-medium transition duration-300"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p class="text-sm mt-4 text-green-100">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-green-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-leaf text-2xl text-green-300"></i> | |
| <h3 class="text-xl font-bold">GreenThumb</h3> | |
| </div> | |
| <p class="text-green-200 mb-4">Helping you grow beautiful, healthy gardens since 2010.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-pinterest-p"></i></a> | |
| <a href="#" class="text-green-200 hover:text-white"><i class="fab fa-youtube"></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="text-green-200 hover:text-white">Home</a></li> | |
| <li><a href="#plants" class="text-green-200 hover:text-white">Plants</a></li> | |
| <li><a href="#guides" class="text-green-200 hover:text-white">Guides</a></li> | |
| <li><a href="#tools" class="text-green-200 hover:text-white">Tools</a></li> | |
| <li><a href="#community" class="text-green-200 hover:text-white">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-green-200 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">FAQs</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Shipping Policy</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Returns & Refunds</a></li> | |
| <li><a href="#" class="text-green-200 hover:text-white">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> | |
| <address class="not-italic text-green-200"> | |
| <p class="mb-2">123 Garden Lane</p> | |
| <p class="mb-2">Greenville, CA 90210</p> | |
| <p class="mb-2">Phone: (555) 123-4567</p> | |
| <p>Email: hello@greenthumb.com</p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-green-800 text-center text-green-300 text-sm"> | |
| <p>© 2023 GreenThumb Gardening. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-6 right-6 bg-green-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Mobile Menu Toggle (would need more implementation) | |
| const mobileMenuButton = document.querySelector('button[aria-label="Mobile menu"]'); | |
| // This would need additional HTML and CSS for the mobile menu | |
| // Plant Card Favorite Button | |
| document.querySelectorAll('.plant-card button').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const icon = button.querySelector('i'); | |
| if (icon.classList.contains('far')) { | |
| icon.classList.remove('far'); | |
| icon.classList.add('fas', 'text-red-500'); | |
| } else { | |
| icon.classList.remove('fas', 'text-red-500'); | |
| icon.classList.add('far'); | |
| } | |
| }); | |
| }); | |
| // Form Submission | |
| document.querySelectorAll('form').forEach(form => { | |
| form.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // In a real implementation, you would handle form submission here | |
| alert('Thank you for your submission!'); | |
| }); | |
| }); | |
| // Tooltips | |
| document.querySelectorAll('.tooltip').forEach(element => { | |
| element.addEventListener('mouseenter', () => { | |
| const tooltip = element.querySelector('.tooltiptext'); | |
| tooltip.style.visibility = 'visible'; | |
| tooltip.style.opacity = '1'; | |
| }); | |
| element.addEventListener('mouseleave', () => { | |
| const tooltip = element.querySelector('.tooltiptext'); | |
| tooltip.style.visibility = 'hidden'; | |
| tooltip.style.opacity = '0'; | |
| }); | |
| }); | |
| </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=likesimo75/garden" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |