Spaces:
Running
Running
File size: 4,801 Bytes
fc67fa6 bf1ff8d fc67fa6 bf1ff8d fc67fa6 bf1ff8d fc67fa6 de8807b 5b05b60 cda580e bf1ff8d 386863d bf1ff8d db00d34 bf1ff8d 329ab6d db00d34 bf1ff8d fc67fa6 bf1ff8d 386863d 6cfa825 fc67fa6 617f0c4 6cfa825 18554f6 617f0c4 fc67fa6 6cfa825 329ab6d 6cfa825 fc67fa6 386863d 6cfa825 cda580e 617f0c4 264aa0f fc67fa6 386863d 264aa0f 386863d 6cfa825 fc67fa6 386863d 6cfa825 386863d 6cfa825 386863d 264aa0f 386863d 264aa0f 386863d 264aa0f 386863d fc67fa6 5ee4bc2 6cfa825 386863d 6cfa825 fc67fa6 6cfa825 05df31f 329ab6d fc67fa6 329ab6d fc67fa6 329ab6d 18554f6 6cfa825 bf1ff8d 6cfa825 329ab6d 9506f11 6cfa825 329ab6d 9506f11 bf1ff8d fc67fa6 | 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 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | <!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="auth.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;
}
/* card hover effect (your original style) */
.card {
transition: all 0.3s ease;
border: 1px solid transparent;
}
.card:hover {
transform: translateY(-8px);
border: 1px solid #10b981;
box-shadow: 0 20px 30px rgba(0,0,0,0.08);
}
</style>
</head>
<body>
<!-- NAVBAR (UNCHANGED) -->
<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>
<!-- OPEN MODAL -->
<button onclick="openModal()" class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold">
Join as a Restaurant
</button>
</nav>
<!-- HERO (UNCHANGED STRUCTURE) -->
<section id="home" class="text-center py-24 px-6">
<h1 class="text-5xl font-extrabold">
Turn tonight's surplus into <span class="text-emerald-600">tomorrow's meal</span>
</h1>
<p class="mt-6 text-gray-600 max-w-2xl mx-auto">
The UAE wastes 3.27 million tons of food every year.
NourishNet uses AI to route restaurant leftovers to
elderly homes, refugee centers, and families in need — automatically.
</p>
</section>
<!-- STATS (UNCHANGED IDEA) -->
<section class="grid md:grid-cols-4 text-center bg-white py-12">
<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 (UNCHANGED) -->
<section id="how" class="py-20 text-center px-6">
<h2 class="text-3xl font-bold mb-10">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">
<h3 class="font-bold">Log surplus</h3>
<p class="text-gray-600">Enter food type, quantity, and expiry. Takes 30 seconds.</p>
</div>
<div class="card bg-white p-6 rounded-xl">
<h3 class="font-bold">AI matching</h3>
<p class="text-gray-600">Our algorithm finds the ideal recipient based on halal status, quantity, and distance.</p>
</div>
<div class="card bg-white p-6 rounded-xl">
<h3 class="font-bold">Delivery</h3>
<p class="text-gray-600">A verified volunteer picks up and delivers within the hour.</p>
</div>
</div>
</section>
<!-- CTA (UNCHANGED IDEA) -->
<section class="text-center py-20 bg-emerald-50">
<h2 class="text-3xl font-bold">Ready to make a difference?</h2>
<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 (FIXED ONLY PART) -->
<div id="modal" class="hidden fixed inset-0 bg-black/50 flex 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 text-xl mb-4">Join as a Restaurant</h2>
<input id="name" class="w-full border p-2 mb-3 rounded" placeholder="Restaurant name">
<input id="location" class="w-full border p-2 mb-3 rounded" placeholder="Location">
<input id="contact" class="w-full border p-2 mb-3 rounded" placeholder="Contact">
<button onclick="handleSubmit()" class="w-full bg-emerald-600 text-white py-2 rounded">
Submit
</button>
</div>
</div>
<script>
function openModal(){
document.getElementById("modal").classList.remove("hidden");
}
function closeModal(){
document.getElementById("modal").classList.add("hidden");
}
function handleSubmit(){
const name = document.getElementById("name").value;
const location = document.getElementById("location").value;
const contact = document.getElementById("contact").value;
if(!name || !location || !contact){
alert("Please fill all fields");
return;
}
window.location.href = "dashboard.html";
}
</script>
</body>
</html> |