Style about page

src/pages/about.astro

@@ -3,15 +3,49 @@ import BackOnTrackLayout from "../layouts/BackOnTrackLayout.astro";
 ---
 
 <BackOnTrackLayout title="About">
-  <div class="m-5">
-    <p class="text-center text-xl text-black">
-      Since our founding in <i>2020</i>, we have been dedicated to serving those
-      affected by homelessness and food insecurity.<br />
-      Collectively we have volunteered over <b>10,000</b> hours and served over <b
-        >50,000</b
-      > meals across the country.<br />
-      Currently we have 12 chapters located in 9 states across the country.
+  <div
+    class="flex w-full flex-wrap items-center justify-center gap-3 bg-bot-orange py-5"
+  >
+    <p class="text-center text-xl font-bold text-white">
+      Fighting homelessness and food insecurity since 2020.
     </p>
   </div>
-  <div class="h-full"></div>
+  <div class="grid h-full grid-cols-2">
+    <div
+      class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/habitat.jpg')] bg-cover bg-no-repeat bg-blend-overlay"
+    >
+      <p class="text-center text-6xl font-extrabold italic text-white">
+        10,000+
+      </p>
+      <p class="text-center text-4xl font-extrabold text-white underline">
+        hours volunteered
+      </p>
+    </div>
+    <div
+      class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/hope.jpg')] bg-cover bg-no-repeat bg-blend-overlay"
+    >
+      <p class="text-center text-6xl font-extrabold italic text-white">
+        50,000+
+      </p>
+      <p class="text-center text-4xl font-extrabold text-white underline">
+        meals served
+      </p>
+    </div>
+    <div
+      class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/icna.jpg')] bg-cover bg-center bg-no-repeat bg-blend-overlay"
+    >
+      <p class="text-center text-6xl font-extrabold italic text-white">12</p>
+      <p class="text-center text-4xl font-extrabold text-white underline">
+        chapters
+      </p>
+    </div>
+    <div
+      class="flex h-full w-full flex-col items-center justify-center bg-black/[.6] bg-[url('/nameless.jpg')] bg-cover bg-center bg-no-repeat bg-blend-overlay"
+    >
+      <p class="text-center text-6xl font-extrabold italic text-white">9</p>
+      <p class="text-center text-4xl font-extrabold text-white underline">
+        states
+      </p>
+    </div>
+  </div>
 </BackOnTrackLayout>