feat(projects): enhance projects page with new components and images.…

src/components/blocks/Agroponics.astro

@@ -1,17 +1,21 @@
 <!-- Agroponics Introduction Section -->
-<div class="agroponics">
+<div class="flex flex-col gap-6">
   <!-- Agroponics Image Container -->
-  <div class="agroponics-image">
-    <!-- Image for Agroponics -->
+  <div class="h-[410px] max-w-[910px]">
+    <img
+      src="/hero-section-temp.jpg"
+      alt="Agrobot Project"
+      class="h-full w-full rounded-[3rem] object-cover"
+    />
   </div>
 
   <!-- Agroponics Text Content -->
-  <div class="agroponics-content">
+  <div class="flex flex-col gap-6">
     <!-- Agroponics Section Heading -->
-    <h1 class="agroponics-title">Introducing, Agroponics</h1>
+    <h1 class="text-5xl">Introducing, Agroponics!</h1>
 
     <!-- Agroponics Description -->
-    <p class="agroponics-description">
+    <p class="text-2xl">
       Agroponics combines IoT automation, structural engineering, and plant
       research to build optimized hydroponic environments. Through smart
       monitoring and controlled nutrient delivery, the team reduces the amount

src/components/blocks/BehindTheBuild.astro

@@ -1,52 +1,58 @@
 <!-- Behind the Build Section -->
-<div class="behind-build">
+<div class="flex flex-col gap-8 px-8">
   <!-- Section Heading -->
-  <h1 class="behind-build-title">Behind the Build</h1>
+  <h1 class="mb-10 text-center text-5xl">Behind the Build</h1>
 
   <!-- Card: Teamwork in Motion -->
-  <div class="behind-build-card">
-    <!-- Card Image -->
-    <div class="behind-build-image">
-      <!-- Image -->
+  <div class="relative flex items-center gap-12">
+    <div
+      class="h-[329px] w-[433px] shrink-0 overflow-hidden rounded-[3rem] bg-gray-100"
+    >
+      <img
+        src="/teamwork-in-motion.jpg"
+        alt="Teamwork"
+        class="h-full w-full object-cover"
+      />
     </div>
-
-    <!-- Card Content -->
-    <div class="behind-build-content">
-      <h2 class="behind-build-card-title">Teamwork in Motion</h2>
-
-      <p class="behind-build-card-text">
+    <div class="flex-1">
+      <h2 class="mb-2 text-4xl">Teamwork in Motion</h2>
+      <p class="text-2xl leading-relaxed">
         Every breakthrough happens through collaboration and curiosity.
       </p>
     </div>
   </div>
 
   <!-- Card: Automation with Purpose -->
-  <div class="behind-build-card reverse">
-    <!-- Card Content -->
-    <div class="behind-build-content">
-      <h2 class="behind-build-card-title">Automation with Purpose</h2>
-
-      <p class="behind-build-card-text">Every component serves a mission.</p>
+  <div class="relative -top-20 flex flex-row-reverse items-center gap-12">
+    <div
+      class="h-[329px] w-[433px] shrink-0 overflow-hidden rounded-[3rem] bg-gray-100"
+    >
+      <img
+        src="/teamwork-in-motion.jpg"
+        alt="Automation"
+        class="h-full w-full object-cover"
+      />
     </div>
-
-    <!-- Card Image -->
-    <div class="behind-build-image">
-      <!-- Image -->
+    <div class="flex-1 text-right">
+      <h2 class="mb-2 text-4xl">Automation with Purpose</h2>
+      <p class="text-2xl leading-relaxed">Every component serves a mission.</p>
     </div>
   </div>
 
   <!-- Card: Capturing the Build -->
-  <div class="behind-build-card">
-    <!-- Card Image -->
-    <div class="behind-build-image">
-      <!-- Image -->
+  <div class="relative -top-36 flex items-center gap-12">
+    <div
+      class="h-[329px] w-[433px] shrink-0 overflow-hidden rounded-[3rem] bg-gray-100"
+    >
+      <img
+        src="capturing-the-build.jpg"
+        alt="Capturing the Build"
+        class="h-full w-full object-cover"
+      />
     </div>
