Update index.html

index.html

@@ -4,8 +4,13 @@
 <meta charset="UTF-8">
 <title>NourishNet</title>
 
+<!-- Tailwind -->
 <script src="https://cdn.tailwindcss.com"></script>
 
+<!-- Icons -->
+<script src="https://unpkg.com/lucide@latest"></script>
+
+<!-- Font -->
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
 
 <style>
@@ -25,7 +30,7 @@ body {
   transform: translateY(0);
 }
 
-/* Card hover effect */
+/* Card hover */
 .card {
   transition: all 0.3s ease;
   border: 1px solid transparent;
@@ -59,6 +64,7 @@ body {
 
 <!-- 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 food surplus into <span class="text-emerald-600">real impact</span>
   </h1>
@@ -105,17 +111,20 @@ body {
 
   <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">
+    <div class="card bg-white p-6 rounded-xl fade-up text-left">
+      <i data-lucide="clipboard-list" class="text-emerald-600 mb-4"></i>
       <h3 class="font-bold text-lg">Log surplus</h3>
       <p class="text-gray-600 mt-2">Restaurants enter leftover food.</p>
     </div>
 
-    <div class="card bg-white p-6 rounded-xl fade-up">
+    <div class="card bg-white p-6 rounded-xl fade-up text-left">
+      <i data-lucide="cpu" class="text-emerald-600 mb-4"></i>
       <h3 class="font-bold text-lg">AI matching</h3>
       <p class="text-gray-600 mt-2">Smart routing to communities.</p>
     </div>
 
-    <div class="card bg-white p-6 rounded-xl fade-up">
+    <div class="card bg-white p-6 rounded-xl fade-up text-left">
+      <i data-lucide="truck" class="text-emerald-600 mb-4"></i>
       <h3 class="font-bold text-lg">Delivery</h3>
       <p class="text-gray-600 mt-2">Volunteers distribute food.</p>
     </div>
@@ -123,7 +132,7 @@ body {
   </div>
 </section>
 
-<!-- EARN WHILE YOU GIVE (EXACT CONTENT) -->
+<!-- IMPACT SECTION -->
 <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>
@@ -134,25 +143,22 @@ body {
 
   <div class="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
 
-    <div class="card p-6 rounded-xl fade-up">
+    <div class="card bg-emerald-50 p-6 rounded-xl fade-up text-left">
+      <i data-lucide="trophy" class="text-emerald-600 mb-4"></i>
       <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>
+      <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">
+    <div class="card bg-emerald-50 p-6 rounded-xl fade-up text-left">
+      <i data-lucide="award" class="text-emerald-600 mb-4"></i>
       <h3 class="font-bold text-lg">Badge system</h3>
-      <p class="text-gray-600 mt-2">
-        Bronze → Silver → Gold → Platinum → Champion.
-      </p>
+      <p class="text-gray-600 mt-2">Bronze → Silver → Gold → Platinum → Champion.</p>
     </div>
 
-    <div class="card p-6 rounded-xl fade-up">
+    <div class="card bg-emerald-50 p-6 rounded-xl fade-up text-left">
+      <i data-lucide="flame" class="text-emerald-600 mb-4"></i>
       <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>
+      <p class="text-gray-600 mt-2">Donate daily for bonus points and exclusive badges.</p>
     </div>
 
   </div>
@@ -182,6 +188,24 @@ body {
   </div>
 </section>
 
+<!-- FINAL CTA -->
+<section class="py-20 px-6 text-center bg-emerald-50 fade-up">
+
+  <i data-lucide="leaf" class="mx-auto text-emerald-600 mb-4"></i>
+
+  <h2 class="text-3xl font-bold mb-4">Ready to make a difference?</h2>
+
+  <p class="text-gray-600 max-w-xl mx-auto mb-6">
+    Join 312+ restaurants already saving meals across the UAE.
+  </p>
+
+  <button onclick="openModal()" 
+    class="bg-emerald-600 text-white px-6 py-3 rounded-full hover:scale-105 transition">
+    Join NourishNet today
+  </button>
+
+</section>
+
 <!-- FOOTER -->
 <footer class="bg-emerald-600 text-white text-center py-8 mt-20">
   <p class="font-semibold">NourishNet</p>
@@ -190,6 +214,7 @@ 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>
@@ -219,6 +244,7 @@ function closeModal() {
   modal.classList.remove("flex");
 }
 
+/* Fade-up animation */
 const observer = new IntersectionObserver(entries => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
@@ -228,6 +254,9 @@ const observer = new IntersectionObserver(entries => {
 });
 
 document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
+
+/* Icons init */
+lucide.createIcons();
 </script>
 
 </body>