Modified UI

joelnyongesa · Aug 4, 2023 · e94c65f · e94c65f
1 parent e6139b0
commit e94c65f
Showing 1 changed file with 34 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -61,28 +61,41 @@
   </nav>
 
 
-  <div class="flex justify-center">
-    <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 py-20">Did you know?</h1>
-  </div>
-
-  <div class="bg-white py-24 sm:py-32">
+  <div class="bg-blue-500 py-20 text-white text-center">
+    <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight">Did you know?</h1>
+    <p class="text-lg">Together, we can make a difference and end child hunger.</p>
+</div>
+
+<div class="bg-white py-24 sm:py-32">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
-      <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
-        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-          <dt class="text-base leading-7 text-gray-600">Child dies of hunger every ten seconds worldwide</dt>
-          <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1</dd>
-        </div>
-        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-          <dt class="text-base leading-7 text-gray-600">Children die of hunger every year in the <em>Sub Saharan Africa</em> region alone</dt>
-          <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">3.2 Million</dd>
-        </div>
-        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-          <dt class="text-base leading-7 text-gray-600">According to UN SDG 2, we aim to eradicate this by achieving Zero Hunger by the year 2030</dt>
-          <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">2030</dd>
+        <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-12">Key Facts About Child Hunger</h2>
+        <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
+            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+                <dt class="text-base leading-7 text-gray-600">Child dies of hunger every ten seconds worldwide</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1</dd>
+            </div>
+            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+                <dt class="text-base leading-7 text-gray-600">Children die of hunger every year in the <em>Sub Saharan Africa</em> region alone</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">3.2 Million</dd>
+            </div>
+            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+                <dt class="text-base leading-7 text-gray-600">According to UN SDG 2, we aim to eradicate this by achieving Zero Hunger by the year 2030</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">2030</dd>
+            </div>
+        </dl>
+        <p class="mt-12 text-lg text-gray-600 text-center">Join us in our mission to create a world where no child goes to bed hungry. Together, we can turn these statistics into stories of hope and change.</p>
+        <div class="mt-8 flex justify-center">
+            <a href="#form" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600">Get Involved</a>
         </div>
-      </dl>
     </div>
+</div>
+
+<div class="bg-blue-500 py-10 text-white text-center">
+  <div class="max-w-7xl mx-auto px-6 lg:px-8">
+      <h2 class="mb-4 text-4xl font-extrabold leading-none tracking-tight">Make Kenyan Children Smile</h2>
+      <p class="text-lg">Support our Kenya initiative to bring hope and nourishment to children in Kenyan counties.</p>
   </div>
+</div>
 
   <!-- Cards -->
   <div class="parent-container cards items-center flex-column-gap-y-4">
@@ -134,9 +147,9 @@ <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-90
   <!-- <div class="flex flex-col items-center justify-center h-screen" id="donors-list">
     <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900">List of donors</h1>
   </div> -->
-
-</body>
-
+  <footer class="bg-gray-200 py-4 text-center text-gray-600">
+    <p>&copy; 2023. All rights reserved.</p>
+</footer>  
 
   <script src="./index.js"></script>
 </body>