-
-    <!-- Card Content -->
-    <div class="behind-build-content">
-      <h2 class="behind-build-card-title">Capturing the Build</h2>
-
-      <p class="behind-build-card-text">
+    <div class="flex-1">
+      <h2 class="mb-2 text-4xl">Capturing the Build</h2>
+      <p class="text-2xl leading-relaxed">
         Every moment of creation with the joy of making something real.
       </p>
     </div>

src/components/blocks/GetInvolvedWithAgrobot.astro

@@ -1,12 +1,17 @@
 <!-- Section for getting involved with Agrobot -->
-<div class="get-involved-section">
+<div class="flex flex-col items-center gap-10">
   <!-- Main heading -->
-  <h1 class="get-involved-title">Get Involved with Agrobot</h1>
+  <h1 class="text-5xl">Get Involved with Agrobot</h1>
 
   <!-- Container for action buttons -->
-  <div class="get-involved-actions">
-    <button class="btn-join-team"> Join the Team </button>
-
-    <button class="btn-sponsor"> Sponsor Us </button>
+  <div class="flex flex-row gap-24">
+    <button
+      class="rounded-full bg-gray-100 px-24 py-4 text-xl hover:cursor-pointer"
+      >Join the team</button
+    >
+    <button
+      class="rounded-full bg-gray-100 px-24 py-4 text-xl hover:cursor-pointer"
+      >Sponsor us</button
+    >
   </div>
 </div>

src/components/blocks/PeoplePoweringProjects.astro

@@ -3,20 +3,18 @@ import PeoplePoweringProjectsCard from "./PeoplePoweringProjectsCard.astro";
 ---
 
 <!-- Team Testimonials Section -->
-<div class="team-testimonials">
-  <h1 class="team-testimonials-title">The people powering the projects</h1>
+<div class="-mt-46 flex flex-col items-center gap-8 px-8 py-12">
+  <h1 class="text-center text-5xl">The people powering the Projects</h1>
 
-  <div class="team-testimonials-list">
+  <div class="flex gap-12">
     <PeoplePoweringProjectsCard
       quote="I love how every challenge here turns into a learning experience. Seeing the robot actually move for the first time after weeks of testing was surreal."
       author="Jordan Lee, Mechanical Subteam"
     />
-
     <PeoplePoweringProjectsCard
-      quote="Working on the control systems has been an incredible mix of coding, debugging, and watching things come to life. There’s nothing like seeing your code move actual hardware."
+      quote="Working on the control systems has been an incredible mix of coding, debugging, and watching things come to life. There's nothing like seeing your code move actual hardware."
       author="Priya Nair, Software Subteam"
     />
-
     <PeoplePoweringProjectsCard
       quote="I joined to learn about sensors, but I stayed because of the team. We all share this goal of building something that could really help farmers one day."
       author="Miguel Santos, Electrical Subteam"

src/components/blocks/PeoplePoweringProjectsCard.astro

@@ -2,13 +2,9 @@
 const { quote, author } = Astro.props;
 ---
 
-<!-- Testimonial Card -->
-<div class="testimonial-card">
-  <p class="testimonial-quote">
-    {quote}
-  </p>
-
-  <p class="testimonial-author">
-    {author}
-  </p>
+<div
+  class="flex flex-1 flex-col justify-between gap-8 rounded-3xl bg-gray-100 p-8"
+>
+  <p class="text-xl leading-relaxed">"{quote}"</p>
+  <p class="text-lg">- {author}</p>
 </div>

src/components/blocks/ProjectCloserLook.astro

@@ -1,15 +1,16 @@
 <!-- Agrobot: A Closer Look Section -->
-<div class="project-agrobot-closer-look-container">
-  <!-- Section Title -->
-  <h1 class="project-agrobot-closer-look-title">A Closer Look at Agrobot</h1>
+<div class="flex w-full flex-col items-center gap-2">
+  <h1 class="text-5xl">A Closer Look at Agrobot</h1>
 
-  <!-- Section Description -->
-  <p class="project-agrobot-closer-look-description">
+  <p class="text-2xl">
     From design to deployment. Here's what life inside Agrobot looks like.
   </p>
 
