Added Past Projects section with a ProjectCard component for easier c…

…hange

src/pages/ProjectsPage/FEPPage/EngineeringProcess.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import ProcessCard from "./ProcessCard"; // Adjust the import path as necessary
+import Planning from "../../../images/Planning.png";
+import Designing from "../../../images/Designing.png";
+import Building from "../../../images/Building.png";
+import Testing from "../../../images/Testing.png";
+import Presentation from "../../../images/Presentation.png";
+
+import Step1 from "../../../images/Step1.png";
+import Step2 from "../../../images/Step2.png";
+import Step3 from "../../../images/Step3.png";
+import Step4 from "../../../images/Step4.png";
+import Step5 from "../../../images/Step5.png";
+import DottedOrangeLine from "../../../images/DottedOrangeLine.png";
+
+const DevelopmentProcess = () => {
+  return (
+    <div className="relative p-8 bg-white w-full flex flex-col items-center pb-32">
+      {/* Title */}
+      <div className="flex flex-col items-center pt-20">
+        <h2 className="text-center font-karla font-[600] text-[2.5rem] leading-[2.925rem] text-black pb-7">
+          The Engineering Process
+        </h2>
+        <div className="border-t-4 border-[#FAC80A] w-[10rem] mx-auto"></div>
+      </div>
+
+      {/* Main Content: Dotted line and Process Cards */}
+      <div className="flex items-start w-[83.3125rem] h-[114rem] pt-9">
+        {/* Wrapper to position dotted line and process cards */}
+        <div className="relative flex items-center">
+          {/* Dotted line centered vertically */}
+          <div className="absolute top-1/2 transform -translate-y-1/2" style={{ left: '-2rem' }}>
+            <img src={DottedOrangeLine} alt="Dotted Line" className="h-full" />
+          </div>
+
+          {/* Process Cards */}
+          <div className="flex flex-col items-start ml-10">
+            <ProcessCard
+              title="Planning"
+              subtext="Teams start by thoroughly understanding the given challenge, breaking it down into core problems and identifying key requirements. They then develop a strategic plan, including timelines, resource allocation, and initial design concepts."
+              image={Planning}
+              stepNumberImage={Step1}
+            />
+
+            <ProcessCard
+              title="Designing"
+              subtext="In this phase, teams focus on detailed design work, creating blueprints, schematics, and prototypes. Mechanical and hardware components are modeled and tested to ensure they meet the challenge’s specifications. Iterative testing and refinement are crucial at this stage."
+              image={Designing}
+              stepNumberImage={Step2}
+            />
+
+            <ProcessCard
+              title="Building"
+              subtext="Teams proceed to the construction and assembly of their solution. Mechanical systems and hardware components are built, integrated, and rigorously tested for functionality. Teams work collaboratively to ensure all parts work together seamlessly and address the challenge effectively."
+              image={Building}
+              stepNumberImage={Step3}
+            />
+
+            <ProcessCard
+              title="Testing"
+              subtext="Teams rigorously test their solution under real-world conditions to ensure functionality and reliability, refining their design based on performance data and feedback."
+              image={Testing}
+              stepNumberImage={Step4}
+            />
+
+            <ProcessCard
+              title="Presentation"
+              subtext="The final phase involves a comprehensive presentation of their project, showcasing their design process, technical achievements, and how their solution effectively meets the challenge."
+              image={Presentation}
+              stepNumberImage={Step5}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DevelopmentProcess;

src/pages/ProjectsPage/FEPPage/FEPPage.jsx

@@ -3,8 +3,9 @@ import Footer from "../../../components/Footer";
 import FEPBackground from "../../../images/FEPBackground.png";
 import TheFEPProject from "./TheFEPProject";
 import OurProcess from "./OurProcess";
-import DevelopmentProcess from "./DevelopmentProcess";
+import EngineeringProcess from "./EngineeringProcess";
 import OurCollaborators from "./OurCollaborators";
+import PastProjects from "./OurPastProjects";
 
 const FEPPage = () => {
     return (
@@ -13,8 +14,9 @@ const FEPPage = () => {
                 <Navbar bg={FEPBackground} title="ENGINEERING" subtitle="PROJECTS"/>
                 <TheFEPProject></TheFEPProject>
                 <OurProcess></OurProcess>
-                <DevelopmentProcess></DevelopmentProcess>
+                <EngineeringProcess></EngineeringProcess>
                 <OurCollaborators></OurCollaborators>
+                <PastProjects></PastProjects>
                 <Footer />
             </div>
         </>

src/pages/ProjectsPage/FEPPage/OurCollaborators.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import CollaboratorsBackground from "../../../images/CollaboratorsBackground.png";
+import FGNLogo from "../../../images/FGN.png"; // Example logos, update the paths accordingly
+import FASAELogo from "../../../images/FASAE.png";
+import FACESLogo from "../../../images/FACES.png";
+
+const OurCollaborators = () => {
+  return (
+    <div
+      className="flex flex-col items-center justify-center bg-cover bg-center bg-no-repeat py-28"
+      style={{ backgroundImage: `url(${CollaboratorsBackground})` }}
+    >
+      {/* Title */}
+      <h2 className="text-black text-[2.5rem] font-bold mb-4">Our collaborators</h2>
+
+      {/* Subtext */}
+      <p className="text-center text-black text-[1.125rem] leading-8 max-w-3xl pb-16">
+        We are grateful for the support from organizations dedicated to professional development, 
+        cultural enrichment, and community engagement. Their contributions, including workshops, 
+        mentorship, and resources, help us enhance our programs and empower future leaders.
+      </p>
+
+      {/* Logos */}
+      <div className="flex justify-center items-center space-x-8">
+        <img src={FGNLogo} alt="FGN Logo" className="w-[15rem] object-contain" />
+        <img src={FASAELogo} alt="FASAE Logo" className="w-[12rem] object-contain" />
+        <img src={FACESLogo} alt="FACES Logo" className="w-[15rem] object-contain" />
+      </div>
+    </div>
+  );
+};
+
+export default OurCollaborators;

src/pages/ProjectsPage/FEPPage/OurPastProjects.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import PastProjectsBackground from "../../../images/PastProjectsBackground.png";
+import ProjectCard from "./ProjectCard"; // Import ProjectCard
+import GestureControlledArm from "../../../images/GestureControlledArm.png";
+import AutonomousVacuum from "../../../images/AutonomousVacuum.png";
+import HungryHungryHippos from "../../../images/HungryHungryHippos.png";
+
+const PastProjects = () => {
+  return (
+    <div
+      className="flex flex-col items-center justify-center bg-cover bg-center bg-no-repeat pb-20"
+      style={{ backgroundImage: `url(${PastProjectsBackground})` }}
+    >
+      {/* Title */}
+      <div className="flex flex-col items-center pt-20">
+        <h2 className="text-center font-karla font-[600] text-[2.5rem] leading-[2.925rem] text-white pb-7">
+          Past Projects
+        </h2>
+        <div className="border-t-4 border-[#FAC80A] w-[10rem] mx-auto"></div>
+      </div>
+
+      {/* Project Cards */}
+      <div className="flex space-x-16 mt-12">
+        <ProjectCard
+          title="Gesture Controlled Arm"
+          year="2023-2024"
+          description="The project involves developing a Mobile Gesture-Controlled Robotic Arm, with teams focusing on the mechanical design and prototyping, software for movement and task execution, and hardware integration via PCBs."
+          image={GestureControlledArm}
+        />
+
+        <ProjectCard
+          title="Autonomous Vacuum"
+          year="2022-2023"
+          description="The project involves automating a common household device, focusing on designing a cost-efficient autonomous vacuum cleaner, similar to a Roomba, that effectively picks up dirt and debris while avoiding obstacles."
+          image={AutonomousVacuum}
+        />
+
+        <ProjectCard
+          title="Hungry Hungry Hippos"
+          year="2021-2022"
+          description="The project involves designing an autonomous, controllable robot to sort and dispense coins into specific locations while competing against another robot, ensuring no harm is done to the opponent during coin collection and disposal."
+          image={HungryHungryHippos}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PastProjects;

src/pages/ProjectsPage/FEPPage/ProcessCard.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const ProcessCard = ({ title, subtext, image, stepNumberImage }) => {
+  return (
+    <div className="flex items-center w-[77.5625rem] h-[22.8rem]">
+      {/* Content with step number image, title, and subtext */}
+      <div className="flex flex-1 items-start">
+        {/* Step number image next to the title */}
+        <div className="flex-shrink-0 mr-4">
+          <img src={stepNumberImage} alt="Step Number" className="w-10 h-10" />
+        </div>
+
+        {/* Title and subtext */}
+        <div className="flex flex-col">
+          <h3 className="text-black text-[2.5rem] font-[600] leading-[2.925rem] pb-8">{title}</h3>
+          <p className="text-black font-inter font-[300] text-[1rem] leading-8">{subtext}</p>
+        </div>
+      </div>
+
+      {/* Image */}
+      <div className="flex-shrink-0 ml-28">
+        <img src={image} alt={title} className=" rounded-lg" />
+      </div>
+    </div>
+  );
+};
+
+export default ProcessCard;

src/pages/ProjectsPage/FEPPage/ProjectCard.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const ProjectCard = ({ title, year, description, image }) => {
+  return (
+    <div className="w-[22.1875rem] h-[28.9375rem] rounded-tl-[5rem] rounded-br-[5rem] overflow-hidden shadow-lg bg-black text-white flex flex-col justify-end transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
+      {/* Image */}
+      <div className="h-[14.375rem] w-[22.1875rem] bg-cover bg-center " style={{ backgroundImage: `url(${image})` }}></div>
+
+      {/* Content */}
+      <div className="p-4 h-[14.375rem] w-[22.1875rem]">
+        <h3 className="text-[1.5rem] font-semibold leading-[1.75375rem] font-karla mb-2">{title}</h3>
+        <p className="text-[#FAC80A] text-[1rem] leading-8 mb-1">{year}</p>
+        <p className="text-[0.75rem] font-inter font-[300] leading-6 pt-2">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;