FEP Page

src/App.jsx

@@ -15,6 +15,7 @@ import Fundraising from "./pages/ProgramsPage/FundraisingPage/Fundraising";
 import StudyHours from "./pages/StudyHours";
 import Workshops from "./pages/ProgramsPage/WorkshopsPage/Workshops.jsx";
 import FuFit from "./pages/FuFit";
+import FEPPage from "./pages/ProjectsPage/FEPPage/FEPPage"
 
 import Credits from "./pages/CreditsPage/Credits";
 export default function App() {
@@ -37,6 +38,7 @@ export default function App() {
         <Route path="/programs/fufit" element={<FuFit />} />
         <Route path="/projects" element={<Projects />} />
         <Route path="/credits" element={<Credits />} />
+        <Route path="/projects/FEP" element={<FEPPage />} />
       </Routes>
     </Router>
   );

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

@@ -0,0 +1,27 @@
+import Navbar from "../../../components/Navbar"
+import Footer from "../../../components/Footer";
+import FEPBackground from "../../../images/FEPBackground.png";
+import TheFEPProject from "./TheFEPProject";
+import OurProcess from "./OurProcess";
+import EngineeringProcess from "./EngineeringProcess";
+import OurCollaborators from "./OurCollaborators";
+import PastProjects from "./OurPastProjects";
+
+const FEPPage = () => {
+    return (
+        <>
+            <div className="overflow-x-hidden">
+                <Navbar bg={FEPBackground} title="ENGINEERING" subtitle="PROJECTS"/>
+                <TheFEPProject></TheFEPProject>
+                <OurProcess></OurProcess>
+                <EngineeringProcess></EngineeringProcess>
+                <OurCollaborators></OurCollaborators>
+                <PastProjects></PastProjects>
+                <Footer />
+            </div>
+        </>
+
+    );
+}
+
+export default FEPPage;

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/OurProcess.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import TheProcessBackgroundFEP from "../../../images/TheProcessBackgroundFEP.png"; // Update the path if necessary
+
+const TheFIPProject = () => {
+  return (
+    <div className="flex flex-col items-center">
+      {/* Top orange bar */}
+      <div className="w-full h-3 bg-[#FFA523]"></div>
+
+      {/* Image container */}
+      <div className="relative w-full">
+        <img src={TheProcessBackgroundFEP} alt="Process Background" className="w-full" />
+      </div>
+
+      {/* Bottom orange bar */}
+      <div className="w-full h-3 bg-[#FFA523]"></div>
+    </div>
+  );
+};
+
+export default TheFIPProject;

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;

src/pages/ProjectsPage/FEPPage/TheFEPProject.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const TheFEPProject = () => {
+  return (
+    <div className="bg-white w-full h-[30.469rem] flex items-center justify-center py-80">
+      <div
+        className="flex flex-col items-center justify-center w-[816px] h-[258px] transition-opacity ease-in duration-700 opacity-100"
+      >
+        <h1 className="font-karla font-[700] text-5xl text-black pb-3">
+          The FUSION Engineering Project
+        </h1>
+        <div className="mt-[30px] border-t-4 border-[#FAC80A] w-[10rem]"></div>
+        <div className="mt-[40px]">
+          <p className="font-inter text-[16px] leading-8 text-[#3C3C3C] text-center">
+          The FUSION Engineering Project is designed to empower members with hands-on experience, fostering both technical and professional growth. Participants will develop essential engineering skills by working on real-world challenges, all while collaborating in a dynamic, team-based environment. Beyond technical expertise, the project emphasizes the development of key professional skills, including effective communication, presenting work confidently, and translating complex ideas into actionable solutions. Our goal is to prepare participants not only to succeed in their careers but to lead and innovate in the engineering field.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TheFEPProject;