Merge pull request #156 from Bitshala/apprenticeshipPage

feat #148 : Apprenticeship page

src/components/apprenticeship/About.astro

@@ -0,0 +1,36 @@
+<div class="lg:p-8">
+  <h1
+    class="my-8 font-header text-3xl md:text-6xl lg:text-6xl"
+    id="about_us"
+  >
+    About the Fellowship
+  </h1>
+
+  <p class="font-base text-base md:text-lg lg:text-2xl">
+    <span class="font-bold text-orange">What is it?</span>
+     The Bitshala Fellowship Program is a unique opportunity
+    for you to take your first step and dive into working in
+    the Bitcoin FOSS ecosystem. Whether it’s developing
+    innovative open-source software or leading an
+    educational initiative, here's where your contributions
+    to Bitcoin begin, and an enlightening career.
+  </p>
+  <p class="my-5 text-base md:text-lg lg:text-2xl">
+    <span class="font-bold text-orange">Who is it for?</span
+    > This program is for people who are eager to kickstart
+    their Bitcoin Development Career or delve into
+    Educational Initiatives within the Bitcoin Community. If
+    you’re passionate about Bitcoin development and
+    education, you indeed belong here.
+  </p>
+  <p class="text-base md:text-lg lg:text-2xl">
+    <span class="font-bold text-orange">How to join?</span>
+     Interested? Start contributing to the below-listed
+    projects, or sketch your own tech/non-tech education
+    program. Then shoot us a formal application via the
+    below form with your details and describe why you want
+    to be part of the Bitcoin movement. We'll review your
+    application and get in touch to discuss how you can
+    contribute to our projects or lead new initiatives.
+  </p>
+</div>