-  <!-- Section Image / Media -->
-  <div class="project-agrobot-closer-look-image">
-    <!-- A Closer Look at Agrobot Picture -->
+  <div class="mt-6 h-[406px] w-full">
+    <img
+      src="/leadership-meeting.jpg"
+      alt="Leadership"
+      class="h-full w-full rounded-[3rem] object-cover object-[50%_60%]"
+    />
   </div>
 </div>

src/components/blocks/ProjectsAgrobot.astro

@@ -1,11 +1,8 @@
-<div class="project-container project-agrobot">
-  <!-- Project Title -->
-  <h1 class="project-title">Agrobot</h1>
+<div class="flex h-full w-full flex-col gap-6">
+  <h1 class="text-5xl">Agrobot</h1>
 
-  <!-- Project Content: Description & Image -->
-  <div class="project-content">
-    <!-- Project Content -->
-    <div class="project-description">
+  <div class="flex flex-row gap-8">
+    <div class="flex flex-col gap-7 text-2xl">
       <p>
         Agrobot is an autonomous agricultural robot designed to perform precise
         weeding and collect crop data in real time. With automation and machine
@@ -19,8 +16,12 @@
     </div>
 
     <!-- Project Image -->
-    <div class="project-image">
-      <!-- Picture Associated with Agrobot -->
+    <div class="max-w-[500px]">
+      <img
+        src="/hero-section-temp.jpg"
+        alt="Agrobot Project"
+        class="h-auto w-full rounded-[3rem] object-cover"
+      />
     </div>
   </div>
 </div>

src/components/blocks/WhatsNextForAgrobot.astro

@@ -1,10 +1,10 @@
 <!-- What's Next Section -->
-<div class="agrobot-next">
+<div class="flex h-full w-full flex-col items-center gap-6">
   <!-- Section Heading -->
-  <h1 class="agrobot-next-title">What's next for Agrobot?</h1>
+  <h1 class="text-5xl">What's next for Agrobot?</h1>
 
   <!-- Section Description -->
-  <p class="agrobot-next-description">
+  <p class="w-full max-w-2xl text-center text-2xl">
     Agrobot is just the first step. Introducing the next piece of our autonomous
     agriculture system.
   </p>

src/pages/projects.astro

@@ -1,18 +1,48 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import AgrobotHero from "../components/blocks/AgrobotHero.astro";
+import ProjectsAgrobot from "../components/blocks/ProjectsAgrobot.astro";
+import ProjectCloserLook from "../components/blocks/ProjectCloserLook.astro";
+import WhatsNextForAgrobot from "../components/blocks/WhatsNextForAgrobot.astro";
+import Agroponics from "../components/blocks/Agroponics.astro";
+import BehindTheBuild from "../components/blocks/BehindTheBuild.astro";
+import PeoplePoweringProjects from "../components/blocks/PeoplePoweringProjects.astro";
+import GetInvolvedWithAgrobot from "../components/blocks/GetInvolvedWithAgrobot.astro";
 ---
 
 <Layout>
   <main
-    class="flex min-h-screen w-full flex-col items-center gap-24 px-6 py-20"
+    class="flex min-h-screen w-full flex-col items-center gap-32 px-6 py-20"
   >
     <!-- Hero -->
-    <div class="w-full max-w-7xl">
+    <div class="mb-10 w-full max-w-7xl">
       <AgrobotHero />
     </div>
 
     <!-- Body of the page -->
-    <div class="flex w-full max-w-4xl flex-col gap-24"></div>
+    <div class="flex w-full max-w-4xl flex-col gap-24">
+      <ProjectsAgrobot />
+    </div>
+
+    <div class="w-full max-w-7xl">
+      <ProjectCloserLook />
+    </div>
+
+    <div class="flex w-full max-w-4xl flex-col gap-24">
+      <WhatsNextForAgrobot />
+      <Agroponics />
+    </div>
+
+    <div class="w-full max-w-6xl">
+      <BehindTheBuild />
+    </div>
+
+    <div class="w-full max-w-7xl gap-24">
+      <PeoplePoweringProjects />
+    </div>
+
+    <div class="flex w-full max-w-4xl flex-col gap-24">
+      <GetInvolvedWithAgrobot />
+    </div>
   </main>
 </Layout>