Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="GreenFlow - Eco-friendly refill stations for cleaning products and office supplies in Multan. Reduce waste, save costs, and build a sustainable workplace."> | |
| <meta name="keywords" content="eco-friendly refill, sustainable office, cleaning product refill, Multan green business, plastic-free office"> | |
| <title>GreenFlow - Sustainable Refills for a Cleaner Tomorrow</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍃</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| font-family: 'Nunito', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, #e0f7e0 0%, #c8e6c9 100%); | |
| } | |
| .loading-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: #f0fff0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| .loading-hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .counter { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-800"> | |
| <!-- Loading Screen --> | |
| <div id="loadingScreen" class="loading-screen"> | |
| <div class="text-center"> | |
| <div class="text-5xl mb-4">🍃</div> | |
| <div class="text-xl font-semibold text-green-700">GreenFlow</div> | |
| </div> | |
| </div> | |
| <!-- Navbar --> | |
| <nav class="sticky top-0 z-50 bg-white shadow-md py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="text-2xl font-bold text-green-700">GreenFlow</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="hover:text-green-600 transition">About</a> | |
| <a href="#services" class="hover:text-green-600 transition">Services</a> | |
| <a href="#how-it-works" class="hover:text-green-600 transition">How It Works</a> | |
| <a href="#benefits" class="hover:text-green-600 transition">Benefits</a> | |
| <a href="#contact" class="hover:text-green-600 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-green-700"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg py-20 px-6 text-center"> | |
| <div class="max-w-3xl mx-auto" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 text-green-800">GreenFlow – Sustainable Refills for a Cleaner Tomorrow</h1> | |
| <p class="text-lg md:text-xl mb-8 text-gray-700">Helping offices in Multan save costs, reduce waste, and go green.</p> | |
| <a href="#contact" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">Get Started</a> | |
| </div> | |
| </section> | |
| <!-- About Us --> | |
| <section id="about" class="py-16 px-6 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-center text-green-800">About GreenFlow</h2> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-green-700">Our Mission</h3> | |
| <p class="mb-6">To provide eco-friendly, waste-reducing solutions that help businesses operate sustainably while reducing their environmental footprint.</p> | |
| <h3 class="text-xl font-semibold mb-4 text-green-700">Our Vision</h3> | |
| <p>Cleaner workplaces and sustainable cities through innovative refill systems that make going green accessible and affordable.</p> | |
| </div> | |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-64 md:h-96 flex items-center justify-center text-gray-500"> | |
| Image Placeholder | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services --> | |
| <section id="services" class="py-16 px-6"> | |
| <div class="max-w-6xl mx-auto" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Our Services</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-green-600 mb-4 inline-block"> | |
| <i data-feather="droplet" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Refill Stations</h3> | |
| <p>Installation of eco-stations for dishwashing liquid, handwash, multipurpose cleaners, and more.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-green-600 mb-4 inline-block"> | |
| <i data-feather="package" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Bulk Supplies</h3> | |
| <p>Eco-friendly bulk cleaning and office supplies delivered directly to your office.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-green-600 mb-4 inline-block"> | |
| <i data-feather="settings" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Consulting</h3> | |
| <p>Sustainability consulting and maintenance services to keep your green initiatives running smoothly.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-16 px-6 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-center text-green-800">How It Works</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-green-700 font-bold text-xl">1</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Sign Up</h3> | |
| <p>Offices register for our refill solutions tailored to their needs.</p> | |
| </div> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-green-700 font-bold text-xl">2</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Installation</h3> | |
| <p>We install eco-friendly refill stations at your workplace.</p> | |
| </div> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-green-700 font-bold text-xl">3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Regular Refills</h3> | |
| <p>Ongoing refills reduce waste and keep your supplies fresh.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits --> | |
| <section id="benefits" class="py-16 px-6"> | |
| <div class="max-w-6xl mx-auto" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Why Choose GreenFlow?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-green-600 mb-4 inline-block"> | |
| <i data-feather="dollar-sign" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Save Money</h3> | |
| <p>Reduce procurement costs with our bulk refill solutions.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-green-600 mb-4 inline-block"> | |
| <i data-feather="trash-2" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Reduce Waste</h3> | |
| <p>Minimize single-use plastic waste with our refill system.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-green-100 text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-green-600 mb-4 inline-block"> | |
| <i data-feather="award" class="w-12 h-12"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Brand Image</h3> | |
| <p>Enhance your company's sustainable reputation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Section --> | |
| <section class="py-16 px-6 bg-green-50"> | |
| <div class="max-w-6xl mx-auto text-center" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-green-800">Our Environmental Impact</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <div class="counter text-green-700" data-target="15000">0</div> | |
| <p>Liters of Plastic Saved</p> | |
| </div> | |
| <div> | |
| <div class="counter text-green-700" data-target="42">0</div> | |
| <p>Offices Served</p> | |
| </div> | |
| <div> | |
| <div class="counter text-green-700" data-target="8500">0</div> | |
| <p>kg CO₂ Reduced</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 px-6"> | |
| <div class="max-w-4xl mx-auto" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-center text-green-800">What Our Clients Say</h2> | |
| <div class="space-y-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-green-100"> | |
| <p class="italic mb-4">"GreenFlow has transformed how we manage office supplies. We've cut costs by 30% and significantly reduced our plastic waste!"</p> | |
| <p class="font-semibold">- Ahmed R., Office Manager</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl border border-green-100"> | |
| <p class="italic mb-4">"The installation was seamless and the ongoing service is exceptional. Our employees love the new eco-friendly stations."</p> | |
| <p class="font-semibold">- Fatima K., HR Director</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-16 px-6 bg-gray-50"> | |
| <div class="max-w-4xl mx-auto" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Frequently Asked Questions</h2> | |
| <div class="space-y-4"> | |
| <div class="border-b border-green-200 pb-4"> | |
| <button class="flex justify-between items-center w-full text-left font-semibold text-lg text-green-700 focus:outline-none"> | |
| <span>How do your refill stations work?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| <div class="mt-2 hidden"> | |
| <p>Our stations are installed at your workplace and connected to our supply system. We regularly refill them with eco-friendly products based on your usage.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-green-200 pb-4"> | |
| <button class="flex justify-between items-center w-full text-left font-semibold text-lg text-green-700 focus:outline-none"> | |
| <span>What products do you offer?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| <div class="mt-2 hidden"> | |
| <p>We provide refills for dishwashing liquid, hand sanitizers, multipurpose cleaners, and other essential office cleaning supplies.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-green-200 pb-4"> | |
| <button class="flex justify-between items-center w-full text-left font-semibold text-lg text-green-700 focus:outline-none"> | |
| <span>How often do you refill?</span> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| <div class="mt-2 hidden"> | |
| <p>Refill frequency depends on your usage but typically ranges from weekly to monthly. We monitor levels to ensure you never run out.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact --> | |
| <section id="contact" class="py-16 px-6"> | |
| <div class="max-w-6xl mx-auto" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-12 text-center text-green-800">Get In Touch</h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <form class="space-y-6 bg-white p-8 rounded-xl shadow-lg"> | |
| <div> | |
| <label class="block mb-2 font-medium text-gray-700">Full Name</label> | |
| <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="John Doe"> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium text-gray-700">Email Address</label> | |
| <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="john@example.com"> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium text-gray-700">Phone Number</label> | |
| <input type="tel" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="+92 300 1234567"> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium text-gray-700">Company (Optional)</label> | |
| <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="Your Company"> | |
| </div> | |
| <div> | |
| <label class="block mb-2 font-medium text-gray-700">Message</label> | |
| <textarea rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none transition" placeholder="How can we help you?"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:-translate-y-1">Send Message</button> | |
| </form> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-6 text-green-700">Contact Information</h3> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i data-feather="map-pin" class="w-5 h-5 mr-3 text-green-600 mt-1"></i> | |
| <span>123 Green Street, Multan, Pakistan</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="w-5 h-5 mr-3 text-green-600"></i> | |
| <span>+92 300 1234567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="w-5 h-5 mr-3 text-green-600"></i> | |
| <span>info@greenflow.pk</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="clock" class="w-5 h-5 mr-3 text-green-600"></i> | |
| <span>Mon-Fri: 9AM - 6PM</span> | |
| </li> | |
| </ul> | |
| <div class="mb-8"> | |
| <h4 class="font-semibold text-lg mb-4 text-green-700">Find Us</h4> | |
| <div class="bg-gray-200 rounded-xl overflow-hidden h-64"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d112842.03569151234!2d71.37865785820315!3d30.196640900000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x393b31e0a59dce77%3A0x9ab8c7baf0af09f7!2sMultan%2C%20Punjab%2C%20Pakistan!5e0!3m2!1sen!2s!4v1650000000000!5m2!1sen!2s" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4 text-green-700">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="bg-green-100 p-3 rounded-full text-green-600 hover:bg-green-200 transition"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-green-800 text-white py-12 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">GreenFlow</h3> | |
| <p class="text-green-200">Sustainable refill solutions for a cleaner tomorrow in Multan.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2 text-green-200"> | |
| <li><a href="#about" class="hover:text-white transition">About</a></li> | |
| <li><a href="#services" class="hover:text-white transition">Services</a></li> | |
| <li><a href="#contact" class="hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Services</h4> | |
| <ul class="space-y-2 text-green-200"> | |
| <li>Refill Stations</li> | |
| <li>Bulk Supplies</li> | |
| <li>Consulting</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Contact</h4> | |
| <address class="not-italic text-green-200"> | |
| 123 Green Street<br> | |
| Multan, Pakistan<br> | |
| +92 300 1234567<br> | |
| info@greenflow.pk | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-green-700 mt-8 pt-8 text-center text-green-300"> | |
| <p>© 2023 GreenFlow. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Loading screen | |
| window.addEventListener('load', function() { | |
| setTimeout(function() { | |
| document.getElementById('loadingScreen').classList.add('loading-hidden'); | |
| }, 1000); | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out' | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Counter animation | |
| function animateCounter(element, target) { | |
| let count = 0; | |
| const increment = target / 100; | |
| const timer = setInterval(() => { | |
| count += increment; | |
| if (count >= target) { | |
| element.innerText = target.toLocaleString(); | |
| clearInterval(timer); | |
| } else { | |
| element.innerText = Math.ceil(count).toLocaleString(); | |
| } | |
| }, 20); | |
| } | |
| // Run counters when in view | |
| const counters = document.querySelectorAll('.counter'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const counter = entry.target; | |
| const target = parseInt(counter.getAttribute('data-target')); | |
| animateCounter(counter, target); | |
| observer.unobserve(counter); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| counters.forEach(counter => { | |
| observer.observe(counter); | |
| }); | |
| // FAQ Accordion | |
| document.querySelectorAll('button[aria-expanded]').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const expanded = button.getAttribute('aria-expanded') === 'true'; | |
| button.setAttribute('aria-expanded', !expanded); | |
| const content = button.nextElementSibling; | |
| content.classList.toggle('hidden'); | |
| const icon = button.querySelector('i'); | |
| if (expanded) { | |
| icon.setAttribute('data-feather', 'chevron-down'); | |
| } else { | |
| icon.setAttribute('data-feather', 'chevron-up'); | |
| } | |
| feather.replace(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |