Changes to the Sponsors & Members Pages

src/App.jsx

@@ -9,6 +9,8 @@ import RoboSub from "./Pages/RoboSub";
 import AUVTechnology from "./Pages/AUVTechnology";
 import Sponsors from "./Pages/Sponsors";
 import OurTeam from "./Pages/OurTeam";
+import Electrical from "./Pages/Electrical";
+import Mechanical from "./Pages/Mechanical";
 import "./App.css";
 
 function App() {
@@ -24,6 +26,8 @@ function App() {
           <Route path="/ourteam" element={<OurTeam />} />
           <Route path="/sponsors" element={<Sponsors />} />
           <Route path="/contact" element={<Contact />} />
+          <Route path="/electrical" element={<Electrical />} />
+          <Route path="/mechanical" element={<Mechanical />} />
         </Routes>
       </main>
       {/* We'll add a footer component later */}

src/Pages/Electrical.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import "../styles/Electrical.css";
+import MemberList from "../Pages/configs/Electrical.json";
+import ProjectList from "../Pages/configs/Electrical-Projects.json";
+
+function Electrical() {
+
+
+  useEffect(() => {
+          window.scrollTo(0, 0);
+      }, []);
+
+  return (
+    <div className="electrical-page">
+      <section className="electrical-section">
+
+      <h1> <span className="year">2025</span> Electrical Team </h1>
+
+      <div className="members-section">
+
+        {MemberList.members.map(member => {
+          return(
+            <div key={member.name} className="member-card">
+              {member.image ? (<img src={member.image} alt={member.name}  className="member-img"/>) : 
+                        (<span className="member-name">{member.name}</span>)}
+              <h2 className="member-name"> {member.name} </h2>
+              <h3 className="member-role"> {member.role} </h3>
+
+            </div>
+            )
+          })
+        }
+
+      </div>
+
+      <div className="work-section">
+
+        <h1> Notable Projects </h1>
+
+        <div className="projects-section">
+
+          {ProjectList.projects.map(project => {
+              return(
+                <div key={project.name} className="project-card">
+                  {project.image ? (<img src={project.image} alt={project.name}  className="project-img"/>) : 
+                            (<br></br>)}
+
+                  <div className="project-text">
+                    <h2 className="project-name"> Title: {project.name} </h2>
+                    <p className="project-role"> Description: {project.description} </p>
+                  </div>
+
+                </div>
+                )
+              })
+          }
+
+        </div>
+
+      </div>
+
+      </section>
+
+    </div>
+  );
+}
+
+export default Electrical;

src/Pages/Home.jsx

@@ -139,6 +139,9 @@ function Home() {
                   <p>
                     Precision-engineered chassis with servo-actuated systems
                   </p>
+                  <Link to="/mechanical" className="btn btn-primary">
+                    Mechanical Team
+                  </Link>
                 </div>
               </div>
               <div className="feature">
@@ -147,7 +150,12 @@ function Home() {
                 </span>
                 <div className="feature-text">
                   <h3>Electrical</h3>
-                  <p>Custom PCBs and advanced sensor integration</p>
+                  <p>
+                    Custom PCBs and advanced sensor integration
+                  </p>
+                  <Link to="/electrical" className="btn btn-primary">
+                    Electrical Team
+                  </Link>
                 </div>
               </div>
               <div className="feature">
@@ -160,6 +168,9 @@ function Home() {
                     ROS-based architecture with computer vision and deep
                     learning
                   </p>
+                  <Link to="/auv-technology" className="btn btn-primary">
+                    Software Team
+                  </Link>
                 </div>
               </div>
             </div>

src/Pages/Mechanical.jsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import "../styles/Mechanical.css";
+import MemberList from "../Pages/configs/Mechanical.json";
+import ProjectList from "../Pages/configs/Mechanical-Projects.json";
+
+function Mechanical() {
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, []);
+
+  return (
+    <div className="mechanical-page">
+      <section className="mechanical-section">
+
+      <h1> <span className="year">2025</span> Mechanical Team </h1>
+
+      <div className="members-section">
+
+        {MemberList.members.map(member => {
+          return(
+            <div key={member.name} className="member-card">
+              {member.image ? (<img src={member.image} alt={member.name}  className="member-img"/>) : 
+                        (<span className="member-name">{member.name}</span>)}
+              <h2 className="member-name"> {member.name} </h2>
+              <h3 className="member-role"> {member.role} </h3>
+
+            </div>
+            )
+          })
+        }
+
+      </div>
+
+      <div className="work-section">
+
+        <h1> Notable Projects </h1>
+
+        <div className="projects-section">
+
+            {ProjectList.projects.map(project => {
+                return(
+                    <div key={project.name} className="project-card">
+                        {project.image ? (<img src={project.image} alt={project.name}  className="project-img"/>) : 
+                                (<br></br>)}
+
+                        <div className="project-text">
+                            <h2 className="project-name"> Title: {project.name} </h2>
+                            <p className="project-role"> Description: {project.description} </p>
+                        </div>
+                    </div>
+                    )
+                })
+            }
+
+        </div>
+
+      </div>
+
+      </section>
+
+    </div>
+  );
+}
+
+export default Mechanical;

src/Pages/Sponsors.jsx

@@ -1,10 +1,73 @@
-import React from "react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import "../styles/Sponsors.css";
+import SponsorsList from "../Pages/configs/Sponsors.json";
 
 function Sponsors() {
+
+  const [selectedYear, setSelectedYear] = useState('2023');
+  const yearData = SponsorsList[selectedYear];
+
   return (
-    <div>
+    <div className="sponsors-page">
+      <section className="sponsors-section">
+
       <h1>Sponsors</h1>
-      <p>This is a placeholder for now.</p>
+
+      <label>
+
+        Select Year:
+
+        <select value={selectedYear}
+            onChange={e => setSelectedYear(e.target.value)}>
+          <option value="2023">2023</option>
+          <option value="2022">2022</option>
+          <option value="2021">2021</option>
+          <option value="2020">2020</option>
+          <option value="2019">2019</option>
+          <option value="2018">2018</option>
+          <option value="2017">2017</option>
+          <option value="2016">2016</option>
+          <option value="2015">2015</option>
+          <option value="2014">2014</option>
+          <option value="2013">2013</option>
+          <option value="2012">2012</option>
+        </select>
+
+      </label>
+
+      {yearData.tiers.map(name => {
+        return(
+          <div key={name.tier}>
+            <p className={name.tier + "-Text"}> {name.tier + " Sponsors"} </p>
+              <div className="sponsor-row">
+                {name.sponsors.map(sponsor => {
+                  return(
+                    <div key={sponsor.name} className="sponsor-card">
+
+                      {sponsor.image ? (<img src={sponsor.image} alt={sponsor.name}  className="sponsor-img"/>) : 
+                      (<span className="sponsor-text">{sponsor.name}</span>)}
+                      </div>
+                    )
+                    })
+                  }
+                </div>
+              </div>
+            )
+          })
+        }
+
+      </section>
+
+      <section className="donation-section">
+        <h1>
+                Want to support the Team?
+        </h1>
+        <Link to="https://mil.ufl.edu/donate" className="btn btn-primary">
+                Donate!
+        </Link>
+      </section>
+
     </div>
   );
 }

src/Pages/configs/Electrical-Projects.json

@@ -0,0 +1,18 @@
+{
+    "projects": [
+
+        {
+            "name": "Subjugator Wiring",
+            "description": "This project is in the works!",
+            "image": "https://subjugator-org.vercel.app/assets/PCB-DmzRgM0X.png"
+        },
+
+        {
+            "name": "Subjugator Stress Testing",
+            "description": "This project is in the works!",
+            "image": "https://subjugator-org.vercel.app/assets/sub9_cherry_1-BQDeTwND.png"
+        }
+
+    ]
+
+}

src/Pages/configs/Electrical.json

@@ -0,0 +1,30 @@
+{
+    "members": [
+
+        {
+            "name": "Joseph Goodman",
+            "role": "Electrical Lead",
+            "image": "https://subjugator-org.vercel.app/assets/joseph_goodman-CG-dgtpC.png"
+        },
+
+        {
+            "name": "Adrian Fernandez",
+            "role": "Electrical Lead",
+            "image": "https://subjugator-org.vercel.app/assets/adrian_fernandez-C3xs3Tj8.png"
+        },
+
+        {
+            "name": "Lester Bonilla",
+            "role": "Electrical Lead",
+            "image": "https://subjugator-org.vercel.app/assets/lester_bonilla-9ke-ECyi.jpg"
+        },
+
+        {
+            "name": "Ethan Mitchell",
+            "role": "Electrical Member",
+            "image": "https://subjugator-org.vercel.app/assets/ethan_mitchell-BKL648c8.png"
+        }
+
+    ]
+
+}

src/Pages/configs/Mechanical-Projects.json

@@ -0,0 +1,18 @@
+{
+    "projects": [
+
+        {
+            "name": "Subjugator Modeling",
+            "description": "This project is in the works!",
+            "image": "https://subjugator-org.vercel.app/assets/subjugator_9.1-CmH4JUZ1.png"
+        },
+
+        {
+            "name": "Subjugator Stress Testing",
+            "description": "This project is in the works!",
+            "image": "https://subjugator-org.vercel.app/assets/sub9_cherry_1-BQDeTwND.png"
+        }
+
+    ]
+
+}

src/Pages/configs/Mechanical.json

@@ -0,0 +1,30 @@
+{
+    "members": [
+
+        {
+            "name": "Adam McAleer",
+            "role": "Mechanical Lead",
+            "image": "https://subjugator-org.vercel.app/assets/adam_mcaleer-DYAh1JAL.png"
+        },
+
+        {
+            "name": "Adam Hamdan",
+            "role": "Mechanical Lead",
+            "image": "https://subjugator-org.vercel.app/assets/adam_hamdan-CH9Sdl14.png"
+        },
+
+        {
+            "name": "Ryan Hoburg",
+            "role": "Mechanical Lead",
+            "image": "https://subjugator-org.vercel.app/assets/ryan_hoburg-CH6fHSF1.png"
+        },
+
+        {
+            "name": "Lorant Domokos",
+            "role": "Mechanical Lead",
+            "image": "https://subjugator-org.vercel.app/assets/lorant_domokos-DWrqxBOR.png"
+        }
+
+    ]
+
+}