src/components/apprenticeship/Apply.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const Apply = () => {
+  return (
+    <div>
+      {/* <div className="text-center font-header text-3xl text-black lg:text-7xl">
+        <span className="text-orange">Apply</span> to become
+        a Bitshala Fellow!
+      </div> */}
+      <div className="my-10 text-center">
+        <h1 className="font-header text-3xl font-bold text-orange lg:text-5xl">
+          Application is not open right now
+        </h1>
+        <p className="my-2 lg:text-xl">
+          Please keep an eye on the website for more updates
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Apply;

src/components/apprenticeship/CatalystInitiative.astro

@@ -0,0 +1,99 @@
+---
+const list = [
+  {
+    logo: "/apprenticeship/optech.png",
+    name: "Latest in Bitcoin Tech",
+    leadBy: "Faisal",
+    discord:
+      "https://discord.com/events/1104831812720656540/1242345418353016843",
+    desc: "A weekly Optech deep-dive session. Where we explore all the cutting edges of Bitcoin technology with fellow learners.",
+  },
+  {
+    logo: "/apprenticeship/lightning.png",
+    name: "Hands-On Lightning",
+    leadBy: "Aditya",
+    discord:
+      "https://discord.com/events/1104831812720656540/1242484649972732024",
+    desc: "A weekly tutorial-based Lightning dev training program. Ideal to kick start your lightning dev journey.",
+  },
+  {
+    logo: "/apprenticeship/readingClub.webp",
+    name: "Bitcoin Reading Club",
+    leadBy: "Shreyan",
+    discord:
+      "https://discord.com/events/1104831812720656540/1247922484230230138",
+    desc: "A bi-weekly review club to get into the weeds of Bitcoin Core. Ideal for aspiring Bitcoin Core Devs.",
+  },
+  {
+    logo: "/apprenticeship/reviewClub.webp",
+    name: "Bitcoin Core Review Club",
+    leadBy: "Stratospher",
+    discord:
+      "https://discord.com/events/1104831812720656540/1244707908382363835",
+    desc: "A bi-weekly review club to get into the weeds of Bitcoin Core. Ideal for aspiring Bitcoin Core Devs.",
+  },
+];
+---
+
+<div class="lg:p-8">
+  <h1
+    class="my-8 font-header text-3xl md:text-6xl lg:text-6xl"
+    id="about_us"
+  >
+    Explore Our Education Programs
+  </h1>
+  <p class="text-base md:text-lg lg:text-2xl">
+    Got a fresh idea for a technical educational project?
+    We’d love to hear it! Below, we showcase initiatives our
+    Catalysts are already pursuing—use these as inspiration
+    to forge your own path. Share your vision, and let’s
+    collaborate to make a real impact.
+  </p>
+
+  <div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-4">
+    {
+      list.map((item) => (
+        <div class="border-neutral-200 my-5 flex flex-col justify-center rounded-3xl bg-[#eaeaea] p-5">
+          <img
+            loading="lazy"
+            srcset={item.logo}
+            class="rounded-2xl"
+          />
+          <div class=" flex w-full flex-col font-medium lg:p-5">
+            <div class="font-header text-3xl font-bold">
+              {item.name}
+            </div>
+
+            <div class="mt-3 text-xl">
+              {" "}
+              Hosted By :{" "}
+              <span class="font-header">{item.leadBy}</span>
+            </div>
+            <div class=" mt-4 text-lg ">{item.desc}</div>
+          </div>
+          <a
+            href={item.discord}
+            target="_blank"
+            class="text-m my-5 rounded-lg p-4 text-center outline-dashed hover:bg-orange hover:text-white lg:w-1/2"
+          >
+            Tell me more
+          </a>
+        </div>
+      ))
+    }
+  </div>
+  <div
+    class="flex w-full justify-between gap-5 rounded-xl bg-[#f0f0f0] py-4 pl-5 pr-4"
+  >
+    <div class="my-auto text-xl lg:text-3xl">
+      Got a new idea for an initiative?
+    </div>
+    <a href="#apply">
+      <div
+        class="rounded-xl bg-peach p-2 text-center lg:p-5 lg:text-xl"
+      >
+        Apply Now
+      </div>
+    </a>
+  </div>
+</div>

src/components/apprenticeship/DevProjects.astro

@@ -0,0 +1,122 @@
+---
+const list = [
+  {
+    logo: "./apprenticeship/bitlogo.png",
+    github:
+      "https://github.com/Bitshala-Incubator/silent-pay",
+    twitter: "https://discord.gg/yHkd8bKRDU",
+    name: "Silent-Payment Library",
+    desc: "A Typescript wallet library implementing all the silent-payment primitives.",
+    skills: ["Typescript"],
+  },
+  {
+    logo: "./apprenticeship/bitlogo.png",
+    github:
+      "https://github.com/Bitshala-Incubator/silent-pay-indexer",
+    twitter: "https://discord.gg/yHkd8bKRDU",
+    name: "Silent Payment Indexer",
+    desc: "A Typescript project to build various mechanisms of fetching the SP indexes.",
+    skills: ["Typescript"],
+  },
+  {
+    logo: "./apprenticeship/bitlogo.png",
+    github:
+      "https://github.com/Bitshala-Incubator/rust-coinselect",
+    twitter: "https://discord.gg/6AMHcGdDga",
+    name: "Coinseletion",
+    desc: "A rust library bringing the Bitcoin Core’s coinselection algorithms to the wallet development world.A crucial missing piece of Bitcoin wallet infrastructure.",
+    skills: ["Rust"],
+  },
+  {
+    logo: "./apprenticeship/bitlogo.png",
+    github:
+      "https://github.com/Bitshala/BitcoinCore-PR-Review-Club",
+    twitter: "https://discord.gg/bDzA7Ae32m",
+    name: "Bitcoin Core Review",
+    desc: "An ongoing Review Club to get all the aspiring core devs get startedin the dense jungle of Bitcoin Core.",
+    skills: ["C++", "Python"],
+  },
+  {
+    logo: "./apprenticeship/yinyang.png",
+    github:
+      "https://github.com/utxo-teleport/teleport-transactions",
+    twitter: "https://discord.gg/ZfVxdYRPkt",
+    name: "Coinswap",
+    desc: "Functioning, minimal-viable binaries and libraries to perform a trustless, p2p Maxwell-Belcher Coinswap Protocol",
+    skills: ["Rust"],
+  },
+];
+---
+
+<div class="lg:p-8">
+  <h1
+    class="my-8 font-header text-3xl md:text-6xl lg:text-6xl"
+    id="about_us"
+  >
+    Explore Dev Projects
+  </h1>
+  <p class="text-base md:text-lg lg:text-2xl">
+    Here are open-source projects ready for your innovation
+    and expertise. Each project offers a unique opportunity
+    to contribute to the Bitcoin community's growth and
+    development.
+  </p>
+
+  <div class="my-10 grid grid-cols-1 gap-3">
+    {
+      list.map((item) => (
+        <div class="border-neutral-200 flex flex-col justify-center rounded-3xl bg-[#f0f0f0]">
+          <div class="flex w-full flex-col">
+            <div class=" flex w-full items-center justify-between self-center">
+              <div class="flex items-center self-center">
+                <img
+                  loading="lazy"
+                  srcset={item.logo}
+                  class="m-8 h-16  rounded-full  "
+                />
+                <div class="font-header text-xl font-bold lg:text-3xl">
+                  {item.name}
+                </div>
+              </div>
+              <div class="m-3 flex ">
+                <a
+                  href={item.github}
+                  target="_blank"
+                  class="group"
+                >
+                  <img
+                    src="/apprenticeship/github.png"
+                    class="m-1 h-6 rounded bg-peach group-hover:bg-white lg:h-10"
+                  />
+                </a>
+                <a
+                  href={item.twitter}
+                  target="_blank"
+                  class="group"
+                >
+                  <img
+                    src="/apprenticeship/discord.png"
+                    class="m-1 h-6 rounded bg-peach group-hover:bg-white lg:h-10"
+                  />
+                </a>
+              </div>
+            </div>
+            <div class="mx-5 -mt-12 flex w-full flex-col p-5 font-medium">
+              <div class=" mt-4 text-sm font-thin lg:text-xl ">
+                {item.desc}
+              </div>
+              <div class="lg:text-md mt-3 flex flex-wrap gap-1 text-sm lg:gap-3">
+                <p class=" mt-1 font-semibold">Language:</p>
+                {item.skills.map((skill) => (
+                  <p class="lg:text-md rounded-lg bg-[#ffdec7] px-2 py-1 font-semibold">
+                    {skill}
+                  </p>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</div>