Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GreenLeaf Wellness | Premium Cannabis Education</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> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(20,83,45,0.9) 0%, rgba(56,142,60,0.8) 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .stripe-bg { | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| #f8f9fa, | |
| #f8f9fa 10px, | |
| #e9ecef 10px, | |
| #e9ecef 20px | |
| ); | |
| } | |
| .section-divider { | |
| height: 100px; | |
| background: linear-gradient(to bottom right, transparent 49.5%, #f8f9fa 50%), linear-gradient(to bottom left, transparent 49.5%, #f8f9fa 50%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://images.unsplash.com/photo-1600857544200-b2f666a9a1ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="GreenLeaf Logo" class="h-10 mr-3 rounded-full"> | |
| <h1 class="text-xl font-bold text-green-800">GreenLeaf Wellness</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-green-700 hover:text-green-500 font-medium">Home</a> | |
| <a href="#about" class="text-green-700 hover:text-green-500 font-medium">About Us</a> | |
| <a href="#products" class="text-green-700 hover:text-green-500 font-medium">Products</a> | |
| <a href="#education" class="text-green-700 hover:text-green-500 font-medium">Education</a> | |
| <a href="#membership" class="text-green-700 hover:text-green-500 font-medium">Membership</a> | |
| <a href="#blog" class="text-green-700 hover:text-green-500 font-medium">Blog</a> | |
| <a href="#contact" class="text-green-700 hover:text-green-500 font-medium">Contact Us</a> | |
| </nav> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-green-800"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#home" class="text-green-700 hover:text-green-500 py-2">Home</a> | |
| <a href="#about" class="text-green-700 hover:text-green-500 py-2">About Us</a> | |
| <a href="#products" class="text-green-700 hover:text-green-500 py-2">Products</a> | |
| <a href="#education" class="text-green-700 hover:text-green-500 py-2">Education</a> | |
| <a href="#membership" class="text-green-700 hover:text-green-500 py-2">Membership</a> | |
| <a href="#blog" class="text-green-700 hover:text-green-500 py-2">Blog</a> | |
| <a href="#contact" class="text-green-700 hover:text-green-500 py-2">Contact Us</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Premium Cannabis Education & Products</h2> | |
| <p class="text-xl mb-8">Discover the therapeutic benefits of cannabis through science-backed education and premium quality products.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#education" class="bg-white text-green-800 px-6 py-3 rounded-lg font-bold text-center hover:bg-gray-100 transition">Learn More</a> | |
| <a href="#products" class="border-2 border-white px-6 py-3 rounded-lg font-bold text-center hover:bg-white hover:text-green-800 transition">Our Products</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1598802586325-849d2b1166a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cannabis products" class="rounded-lg shadow-xl w-full max-w-lg"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trust Indicators --> | |
| <div class="bg-gray-100 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-green-700">10+</div> | |
| <div class="text-gray-600">Years Experience</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-green-700">100%</div> | |
| <div class="text-gray-600">Lab Tested</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-green-700">5K+</div> | |
| <div class="text-gray-600">Satisfied Members</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-green-700">24/7</div> | |
| <div class="text-gray-600">Customer Support</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About Us Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">About GreenLeaf Wellness</h2> | |
| <div class="w-24 h-1 bg-green-600 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Our team" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold text-green-700 mb-4">Our Mission</h3> | |
| <p class="text-gray-700 mb-6">At GreenLeaf Wellness, we're dedicated to breaking the stigma surrounding cannabis through education, research, and premium products. Our team of experts combines decades of experience in botany, pharmacology, and holistic wellness.</p> | |
| <div class="mb-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-green-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-leaf text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Sustainable Cultivation</h4> | |
| <p class="text-gray-600">We use organic farming practices to ensure the highest quality cannabis.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-green-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-flask text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Scientific Approach</h4> | |
| <p class="text-gray-600">All our products are developed based on clinical research and testing.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-heart text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Community Focus</h4> | |
| <p class="text-gray-600">We're committed to educating and supporting our community's wellness journey.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#contact" class="inline-block bg-green-700 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-800 transition">Get in Touch</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Our Premium Products</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Carefully curated selection of lab-tested cannabis products for every need</p> | |
| <div class="w-24 h-1 bg-green-600 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product Card 1 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md card-hover transition duration-300"> | |
| <div class="relative h-48 bg-green-100 flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1597733336794-12d05021d510?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="CBD Oil" class="h-full w-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-green-700 text-white px-2 py-1 text-xs rounded">BESTSELLER</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Full Spectrum CBD Oil</h3> | |
| <p class="text-gray-600 mb-4">Premium quality CBD oil with all beneficial cannabinoids preserved.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-700">$49.99</span> | |
| <button class="bg-green-700 text-white px-4 py-2 rounded hover:bg-green-800 transition">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md card-hover transition duration-300"> | |
| <div class="relative h-48 bg-green-100 flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1616699002807-39e334f32bf8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="THC Gummies" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">THC Infused Gummies</h3> | |
| <p class="text-gray-600 mb-4">Delicious fruit-flavored gummies with precise THC dosing.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-700">$34.99</span> | |
| <button class="bg-green-700 text-white px-4 py-2 rounded hover:bg-green-800 transition">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md card-hover transition duration-300"> | |
| <div class="relative h-48 bg-green-100 flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1584992236310-6edddc08acdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Topical Cream" class="h-full w-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-green-700 text-white px-2 py-1 text-xs rounded">NEW</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">CBD Relief Cream</h3> | |
| <p class="text-gray-600 mb-4">Soothing topical cream with CBD for targeted pain relief.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-green-700">$29.99</span> | |
| <button class="bg-green-700 text-white px-4 py-2 rounded hover:bg-green-800 transition">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block border-2 border-green-700 text-green-700 px-6 py-3 rounded-lg font-medium hover:bg-green-700 hover:text-white transition">View All Products</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Cannabis Education</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Empowering you with knowledge to make informed decisions about cannabis use</p> | |
| <div class="w-24 h-1 bg-green-600 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Education Card 1 --> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-sm card-hover transition"> | |
| <div class="bg-green-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-book text-green-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-3">Cannabis 101</h3> | |
| <p class="text-gray-600 mb-4">Learn the basics of cannabis, including different strains, consumption methods, and effects.</p> | |
| <a href="#" class="text-green-700 font-medium hover:underline">Start Learning →</a> | |
| </div> | |
| <!-- Education Card 2 --> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-sm card-hover transition"> | |
| <div class="bg-green-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-heartbeat text-green-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-3">Medical Benefits</h3> | |
| <p class="text-gray-600 mb-4">Explore the scientifically-proven therapeutic applications of cannabis for various conditions.</p> | |
| <a href="#" class="text-green-700 font-medium hover:underline">Start Learning →</a> | |
| </div> | |
| <!-- Education Card 3 --> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-sm card-hover transition"> | |
| <div class="bg-green-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-balance-scale text-green-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-3">Legal Landscape</h3> | |
| <p class="text-gray-600 mb-4">Stay updated on cannabis laws and regulations in your state and nationwide.</p> | |
| <a href="#" class="text-green-700 font-medium hover:underline">Start Learning →</a> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 rounded-xl p-8 md:p-12"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold text-green-800 mb-4">Interactive Learning Center</h3> | |
| <p class="text-gray-700 mb-6">Our state-of-the-art digital learning platform offers courses, webinars, and expert Q&A sessions to deepen your understanding of cannabis.</p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Personalized learning paths</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Certification programs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Live expert sessions</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="inline-block bg-green-700 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-800 transition">Explore Learning Center</a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Learning platform" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Membership Section --> | |
| <section id="membership" class="py-20 stripe-bg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Join Our Wellness Community</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Exclusive benefits for members who want to deepen their cannabis wellness journey</p> | |
| <div class="w-24 h-1 bg-green-600 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Membership Tier 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-green-100 py-6 px-8 text-center"> | |
| <h3 class="text-xl font-bold text-green-800">Basic</h3> | |
| <div class="mt-4"> | |
| <span class="text-4xl font-bold text-green-700">$19</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| </div> | |
| <div class="p-8"> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>10% discount on all products</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Access to basic educational content</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Monthly newsletter</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times mt-1 mr-3"></i> | |
| <span>No exclusive products</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times mt-1 mr-3"></i> | |
| <span>No expert consultations</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-medium hover:bg-gray-300 transition">Get Started</button> | |
| </div> | |
| </div> | |
| <!-- Membership Tier 2 (Featured) --> | |
| <div class="bg-white rounded-xl shadow-xl overflow-hidden transform scale-105 z-10 border-2 border-green-500"> | |
| <div class="bg-green-700 py-6 px-8 text-center text-white"> | |
| <div class="absolute top-0 right-0 bg-green-700 text-white px-4 py-1 text-sm transform translate-x-2 -translate-y-2">POPULAR</div> | |
| <h3 class="text-xl font-bold">Premium</h3> | |
| <div class="mt-4"> | |
| <span class="text-4xl font-bold">$49</span> | |
| <span>/month</span> | |
| </div> | |
| </div> | |
| <div class="p-8"> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>20% discount on all products</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Full access to educational content</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Access to exclusive products</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Quarterly expert consultation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Monthly wellness box</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-green-700 text-white py-3 rounded-lg font-medium hover:bg-green-800 transition">Get Started</button> | |
| </div> | |
| </div> | |
| <!-- Membership Tier 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="bg-green-100 py-6 px-8 text-center"> | |
| <h3 class="text-xl font-bold text-green-800">VIP</h3> | |
| <div class="mt-4"> | |
| <span class="text-4xl font-bold text-green-700">$99</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| </div> | |
| <div class="p-8"> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>30% discount on all products</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Premium educational content + certification</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>First access to all new products</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Monthly expert consultation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-600 mt-1 mr-3"></i> | |
| <span>Customized wellness plan</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-medium hover:bg-gray-300 transition">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Latest From Our Blog</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Stay updated with the latest cannabis research, news, and wellness tips</p> | |
| <div class="w-24 h-1 bg-green-600 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Blog Post 1 --> | |
| <article class="bg-white rounded-lg overflow-hidden shadow-md card-hover transition"> | |
| <div class="h-48 bg-green-100 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1579664659181-1fa5e9e714b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Blog post" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <span>June 15, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>5 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-3">Understanding CBD vs. THC: Key Differences</h3> | |
| <p class="text-gray-600 mb-4">Explore the fundamental differences between these two major cannabinoids and their effects on the body.</p> | |
| <a href="#" class="text-green-700 font-medium hover:underline">Read More →</a> | |
| </div> | |
| </article> | |
| <!-- Blog Post 2 --> | |
| <article class="bg-white rounded-lg overflow-hidden shadow-md card-hover transition"> | |
| <div class="h-48 bg-green-100 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Blog post" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <span>June 8, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>7 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-3">Cannabis for Chronic Pain: What the Research Says</h3> | |
| <p class="text-gray-600 mb-4">A comprehensive review of clinical studies on cannabis efficacy for pain management.</p> | |
| <a href="#" class="text-green-700 font-medium hover:underline">Read More →</a> | |
| </div> | |
| </article> | |
| <!-- Blog Post 3 --> | |
| <article class="bg-white rounded-lg overflow-hidden shadow-md card-hover transition"> | |
| <div class="h-48 bg-green-100 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Blog post" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <span>June 1, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>4 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-3">Sustainable Cannabis Farming Practices</h3> | |
| <p class="text-gray-600 mb-4">How eco-conscious growers are revolutionizing cannabis cultivation for a greener future.</p> | |
| <a href="#" class="text-green-700 font-medium hover:underline">Read More →</a> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block border-2 border-green-700 text-green-700 px-6 py-3 rounded-lg font-medium hover:bg-green-700 hover:text-white transition">View All Articles</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-green-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">What Our Members Say</h2> | |
| <div class="w-24 h-1 bg-green-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Sarah J." class="w-full h-full rounded-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Sarah J.</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-700 italic">"The educational resources completely changed my perspective on cannabis. I finally found relief for my chronic pain after years of ineffective treatments."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Michael T." class="w-full h-full rounded-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Michael T.</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-700 italic">"As a medical professional, I appreciate the scientific rigor behind GreenLeaf's content. Their premium membership gives me access to research I can trust."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <img src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Emma L." class="w-full h-full rounded-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800">Emma L.</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-700 italic">"The personalized consultation helped me find the perfect products for my needs. The quality is unmatched and the customer service is exceptional."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Contact Us</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Have questions? Our team is here to help with any inquiries about our products or services.</p> | |
| <div class="w-24 h-1 bg-green-600 mx-auto mt-4"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h3 class="text-2xl font-bold text-green-700 mb-6">Get in Touch</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-green-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800 mb-1">Our Location</h4> | |
| <p class="text-gray-600">123 Wellness Way, Suite 100<br>Portland, OR 97201</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-green-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800 mb-1">Phone</h4> | |
| <p class="text-gray-600">(503) 555-0199<br>Mon-Fri, 9am-5pm PST</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-green-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-800 mb-1">Email</h4> | |
| <p class="text-gray-600">[email protected]<br>We typically reply within 24 hours</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold text-green-800 mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-green-700 hover:bg-green-200 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-green-700 hover:bg-green-200 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-green-700 hover:bg-green-200 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-green-700 hover:bg-green-200 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="first-name" class="block text-gray-700 font-medium mb-2">First Name</label> | |
| <input type="text" id="first-name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-gray-700 font-medium mb-2">Last Name</label> | |
| <input type="text" id="last-name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> | |
| <select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <option value="">Select a subject</option> | |
| <option value="products">Product Inquiry</option> | |
| <option value="education">Education Question</option> | |
| <option value="membership">Membership Information</option> | |
| <option value="support">Customer Support</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-green-700 text-white px-6 py-4 rounded-lg font-bold hover:bg-green-800 transition">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-green-800 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">Join Our Newsletter</h3> | |
| <p class="text-green-100">Stay updated with the latest cannabis research, product launches, and exclusive offers.</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="flex flex-col sm:flex-row gap-3"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 text-gray-900"> | |
| <button type="submit" class="bg-white text-green-800 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition">Subscribe</button> | |
| </form> | |
| <p class="text-green-100 text-sm mt-2">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"> | |
| <!-- Column 1 --> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://images.unsplash.com/photo-1600857544200-b2f666a9a1ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="GreenLeaf Logo" class="h-10 mr-3 rounded-full"> | |
| <h3 class="text-xl font-bold">GreenLeaf Wellness</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6">Premium cannabis education and products for a healthier lifestyle.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Quick Links</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#products" class="text-gray-400 hover:text-white transition">Products</a></li> | |
| <li><a href="#education" class="text-gray-400 hover:text-white transition">Education</a></li> | |
| <li><a href="#membership" class="text-gray-400 hover:text-white transition">Membership</a></li> | |
| <li><a href="#blog" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Products</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">CBD Oils</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Edibles</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Topicals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Vape Products</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Concentrates</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Flower</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Merchandise</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-6">Legal</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Refunds</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Age Verification</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Medical Disclaimer</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 GreenLeaf Wellness. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <img src="https://images.unsplash.com/photo-1613243555988-441166d4d6fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Visa" class="h-8"> | |
| <img src="https://images.unsplash.com/photo-1599305445674-9a99da5e622a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Mastercard" class="h-8"> | |
| <img src="https://images.unsplash.com/photo-1600269452121-1fbad0b8fc19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="American Express" class="h-8"> | |
| <img src="https://images.unsplash.com/photo-1630002743982-0a0f3c3f8b2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="Discover" class="h-8"> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| <p>This product is not intended to diagnose, treat, cure or prevent any disease. Must be 21+ to purchase. Keep out of reach of children.</p> | |
| <p class="mt-2">FDA Disclosure: These statements have not been evaluated by the Food and Drug Administration.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenu.classList.add('hidden'); | |
| // Scroll to target | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add shadow to header on scroll | |
| window.addEventListener('scroll', function() { | |
| const header = document.querySelector('header'); | |
| if (window.scrollY > 10) { | |
| header.classList.add('shadow-lg'); | |
| } else { | |
| header.classList.remove('shadow-lg'); | |
| } | |
| }); | |
| </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=AnietieBassey/420degrees" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |