Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>About - NourishNet</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="supabase.js"></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; | |
| } | |
| .card { | |
| transition: all 0.3s ease; | |
| border: 1px solid transparent; | |
| } | |
| .card:hover { | |
| transform: translateY(-6px); | |
| 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"> | |
| <a href="index.html" class="text-2xl font-extrabold"> | |
| NourishNet | |
| </a> | |
| <div class="hidden md:flex gap-10 font-medium"> | |
| <a href="index.html">Home</a> | |
| <a href="index.html#how">How it works</a> | |
| <a href="about.html">About</a> | |
| </div> | |
| <a href="index.html" class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold"> | |
| Join as a Restaurant | |
| </a> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="text-center py-20 px-6"> | |
| <h1 class="text-4xl font-extrabold"> | |
| The food waste crisis is solvable | |
| </h1> | |
| <p class="text-gray-600 mt-6 max-w-3xl mx-auto"> | |
| NourishNet is building the AI infrastructure to redirect every surplus meal to someone who needs it. | |
| </p> | |
| </section> | |
| <!-- STATS --> | |
| <section class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto px-6 text-center"> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-3xl font-bold text-emerald-600">3.27M</p> | |
| <p>tons of food wasted per year in the UAE</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-3xl font-bold text-emerald-600">60%</p> | |
| <p>of waste occurs during Ramadan</p> | |
| </div> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-3xl font-bold text-emerald-600">$3.5B</p> | |
| <p>annual cost of food waste</p> | |
| </div> | |
| </section> | |
| <!-- PROBLEM --> | |
| <section class="max-w-5xl mx-auto px-6 py-16"> | |
| <h2 class="text-2xl font-bold mb-4">The problem</h2> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-gray-600"> | |
| Every night, restaurants discard good food while many go hungry. The issue is not supply — it's routing. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- SOLUTION --> | |
| <section class="max-w-5xl mx-auto px-6 pb-16"> | |
| <h2 class="text-2xl font-bold mb-4">Our solution</h2> | |
| <div class="card bg-white p-6 rounded-xl"> | |
| <p class="text-gray-600"> | |
| AI matches surplus food based on type, halal, expiry, and location for smart redistribution. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- TABLE --> | |
| <section class="max-w-6xl mx-auto px-6 pb-20"> | |
| <h2 class="text-2xl font-bold text-center mb-6">Why NourishNet?</h2> | |
| <table class="w-full bg-white rounded-xl overflow-hidden"> | |
| <thead class="bg-emerald-600 text-white"> | |
| <tr> | |
| <th class="p-4 text-left">Feature</th> | |
| <th class="p-4">NourishNet</th> | |
| <th class="p-4">Others</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-emerald-50"> | |
| <td class="p-4">AI-powered routing</td> | |
| <td class="text-center text-emerald-600 font-bold">✔</td> | |
| <td class="text-center text-red-500">✖</td> | |
| </tr> | |
| <tr class="border-b hover:bg-emerald-50"> | |
| <td class="p-4">Halal-aware matching</td> | |
| <td class="text-center text-emerald-600 font-bold">✔</td> | |
| <td class="text-center text-red-500">✖</td> | |
| </tr> | |
| <tr class="border-b hover:bg-emerald-50"> | |
| <td class="p-4">Real-time tracking</td> | |
| <td class="text-center text-emerald-600 font-bold">✔</td> | |
| <td class="text-center text-red-500">✖</td> | |
| </tr> | |
| <tr class="border-b hover:bg-emerald-50"> | |
| <td class="p-4">Gamification & streaks</td> | |
| <td class="text-center text-emerald-600 font-bold">✔</td> | |
| <td class="text-center text-red-500">✖</td> | |
| </tr> | |
| <tr class="border-b hover:bg-emerald-50"> | |
| <td class="p-4">UAE-specific recipient network</td> | |
| <td class="text-center text-emerald-600 font-bold">✔</td> | |
| <td class="text-center text-red-500">✖</td> | |
| </tr> | |
| <tr class="hover:bg-emerald-50"> | |
| <td class="p-4">Basic food listing</td> | |
| <td class="text-center text-emerald-600 font-bold">✔</td> | |
| <td class="text-center text-emerald-600 font-bold">✔</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </section> | |
| <div id="footer"></div> | |
| <script> | |
| fetch("footer.html") | |
| .then(res => res.text()) | |
| .then(data => { | |
| document.getElementById("footer").innerHTML = data; | |
| }); | |
| </script> | |
| </body> | |
| </html> |