Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>NourishNet</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="supabase.js"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F7F5F0; | |
| } | |
| /* animations */ | |
| .fade-up { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: 0.8s ease; | |
| } | |
| .fade-up.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* cards */ | |
| .card { | |
| transition: all 0.3s ease; | |
| border: 1px solid transparent; | |
| } | |
| .card:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| border: 1px solid #10b981; | |
| box-shadow: 0 20px 30px rgba(0,0,0,0.08); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAVBAR --> | |
| <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white sticky top-0 z-50"> | |
| <a href="index.html" class="text-2xl font-extrabold"> | |
| NourishNet | |
| </a> | |
| <div class="hidden md:flex gap-10 font-medium"> | |
| <a href="#home">Home</a> | |
| <a href="#how">How it works</a> | |
| <a href="about.html">About</a> | |
| </div> | |
| <button onclick="openModal()" | |
| class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold"> | |
| Join as a Restaurant | |
| </button> | |
| </nav> | |
| <!-- HERO --> | |
| <section id="home" class="text-center py-24 px-6 fade-up"> | |
| <h1 class="text-5xl font-extrabold"> | |
| Turn food surplus into <span class="text-emerald-600">real impact</span> | |
| </h1> | |
| <p class="mt-6 text-gray-600 max-w-2xl mx-auto"> | |
| AI-powered redistribution connecting restaurants with communities in need across the UAE. | |
| </p> | |
| </section> | |
| <!-- STATS --> | |
| <section class="grid md:grid-cols-4 text-center bg-white py-12 fade-up"> | |
| <div><p class="text-3xl font-bold">42K+</p><p>Meals saved</p></div> | |
| <div><p class="text-3xl font-bold">300+</p><p>Restaurants</p></div> | |
| <div><p class="text-3xl font-bold">45</p><p>Communities</p></div> | |
| <div><p class="text-3xl font-bold">18T</p><p>CO₂ reduced</p></div> | |
| </section> | |
| <!-- HOW IT WORKS --> | |
| <section id="how" class="py-20 text-center px-6"> | |
| <h2 class="text-3xl font-bold mb-10 fade-up">How it works</h2> | |
| <div class="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto"> | |
| <div class="card bg-white p-6 rounded-xl fade-up"> | |
| <i data-lucide="clipboard-list" class="text-emerald-600 mb-4"></i> | |
| <h3 class="font-bold">Log surplus</h3> | |
| <p class="text-gray-600">Restaurants enter leftover food.</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl fade-up"> | |
| <i data-lucide="cpu" class="text-emerald-600 mb-4"></i> | |
| <h3 class="font-bold">AI matching</h3> | |
| <p class="text-gray-600">Smart routing to communities.</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl fade-up"> | |
| <i data-lucide="truck" class="text-emerald-600 mb-4"></i> | |
| <h3 class="font-bold">Delivery</h3> | |
| <p class="text-gray-600">Volunteers distribute food.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="text-center py-20 bg-emerald-50 fade-up"> | |
| <i data-lucide="leaf" class="text-emerald-600 mx-auto mb-4"></i> | |
| <h2 class="text-3xl font-bold">Ready to make a difference?</h2> | |
| <p class="text-gray-600 mt-4">Join 312+ restaurants already saving meals.</p> | |
| <button onclick="openModal()" class="mt-6 bg-emerald-600 text-white px-6 py-3 rounded-full"> | |
| Join NourishNet today | |
| </button> | |
| </section> | |
| <div id="footer"></div> | |
| <script> | |
| fetch("footer.html") | |
| .then(res => res.text()) | |
| .then(data => { | |
| document.getElementById("footer").innerHTML = data; | |
| }); | |
| </script> | |
| <!-- MODAL --> | |
| <div id="modal" class="fixed inset-0 bg-black/40 hidden items-center justify-center"> | |
| <div class="bg-white p-8 rounded-xl w-full max-w-md relative"> | |
| <button onclick="closeModal()" class="absolute top-3 right-3">✕</button> | |
| <h2 class="font-bold mb-4">Join as a Restaurant</h2> | |
| <input class="w-full border p-2 mb-3 rounded" placeholder="Name"> | |
| <input class="w-full border p-2 mb-3 rounded" placeholder="Location"> | |
| <button class="w-full bg-emerald-600 text-white py-2 rounded">Submit</button> | |
| </div> | |
| </div> | |
| <script> | |
| function openModal(){ | |
| modal.classList.remove("hidden"); | |
| modal.classList.add("flex"); | |
| } | |
| function closeModal(){ | |
| modal.classList.add("hidden"); | |
| modal.classList.remove("flex"); | |
| } | |
| const observer = new IntersectionObserver(entries=>{ | |
| entries.forEach(e=>{ | |
| if(e.isIntersecting) e.target.classList.add("show"); | |
| }); | |
| }); | |
| document.querySelectorAll(".fade-up").forEach(el=>observer.observe(el)); | |
| lucide.createIcons(); | |
| </script> | |
| </body> | |
| </html> |