Merge pull request #55 from Bitshala/checkerboard

fixes #13 : [Cohorts] Checkerboard

src/components/cohort/Checkerboard.astro

@@ -0,0 +1,77 @@
+<div class="flex flex-col">
+  <div class="my-5 flex flex-col xl:my-0 xl:flex-row">
+    <div
+      class="flex flex-col items-center justify-center bg-peach p-5 xl:w-1/2 xl:p-10 xl:px-40"
+    >
+      <span class="text-orange"></span>
+      <h1 class="font-header text-3xl xl:text-6xl">
+        A close-knit community to <span class="text-orange"
+          >grow together</span
+        > with
+      </h1>
+      <p class="my-10 xl:text-2xl">
+        A community of like-minded individuals – a tribe of
+        learners who, like you, are hungry for knowledge and
+        connection.
+      </p>
+    </div>
+    <div
+      class="bg-orange px-5 pt-5 xl:w-1/2 xl:px-32 xl:pt-32"
+    >
+      <img
+        src="/website-v2/public/cohort/checkerboard1.png"
+        class="w-auto"
+      />
+    </div>
+  </div>
+  <div class="flex flex-col xl:flex-row">
+    <div
+      class="bg-orange px-5 pt-5 xl:w-1/2 xl:px-32 xl:pt-32"
+    >
+      <img
+        src="/website-v2/public/cohort/checkerboard2.png"
+        class="w-auto"
+      />
+    </div>
+    <div
+      class="flex flex-col items-center justify-center bg-peach p-5 xl:w-1/2 xl:p-10 xl:px-40"
+    >
+      <h1 class="font-header text-3xl xl:text-6xl">
+        A roadmap that leads<span class="text-orange"
+          >beyond the beginner phase</span
+        >
+      </h1>
+      <p class="my-10 xl:text-2xl">
+        A structured path, a guided journey to progress from
+        surface-level understanding to a deeper
+        comprehension of Bitcoin's technical intricacies and
+        broader implications.
+      </p>
+    </div>
+  </div>
+  <div class="flex flex-col xl:flex-row">
+    <div
+      class="my-5 flex flex-col items-center justify-center bg-peach p-5 xl:my-0 xl:w-1/2 xl:p-10 xl:px-40"
+    >
+      <h1 class="font-header text-3xl xl:text-6xl">
+        An <span class="text-orange">
+          opportunity to break into</span
+        > the world of Bitcoin Development
+      </h1>
+      <p class="my-10 xl:text-2xl">
+        An opportunity to gain hands-on experience with a
+        network of experienced Bitcoin developers giving you
+        the support you need to take your first steps into
+        the development world of Bitcoin.
+      </p>
+    </div>
+    <div
+      class="bg-orange px-5 pt-5 xl:w-1/2 xl:px-32 xl:pt-32"
+    >
+      <img
+        src="/website-v2/public/cohort/checkerboard3.png"
+        class="w-auto"
+      />
+    </div>
+  </div>
+</div>

src/pages/cohort.astro

@@ -5,6 +5,7 @@ import Footer from "../components/common/Footer.astro";
 import Carousel from "../components/common/Carousel";
 import Header from "../components/common/Header.astro";
 import { CollapseList } from "../components/cohort/CollapseList";
+import Checkerboard from "../components/cohort/Checkerboard.astro";
 
 const faqConfig = [
   {
@@ -44,6 +45,7 @@ const faqConfig = [
   />
 
   <CohortCard />
+  <Checkerboard />
   <CollapseList
     listConfig={faqConfig}
     header="Checkout some of the FAQs"