36 recruitment page team popups

src/components/blocks/LearnAboutOurSubteams.astro

@@ -5,6 +5,7 @@ interface Subteam {
   image: string;
   description: string;
   responsibilities: string[];
+  teamImage: string;
 }
 
 interface TeamGroup {
@@ -25,37 +26,50 @@ const {
           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.",
+          responsibilities: [],
+          teamImage: "/electrical-team.jpg",
         },
         {
           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.",
+          responsibilities: [],
+          teamImage: "/applied-ai-team.jpg",
         },
         {
           id: "Mechatronics",
           name: "Mechatronics",
           image: "/Mechatronics.png",
           description: "",
+          responsibilities: [],
+          teamImage: "/mechatronics-team.jpg",
         },
         {
           id: "chassis/powerTrain",
           name: "Chassis/Power Train",
           image: "/chassis-powertrain.jpg",
-          description: "",
+          description:
+            "The Chassis/Powertrain sub-team designs and builds AgroBot’s chassis and powertrain, ensuring smooth mobility and seamless integration of all components. They carefully select motors and power transmission systems, perform finite element analysis to guarantee safety and durability, and develop detailed design solutions. The team also assembles components from other sub-teams onto AgroBot’s main body, creating a cohesive and fully functional robot. This sub-team is perfect for those interested in mechanical design, manufacturing, and bringing complex robotic systems to life.",
+          responsibilities: [],
+          teamImage: "/chassis-powertrain-team.jpg",
         },
         {
           id: "navigation",
           name: "Navigation",
           image: "/navigation.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/navigation-team.jpg",
         },
         {
           id: "systemArchitecture",
           name: "System Architecture",
           image: "/system-architecture.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/system-architecture-team.jpg",
         },
       ],
     },
@@ -68,18 +82,24 @@ const {
           name: "Automation",
           image: "/automation.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/automation-team.jpg",
         },
         {
           id: "plants",
           name: "Plants",
           image: "/plants.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/plants-team.jpg",
         },
         {
           id: "structure",
           name: "Structure",
           image: "/structure.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/structure-team.jpg",
         },
       ],
     },
@@ -92,30 +112,40 @@ const {
           name: "Web Dev",
           image: "/web-dev.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/web-dev-team.jpg",
         },
         {
           id: "agriculturalResearch",
           name: "Agricultural Research",
           image: "/agricultural-research.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/agricultural-research-team.jpg",
         },
         {
           id: "finance",
           name: "Finance",
           image: "/finance.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/finance-team.jpg",
         },
         {
           id: "marketing",
           name: "Marketing",
           image: "/marketing.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/marketing-team.jpg",
         },
         {
           id: "outreach",
           name: "Outreach",
           image: "/outreach.jpg",
           description: "",
+          responsibilities: [],
+          teamImage: "/outreach-team.jpg",
         },
       ],
     },
@@ -139,6 +169,8 @@ import SubteamCard from "./SubteamCard.astro";
               name={team.name}
               image={team.image}
               description={team.description}
+              responsibilities={team.responsibilities}
+              teamImage={team.teamImage}
             />
           ))}
         </div>

src/components/blocks/SubteamCard.astro

@@ -1,5 +1,8 @@
 ---
-const { id, name, image, description, responsibilities } = Astro.props;
+import TeamModal from "./TeamModel.astro";
+
+const { id, name, image, description, responsibilities, teamImage } =
+  Astro.props;
 ---
 
 <div class="flex flex-col items-center">
@@ -20,4 +23,12 @@ const { id, name, image, description, responsibilities } = Astro.props;
 
     <p class="mt-2 text-sm">{name}</p>
   </button>
+  <TeamModal
+    id={id}
+    name={name}
+    image={image}
+    description={description}
+    responsibilities={responsibilities}
+    teamImage={teamImage}
+  />
 </div>

src/components/blocks/TeamModel.astro

@@ -0,0 +1,48 @@
+---
+const { id, name, image, description, responsibilities, teamImage } =
+  Astro.props;
+---
+
+<dialog id={id} class="border-none bg-transparent p-0">
+  <!-- Backdrop + Centering -->
+  <div class="fixed inset-0 flex items-center justify-center bg-black/50">
+    <!-- Click outside to close -->
+    <button
+      type="button"
+      class="absolute inset-0"
+      onclick="this.closest('dialog').close()"></button>
+
+    <!-- Modal content -->
+    <div
+      class="relative w-[90vw] max-w-4xl overflow-hidden rounded-[2rem] bg-white"
+    >
+      <!-- Image -->
+      <div class="h-64 w-full bg-gray-300">
+        <img
+          src={teamImage}
+          alt={`${name} team`}
+          class="h-full w-full object-cover object-[50%_40%]"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="p-8 text-left">
+        <h2 class="mb-4 text-3xl font-semibold">
+          About {name}
+        </h2>
+
+        <p class="mb-6 text-gray-700">
+          {description}
+        </p>
+
+        <button class="rounded-full bg-gray-200 px-6 py-3">
+          Roles and Responsibilities
+        </button>
+
+        <ul class="mt-6 ml-5 list-disc">
+          {responsibilities.map((r: string) => <li>{r}</li>)}
+        </ul>
+      </div>
+    </div>
+  </div>
+</dialog>