feat(recruitment): how to apply

src/components/blocks/HowToApply.astro

@@ -0,0 +1,99 @@
+---
+const steps = [
+  {
+    number: "01",
+    title: "Read the website",
+    description:
+      "Get familiar with our team, projects, and what we are looking for before you apply.",
+    accent: "from-zinc-200 to-zinc-300",
+    badgeClass: "bg-zinc-900 text-white",
+  },
+  {
+    number: "02",
+    title: "Attend the info session",
+    description:
+      "Come meet the team, learn about the recruitment process, and ask any questions you have.",
+    accent: "from-lime-300 to-emerald-300",
+    badgeClass: "bg-lime-400 text-black",
+    featured: true,
+  },
+  {
+    number: "03",
+    title: "Apply on our website",
+    description:
+      "Submit your application through our website once you feel ready.",
+    accent: "from-emerald-300 to-cyan-300",
+    badgeClass: "bg-emerald-400 text-black",
+  },
+];
+---
+
+<section class="bg-[#f5f5f3] px-6 py-20 md:px-10 lg:px-16 lg:py-28">
+  <div class="mx-auto max-w-7xl">
+    <div class="mx-auto max-w-3xl text-center">
+      <p
+        class="text-sm font-medium tracking-[0.18em] text-neutral-500 uppercase"
+      >
+        Recruitment
+      </p>
+      <h2
+        class="mt-3 text-4xl font-semibold tracking-[-0.04em] text-neutral-950 md:text-6xl"
+      >
+        How to apply
+      </h2>
+      <p class="mt-4 text-base leading-7 text-neutral-600 md:text-lg">
+        A simple three-step process to get involved with Agrobot.
+      </p>
+    </div>
+
+    <div class="mt-16 grid grid-cols-1 gap-6 md:grid-cols-3 md:gap-8 lg:mt-20">
+      {
+        steps.map((step, index) => (
+          <div class="relative">
+            {index < steps.length - 1 && (
+              <div
+                class="absolute top-10 right-[-2rem] left-[calc(50%+3.5rem)] hidden h-px bg-neutral-300 md:block"
+                aria-hidden="true"
+              />
+            )}
+
+            <article
+              class={`group relative h-full overflow-hidden rounded-[2rem] border border-black/5 bg-white p-7 shadow-[0_1px_0_rgba(0,0,0,0.02),0_12px_40px_rgba(0,0,0,0.06)] transition duration-300 hover:-translate-y-1 hover:shadow-[0_1px_0_rgba(0,0,0,0.02),0_20px_60px_rgba(0,0,0,0.1)] ${
+                step.featured ? "ring-1 ring-lime-300/70" : ""
+              }`}
+            >
+              <div
+                class={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r ${step.accent}`}
+                aria-hidden="true"
+              />
+
+              <div class="flex items-start justify-between gap-4">
+                <div
+                  class={`inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold tracking-[0.08em] ${step.badgeClass}`}
+                >
+                  {step.number}
+                </div>
+
+                <div
+                  class="pointer-events-none text-6xl font-semibold tracking-[-0.08em] text-neutral-100 transition duration-300 group-hover:text-neutral-200"
+                  aria-hidden="true"
+                >
+                  {step.number}
+                </div>
+              </div>
+
+              <div class="mt-10">
+                <h3 class="text-2xl font-semibold tracking-[-0.04em] text-neutral-950">
+                  {step.title}
+                </h3>
+                <p class="mt-4 max-w-[28ch] text-sm leading-7 text-neutral-600 md:text-base">
+                  {step.description}
+                </p>
+              </div>
+            </article>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</section>

src/pages/recruitment.astro

@@ -3,6 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import RecruitmentHero from "../components/content/RecruitmentHero.astro";
 import WhyBeAPartOfAgrobot from "../components/blocks/WhyBeAPartOfAgrobot.astro";
 import LearnAboutOurSubteams from "../components/blocks/LearnAboutOurSubteams.astro";
+import HowToApply from "../components/blocks/HowToApply.astro";
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
@@ -13,5 +14,6 @@ import LearnAboutOurSubteams from "../components/blocks/LearnAboutOurSubteams.as
     <RecruitmentHero />
     <WhyBeAPartOfAgrobot />
     <LearnAboutOurSubteams />
+    <HowToApply />
   </main>
 </Layout>