Update index.html

index.html

@@ -20,18 +20,19 @@ body {
   transform: translateY(30px);
   transition: all 0.8s ease;
 }
-
 .fade-up.show {
   opacity: 1;
   transform: translateY(0);
 }
 
-/* Card hover */
+/* Card hover effect */
 .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>
@@ -41,47 +42,41 @@ body {
 
 <!-- NAVBAR -->
 <nav class="flex justify-between items-center px-10 py-5 bg-emerald-600 text-white sticky top-0 z-50 shadow-sm">
-
   <div class="text-2xl font-extrabold">NourishNet</div>
 
   <div class="hidden md:flex gap-8 font-medium">
     <a href="#home">Home</a>
     <a href="#how">How it works</a>
+    <a href="#impact">Impact</a>
     <a href="#features">Features</a>
   </div>
 
   <button onclick="openModal()" 
     class="bg-white text-emerald-600 px-5 py-2 rounded-full font-semibold hover:scale-105 transition">
-    Donate food
+    Join as a Restaurant
   </button>
-
 </nav>
 
 <!-- HERO -->
 <section id="home" class="text-center py-24 px-6 fade-up">
-
   <h1 class="text-5xl md:text-6xl font-extrabold text-gray-900">
-    Turn tonight's surplus into <span class="text-emerald-600">tomorrow's meal</span>
+    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 text-lg">
-    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.
+    AI-powered redistribution connecting restaurants with communities in need across the UAE.
   </p>
 
   <div class="mt-8 flex justify-center gap-4">
-
     <button onclick="openModal()" 
       class="bg-emerald-600 text-white px-6 py-3 rounded-full hover:scale-105 transition">
-      Start Donating
+      Join now
     </button>
 
-    <a href="#how" 
-      class="border px-6 py-3 rounded-full hover:bg-gray-100 transition">
+    <a href="#how" class="border px-6 py-3 rounded-full hover:bg-gray-100 transition">
       See how it works
     </a>
-
   </div>
-
 </section>
 
 <!-- STATS -->
@@ -112,17 +107,52 @@ body {
 
     <div class="card bg-white p-6 rounded-xl fade-up">
       <h3 class="font-bold text-lg">Log surplus</h3>
-      <p class="text-gray-600 mt-2">Enter food type, quantity, and expiry. Takes 30 seconds.</p>
+      <p class="text-gray-600 mt-2">Restaurants enter leftover food.</p>
     </div>
 
     <div class="card bg-white p-6 rounded-xl fade-up">
       <h3 class="font-bold text-lg">AI matching</h3>
-      <p class="text-gray-600 mt-2">Our algorithm finds the ideal recipient based on halal status, quantity, and distance.</p>
+      <p class="text-gray-600 mt-2">Smart routing to communities.</p>
     </div>
 
     <div class="card bg-white p-6 rounded-xl fade-up">
       <h3 class="font-bold text-lg">Delivery</h3>
-      <p class="text-gray-600 mt-2">A verified volunteer picks up and delivers within the hour.</p>
+      <p class="text-gray-600 mt-2">Volunteers distribute food.</p>
+    </div>
+
+  </div>
+</section>
+
+<!-- EARN WHILE YOU GIVE (EXACT CONTENT) -->
+<section id="impact" class="py-20 px-6 text-center bg-white">
+
+  <h2 class="text-3xl font-bold mb-4 fade-up">Earn while you give</h2>
+
+  <p class="text-gray-600 max-w-2xl mx-auto mb-12 fade-up">
+    Track your impact, compete with other restaurants, and earn badges for consistency.
+  </p>
+
+  <div class="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
+
+    <div class="card p-6 rounded-xl fade-up">
+      <h3 class="font-bold text-lg">Leaderboard</h3>
+      <p class="text-gray-600 mt-2">
+        See how you rank against restaurants in your city.
+      </p>
+    </div>
+
+    <div class="card p-6 rounded-xl fade-up">
+      <h3 class="font-bold text-lg">Badge system</h3>
+      <p class="text-gray-600 mt-2">
+        Bronze → Silver → Gold → Platinum → Champion.
+      </p>
+    </div>
+
+    <div class="card p-6 rounded-xl fade-up">
+      <h3 class="font-bold text-lg">Streak tracker</h3>
+      <p class="text-gray-600 mt-2">
+        Donate daily for bonus points and exclusive badges.
+      </p>
     </div>
 
   </div>
@@ -160,16 +190,15 @@ body {
 
 <!-- MODAL -->
 <div id="modal" class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50">
-
   <div class="bg-white w-full max-w-lg rounded-2xl p-8 relative">
 
     <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 text-xl">✕</button>
 
-    <h2 class="text-xl font-bold mb-4">Donate Now</h2>
+    <h2 class="text-xl font-bold mb-4">Join as a Restaurant</h2>
 
-    <input class="w-full border p-3 mb-3 rounded" placeholder="Food item">
-    <input class="w-full border p-3 mb-3 rounded" placeholder="Quantity">
+    <input class="w-full border p-3 mb-3 rounded" placeholder="Restaurant name">
     <input class="w-full border p-3 mb-3 rounded" placeholder="Location">
+    <input class="w-full border p-3 mb-3 rounded" placeholder="Contact">
 
     <button class="w-full bg-emerald-600 text-white py-3 rounded">
       Submit
@@ -190,7 +219,6 @@ function closeModal() {
   modal.classList.remove("flex");
 }
 
-/* Fade-up animation */
 const observer = new IntersectionObserver(entries => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {