Spaces:
Running
Running
I'm still not ok with your design, please include sample images of biodegradable takeaway plates, and the background images should reflect the Nigerian market and farm - Initial Deployment
455782c
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EcoPlate | Biodegradable Plates from Agricultural Waste</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4CAF50', | |
| secondary: '#8BC34A', | |
| accent: '#CDDC39', | |
| dark: '#2E7D32', | |
| light: '#C8E6C9', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1590674899484-d5640e854abe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .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); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-leaf text-primary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-primary">Agri<span class="text-dark">Pack</span></span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#home" class="text-dark px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition-all">Home</a> | |
| <a href="#about" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">About</a> | |
| <a href="#products" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">Products</a> | |
| <a href="#impact" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">Impact</a> | |
| <a href="#contact" class="text-gray-600 hover:text-dark px-3 py-2 rounded-md text-sm font-medium transition-all">Contact</a> | |
| <a href="#order" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-dark transition-all">Order Now</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-dark hover:bg-gray-100 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="text-dark block px-3 py-2 rounded-md text-base font-medium">Home</a> | |
| <a href="#about" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">About</a> | |
| <a href="#products" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">Products</a> | |
| <a href="#impact" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">Impact</a> | |
| <a href="#contact" class="text-gray-600 hover:text-dark block px-3 py-2 rounded-md text-base font-medium">Contact</a> | |
| <a href="#order" class="bg-primary text-white block px-3 py-2 rounded-md text-base font-medium text-center">Order Now</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-bg text-white py-20 md:py-32"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:w-2/3 lg:w-1/2"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Nigeria's Sustainable Alternative to Styrofoam</h1> | |
| <p class="text-xl mb-8">100% biodegradable packaging made from rice husk and farm waste - compliant with Lagos' 2025 plastic ban.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#order" class="bg-primary hover:bg-dark text-white px-6 py-3 rounded-lg text-lg font-semibold text-center transition-all">Order Samples</a> | |
| <a href="#about" class="bg-white hover:bg-gray-100 text-dark px-6 py-3 rounded-lg text-lg font-semibold text-center transition-all">Learn More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-primary text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div> | |
| <div class="text-3xl font-bold mb-2">100%</div> | |
| <div class="text-sm uppercase tracking-wider">Biodegradable</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold mb-2">30M+</div> | |
| <div class="text-sm uppercase tracking-wider">Plastic Plates Replaced</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold mb-2">200+</div> | |
| <div class="text-sm uppercase tracking-wider">Farmers Supported</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold mb-2">0</div> | |
| <div class="text-sm uppercase tracking-wider">Toxic Chemicals</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian agricultural waste" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="lg:w-1/2 lg:pl-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-6">Turning Waste Into Sustainable Tableware</h2> | |
| <p class="text-gray-600 mb-6">At EcoPlate, we've developed an innovative solution to two pressing environmental issues: agricultural waste disposal and plastic pollution. Our plates are crafted from leftover crop residues that would otherwise be burned, contributing to air pollution.</p> | |
| <p class="text-gray-600 mb-8">By upcycling this waste into durable, compostable tableware, we're creating a circular economy that benefits farmers, food vendors, and the planet.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Made from 100% agricultural byproducts</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Completely biodegradable in 90 days</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 p-2 rounded-full"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600">Affordable alternative to plastic disposables</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Our Sustainable Product Line</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Designed for food vendors who care about their environmental impact without compromising on quality or affordability.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1633429877819-a0d9bf01b8e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian biodegradable plates" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-dark mb-2">Food Packs</h3> | |
| <p class="text-gray-600 mb-4">Styrofoam-free food containers perfect for Nigerian takeaway meals.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold">From $0.15/plate</span> | |
| <button class="bg-primary hover:bg-dark text-white px-4 py-2 rounded text-sm transition-all">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1615484477778-ca3b77940c25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian food in biodegradable plates" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-dark mb-2">Square Plates</h3> | |
| <p class="text-gray-600 mb-4">Great for portion control and modern presentation, 7" and 9" sizes.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold">From $0.18/plate</span> | |
| <button class="bg-primary hover:bg-dark text-white px-4 py-2 rounded text-sm transition-all">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="https://images.unsplash.com/photo-1633429877819-a0d9bf01b8e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian biodegradable plate assortment" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-dark mb-2">Combo Packs</h3> | |
| <p class="text-gray-600 mb-4">Mixed sizes for all your catering needs. Save 15% with bulk orders.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-primary font-bold">From $0.12/plate</span> | |
| <button class="bg-primary hover:bg-dark text-white px-4 py-2 rounded text-sm transition-all">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#order" class="inline-block bg-dark hover:bg-primary text-white px-6 py-3 rounded-lg text-lg font-semibold transition-all">View Full Product Catalog</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Section --> | |
| <section id="impact" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Our Environmental & Social Impact</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Every EcoPlate purchase makes a difference beyond just reducing plastic waste.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="bg-primary bg-opacity-10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-recycle text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">Waste Reduction</h3> | |
| <p class="text-gray-600">We've diverted over 3,000 tons of rice husk from Lagos landfills, preventing 8,000 tons of CO2 emissions annually.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="bg-primary bg-opacity-10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-hand-holding-usd text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">Farmer Income</h3> | |
| <p class="text-gray-600">Our network of 200+ farmers earns supplemental income from selling crop residues that were previously worthless.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="bg-primary bg-opacity-10 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-users text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-dark mb-3">Community Jobs</h3> | |
| <p class="text-gray-600">Our manufacturing facilities employ 150+ workers from local communities with fair wages and benefits.</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1567181910476-8141768950e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nigerian farmer" class="h-full w-full object-cover"> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold text-dark mb-4">Farmer Success Stories</h3> | |
| <p class="text-gray-600 mb-6">"Before EcoPlate, we used to burn our rice husks after harvest. Now they pay us for what was just waste. This extra income helps send my children to school."</p> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Rajesh Kumar</p> | |
| <p class="text-sm text-gray-500">Rice Farmer, Kebbi State</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-primary text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">What Our Customers Say</h2> | |
| <p class="max-w-2xl mx-auto opacity-90">Food vendors across the country are making the switch to EcoPlate</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| </div> | |
| <p class="mb-4 italic">"Our customers love that we use sustainable plates. It's become part of our brand identity and we've actually gained business because of it."</p> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt=""> | |
| <div> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-sm opacity-80">Café Green, Mumbai</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| </div> | |
| <p class="mb-4 italic">"The quality surprised me - they hold up just as well as plastic but without the guilt. And the price is competitive too!"</p> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt=""> | |
| <div> | |
| <p class="font-medium">Amit Patel</p> | |
| <p class="text-sm opacity-80">Street Food Hub, Delhi</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star text-accent"></i> | |
| <i class="fas fa-star-half-alt text-accent"></i> | |
| </div> | |
| <p class="mb-4 italic">"Switching to EcoPlate helped us meet our sustainability goals while actually reducing our packaging costs. Win-win!"</p> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full mr-3" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=712&q=80" alt=""> | |
| <div> | |
| <p class="font-medium">Priya Sharma</p> | |
| <p class="text-sm opacity-80">Corporate Catering Co.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Order Section --> | |
| <section id="order" class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12 text-white"> | |
| <h2 class="text-3xl font-bold mb-4">Ready to Make the Switch?</h2> | |
| <p class="mb-6 opacity-90">Join hundreds of food vendors who are reducing their environmental impact with our sustainable plates.</p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p>Free samples for first-time customers</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p>Bulk discounts available</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p>Flexible delivery options</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span class="font-semibold">+91 98765 43210</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 bg-white p-8 md:p-12"> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Request a Quote</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="business" class="block text-gray-700 text-sm font-medium mb-2">Business Name</label> | |
| <input type="text" id="business" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="phone" class="block text-gray-700 text-sm font-medium mb-2">Phone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 text-sm font-medium mb-2">What products are you interested in?</label> | |
| <textarea id="message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-dark hover:bg-primary text-white py-3 rounded-md font-medium transition-all">Get Pricing</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Frequently Asked Questions</h2> | |
| <p class="text-gray-600">Everything you need to know about EcoPlate products</p> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center text-left"> | |
| <h3 class="text-lg font-medium text-dark">Are EcoPlates really biodegradable?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform"></i> | |
| </button> | |
| <div class="faq-content mt-4 hidden"> | |
| <p class="text-gray-600">Yes! Our plates are made from 100% agricultural waste with no synthetic additives. They completely biodegrade in home compost within 90 days, leaving no toxic residues. We've had them certified by independent laboratories.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center text-left"> | |
| <h3 class="text-lg font-medium text-dark">How do they compare in price to plastic plates?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform"></i> | |
| </button> | |
| <div class="faq-content mt-4 hidden"> | |
| <p class="text-gray-600">Our plates are competitively priced with mid-range plastic disposables, typically just 10-15% more expensive. However, bulk discounts can often make them price-competitive with plastic. Many customers find the branding and customer goodwill benefits outweigh the small price difference.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center text-left"> | |
| <h3 class="text-lg font-medium text-dark">Can they handle hot, wet, or greasy foods?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform"></i> | |
| </button> | |
| <div class="faq-content mt-4 hidden"> | |
| <p class="text-gray-600">Absolutely! Our proprietary manufacturing process creates plates that are oil-resistant and can handle temperatures up to 100°C. They maintain structural integrity for up to 4 hours with wet foods - perfect for most takeaway needs.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center text-left"> | |
| <h3 class="text-lg font-medium text-dark">What's the minimum order quantity?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform"></i> | |
| </button> | |
| <div class="faq-content mt-4 hidden"> | |
| <p class="text-gray-600">We offer sample packs starting at just 50 plates so you can test them. For regular orders, our minimum is 1,000 plates of a single type, but mixed cartons are available at 2,000 plates minimum. Larger orders qualify for volume discounts.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <button class="faq-toggle w-full flex justify-between items-center text-left"> | |
| <h3 class="text-lg font-medium text-dark">How long do they last in storage?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform"></i> | |
| </button> | |
| <div class="faq-content mt-4 hidden"> | |
| <p class="text-gray-600">When stored in a cool, dry place (not exposed to moisture), our plates have a shelf life of 18 months. They don't require any special storage conditions beyond what you'd use for paper or plastic disposables.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <p class="text-gray-600 mb-4">Still have questions?</p> | |
| <a href="#contact" class="inline-block bg-primary hover:bg-dark text-white px-6 py-3 rounded-lg font-semibold transition-all">Contact Our Team</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Get In Touch</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We'd love to hear from you! Reach out for wholesale inquiries, partnerships, or any questions.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-dark mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 p-3 rounded-full"> | |
| <i class="fas fa-map-marker-alt text-primary"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark mb-1">Our Office</h4> | |
| <p class="text-gray-600">14 Agric Road, Ikeja, Lagos, Nigeria</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 p-3 rounded-full"> | |
| <i class="fas fa-phone-alt text-primary"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark mb-1">Phone</h4> | |
| <p class="text-gray-600">+234 812 345 6789 (Sales)</p> | |
| <p class="text-gray-600">+234 812 345 6790 (Support)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 p-3 rounded-full"> | |
| <i class="fas fa-envelope text-primary"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-dark mb-1">Email</h4> | |
| <p class="text-gray-600">sales@ecoplate.in</p> | |
| <p class="text-gray-600">support@ecoplate.in</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-lg font-medium text-dark mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition-all"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-dark mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div> | |
| <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div> | |
| <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div> | |
| <label for="contact-subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> | |
| </div> | |
| <div> | |
| <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="bg-primary hover:bg-dark text-white px-6 py-3 rounded-md font-medium transition-all">Send Message</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white pt-12 pb-6"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Eco<span class="text-primary">Plate</span></h3> | |
| <p class="text-gray-300 mb-4">Sustainable tableware solutions for a plastic-free future.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-primary transition-all"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Round Plates</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Square Plates</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Combo Packs</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Custom Branding</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">About Us</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Our Impact</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Blog</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Careers</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-gray-300 hover:text-primary transition-all">FAQ</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Shipping Policy</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Returns</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-300 mb-4 md:mb-0">© 2023 EcoPlate. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-300 hover:text-primary transition-all">Privacy Policy</a> | |
| <a href="#" class="text-gray-300 hover:text-primary transition-all">Terms of Service</a> | |
| <a href="#" class="text-gray-300 hover:text-primary transition-all">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // FAQ toggle functionality | |
| document.querySelectorAll('.faq-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </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=Onyeka1187/agripack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |