Spaces:
Running
Running
File size: 4,645 Bytes
77790c5 6a24c4f 77790c5 6a24c4f 77790c5 2d3a8a0 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f 77790c5 6a24c4f ec12363 6a24c4f 77790c5 | 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 | <!DOCTYPE html>
<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> |