Merge pull request #49 from Bitshala/cohortDetails

fixes #34 : [LBTCL] Cohort Details

src/components/CohortDetails.astro

@@ -0,0 +1,91 @@
+---
+import MeetYourTAs from "./MeetYourTAs.astro";
+
+const list = [
+  {
+    name: "Format",
+    desc: "Online virtual classroom",
+  },
+  {
+    name: "Structure",
+    desc: "Live sessions, once a week QnA",
+  },
+  {
+    name: "Categories",
+    desc: "Wallets, UTXOs, Transactions",
+  },
+  {
+    name: "Duration",
+    desc: "08 weeks",
+  },
+];
+---
+
+<div class="mb-10 flex flex-col gap-2 lg:flex-row lg:gap-8">
+  <div class="rounded-2xl bg-orange p-3 lg:w-3/5 lg:p-10">
+    <p>The Deets</p>
+    <h1
+      class="mb-10 mt-3 font-header text-4xl font-bold lg:text-5xl"
+    >
+      Cohort Details
+    </h1>
+    <h3 class="font-header text-xl font-bold lg:text-2xl">
+      Pre-requisites
+    </h3>
+    <ol class="list-disc p-4 lg:px-8">
+      <li>
+        Basic knowledge of Bitcoin and familiarity with
+        terminal operations
+      </li>
+      <li>Cover the material in Mastering Bitcoin</li>
+      <li>
+        Become comfortable with Unix/Linux command-line
+        terminals
+      </li>
+    </ol>
+    <div
+      class="my-10 grid grid-cols-2 gap-10 lg:grid-cols-4"
+    >
+      {
+        list.map((item) => (
+          <div>
+            <h2 class="font-header text-xl font-bold lg:text-2xl">
+              {item.name}
+            </h2>
+            <p class="lg:text-lg">{item.desc}</p>
+          </div>
+        ))
+      }
+    </div>
+    <h2
+      class="mb-10 font-header text-xl font-bold lg:text-2xl"
+    >
+      Cohort Overview
+    </h2>
+    <p class="mb-6 font-header lg:text-xl">
+      Cohort level: <span class="text-white"
+        >Intermediate</span
+      >
+    </p>
+    <p class="mb-6 font-header lg:text-xl">
+      The cohort program will comprehensively cover <span
+        class="text-white">chapters 01 to 13</span
+      > of "Learning Bitcoin From Command Line," this
+      provides participants with a solid foundation in
+      Bitcoin operations through the command line.
+    </p>
+    <p class="mb-6 font-header lg:text-xl">
+      After the cohort, participants are encouraged to <span
+        class="text-white"
+        >independently explore chapters 14 to 20</span
+      >
+       , which delve into the advanced functionalities of
+      Bitcoin Core. This will allow them to further explore
+      more advanced topics like programmatically interfacing
+      with bitcoin-cli and the lightning network.
+    </p>
+  </div>
+  <div class="flex grow lg:w-2/5">
+    <MeetYourTAs />
+  </div>
+</div>

src/components/MeetYourTAs.astro

@@ -0,0 +1,76 @@
+---
+const team = [
+  {
+    name: "Raj Maitra",
+    desc: "we will have rewrite it in 3rd person tho.. but write a description of yoyrself in whatever form you",
+    image: "raj",
+    twitter: "https://twitter.com/RajarshiMaitra",
+    github: "https://github.com/rajarshimaitra",
+  },
+
+  {
+    name: "Stratospher",
+    desc: "we will have rewrite it in 3rd person tho.. but write a description of yoyrself in whatever form you",
+    image: "stratospher",
+  },
+  {
+    name: "Anmol Sharma",
+    desc: "we will have rewrite it in 3rd person tho.. but write a description of yoyrself in whatever form you",
+    image: "anmol",
+  },
+
+  {
+    name: "Emil Joshi",
+    desc: "we will have rewrite it in 3rd person tho.. but write a description of yoyrself in whatever form you",
+    image: "paperpsyche",
+  },
+];
+---
+
+<div
+  class="flex flex-col rounded-2xl bg-orange p-2 lg:gap-10 lg:p-5"
+>
+  <h1
+    class="my-5 text-center font-header text-4xl lg:text-5xl"
+  >
+    Meet Your TAs
+  </h1>
+
+  {
+    team.map((member) => (
+      <div class="my-3 flex rounded-lg bg-black">
+        <img
+          src={`/website-v2/people/${member.image}.png`}
+          class="h-28 items-center  p-3 "
+        />
+        <div class="flex flex-col">
+          <div class="flex">
+            <p
+              class={`mt-3 w-4/6 font-header text-xl text-orange lg:px-3 lg:text-3xl xl:w-5/6`}
+            >
+              {member.name}
+            </p>
+            <a href={member.github} target="_blank">
+              <img
+                src="/website-v2/people/github.png"
+                class="mr-3 mt-3 h-8 rounded-xl bg-white "
+              />
+            </a>
+            <a>
+              <img
+                src="/website-v2/people/twitter.png"
+                class="mr-3 mt-3 h-8 rounded-xl bg-white "
+              />
+            </a>
+          </div>
+
+          <p
+            class={`lg:p3 mr-16 px-1 text-sm text-white lg:text-base `}
+          >
+            {member.desc}
+          </p>
+        </div>
+      </div>
+    ))
+  }
+</div>

src/pages/index.astro

@@ -41,6 +41,7 @@ import Header from "../components/Header.astro";
           >Dive into the Rabbit Hole</a
         >
         <a
+          href="/website-v2/cohort"
           class="text-m mx-3 flex w-1/2 items-center justify-center rounded-lg p-4 text-center text-white outline-dashed outline-white lg:text-2xl"
           >Check out the Study Cohorts</a
         >

src/pages/lbtcl.astro

@@ -5,6 +5,7 @@ import Carousel from "../components/Carousel";
 import Footer from "../components/Footer.astro";
 import Description from "../components/Description.astro";
 import CohortStructure from "../components/CohortStructure.astro";
+import CohortDetails from "../components/CohortDetails.astro";
 ---
 
 <Layout title="LBTCL">
@@ -17,6 +18,7 @@ import CohortStructure from "../components/CohortStructure.astro";
   />
 
   <Description />
+  <CohortDetails />
   <CohortStructure />
   <Carousel client:visible />
   <Footer />