31 recruitment page learn about our subteams

src/components/blocks/LearnAboutOurSubteams.astro

@@ -0,0 +1,148 @@
+---
+interface Subteam {
+  id: string;
+  name: string;
+  image: string;
+  description: string;
+  responsibilities: string[];
+}
+
+interface TeamGroup {
+  group: string;
+  name: string;
+  subteams: Subteam[];
+}
+
+const {
+  teams = [
+    {
+      group: "agrobot-team",
+      name: "Agrobot Team",
+      subteams: [
+        {
+          id: "eletrical",
+          name: "Electrical",
+          image: "/electrical.png",
+          description:
+            "The Electrical Team plays a crucial role in AgroBot’s success by designing, assembling, and integrating its power systems. They create detailed electrical schematics, select high-quality components, and ensure efficient power management throughout the robot. The team rigorously tests and implements quality control measures to guarantee reliable performance in all conditions. Their work ensures that AgroBot’s electrical systems are robust, dependable, and capable of supporting its autonomous operations effectively.",
+        },
+        {
+          id: "applied-ai",
+          name: "Applied AI",
+          image: "/applied-ai.png",
+          description:
+            "The Applied AI sub-team pioneers the development of machine learning models and AI to tackle a variety of AgroBot’s tasks, from plant identification to advanced machine vision. The team works on detecting maize and weeds, segmenting grape clusters, and integrating their models into the Robot Operating System (ROS) for real-world application. By exploring the intersection of AI research and emerging Agri-Tech, members continually push the boundaries of agricultural innovation. Their work ensures AgroBot can operate efficiently and accurately across diverse farming environments, making a tangible impact in sustainable agriculture.",
+        },
+        {
+          id: "Mechatronics",
+          name: "Mechatronics",
+          image: "/Mechatronics.png",
+          description: "",
+        },
+        {
+          id: "chassis/powerTrain",
+          name: "Chassis/Power Train",
+          image: "/chassis-powertrain.jpg",
+          description: "",
+        },
+        {
+          id: "navigation",
+          name: "Navigation",
+          image: "/navigation.jpg",
+          description: "",
+        },
+        {
+          id: "systemArchitecture",
+          name: "System Architecture",
+          image: "/system-architecture.jpg",
+          description: "",
+        },
+      ],
+    },
+    {
+      group: "agroponics-team",
+      name: "Agroponics Team",
+      subteams: [
+        {
+          id: "automation",
+          name: "Automation",
+          image: "/automation.jpg",
+          description: "",
+        },
+        {
+          id: "plants",
+          name: "Plants",
+          image: "/plants.jpg",
+          description: "",
+        },
+        {
+          id: "structure",
+          name: "Structure",
+          image: "/structure.jpg",
+          description: "",
+        },
+      ],
+    },
+    {
+      group: "administration-team",
+      name: "Administration Team",
+      subteams: [
+        {
+          id: "web-dev",
+          name: "Web Dev",
+          image: "/web-dev.jpg",
+          description: "",
+        },
+        {
+          id: "agriculturalResearch",
+          name: "Agricultural Research",
+          image: "/agricultural-research.jpg",
+          description: "",
+        },
+        {
+          id: "finance",
+          name: "Finance",
+          image: "/finance.jpg",
+          description: "",
+        },
+        {
+          id: "marketing",
+          name: "Marketing",
+          image: "/marketing.jpg",
+          description: "",
+        },
+        {
+          id: "outreach",
+          name: "Outreach",
+          image: "/outreach.jpg",
+          description: "",
+        },
+      ],
+    },
+  ],
+} = Astro.props as { teams: TeamGroup[] };
+import SubteamCard from "./SubteamCard.astro";
+---
+
+<div class="mx-auto bg-white px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8">
+  <h2 class="mb-8 text-3xl tracking-tight">Learn About Our Subteams</h2>
+
+  {
+    teams.map((group) => (
+      <div class="mx-auto mb-12 w-fit rounded-3xl bg-gray-100 p-8">
+        <h2 class="mb-8 text-3xl tracking-tight">{group.name}</h2>
+
+        <div class="flex flex-wrap justify-center gap-8">
+          {group.subteams.map((team) => (
+            <SubteamCard
+              id={team.id}
+              name={team.name}
+              image={team.image}
+              description={team.description}
+            />
+          ))}
+        </div>
+      </div>
+    ))
+  }
+</div>

src/components/blocks/SubteamCard.astro

@@ -0,0 +1,23 @@
+---
+const { id, name, image, description, responsibilities } = Astro.props;
+---
+
+<div class="flex flex-col items-center">
+  <button
+    type="button"
+    class="group flex flex-col items-center focus:outline-none"
+    onclick={`document.getElementById('${id}').showModal()`}
+  >
+    <div
+      class="h-24 w-24 overflow-hidden rounded-2xl bg-gray-300 transition-transform group-hover:scale-105"
+    >
+      <img
+        src={image}
+        alt={name}
+        class="h-full w-full rounded-2xl object-cover"
+      />
+    </div>
+
+    <p class="mt-2 text-sm">{name}</p>
+  </button>
+</div>

src/pages/recruitment.astro

@@ -1,15 +1,17 @@
 ---
-import Welcome from "../components/Welcome.astro";
 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";
 
 // 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.
 ---
 
 <Layout>
-  <RecruitmentHero />
-  <WhyBeAPartOfAgrobot />
-  <Welcome />
+  <main>
+    <RecruitmentHero />
+    <WhyBeAPartOfAgrobot />
+    <LearnAboutOurSubteams />
+  </main>
 </Layout>