Spaces:
Running
Running
File size: 4,591 Bytes
3b14e84 a2a7843 3b14e84 b560acd 3b14e84 b560acd b98fcf6 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 3b14e84 b560acd 44b5410 7917a84 f858e11 44b5410 b560acd 3b14e84 a691c99 3b14e84 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | <!DOCTYPE html>
<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> |