First Changes to the Sponsorship Page

src/App.jsx

@@ -9,6 +9,7 @@ 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 "./App.css";
 
 function App() {
@@ -24,6 +25,7 @@ function App() {
           <Route path="/ourteam" element={<OurTeam />} />
           <Route path="/sponsors" element={<Sponsors />} />
           <Route path="/contact" element={<Contact />} />
+          <Route path="/electrical" element={<Electrical />} />
         </Routes>
       </main>
       {/* We'll add a footer component later */}

src/Pages/Electrical.jsx

@@ -0,0 +1,57 @@
+import React, { 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() {
+
+  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">
+              <h2 className="member-name"> {member.name} </h2>
+              <h3 className="member-role"> {member.role} </h3>
+              {member.image ? (<img src={member.image} alt={member.name}  className="member-img"/>) : 
+                        (<span className="member-name">{member.name}</span>)}
+
+            </div>
+            )
+          })
+        }
+
+      </div>
+
+      <div id="work-section">
+
+        <h1> Current Projects </h1>
+
+        {ProjectList.projects.map(project => {
+            return(
+              <div key={project.name} className="project-card">
+                <h3 className="project-name"> {project.name} </h3>
+                <h3 className="project-role"> {project.description} </h3>
+                {project.image ? (<img src={project.image} alt={project.name}  className="project-img"/>) : 
+                          (<br></br>)}
+
+              </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="/auv-technology" 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/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,12 @@
+{
+    "projects": [
+
+        {
+            "name": "Dummy Project (JSON Example)",
+            "description": "This project is in the works!",
+            "image": ""
+        }
+
+    ]
+
+}

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"
+        }
+
+    ]
+
+}