Subjugator 3 Page Created

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 Subjugator3 from "./Pages/VehiclePages/Subjugator3";
 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="/subjugator3" element={<Subjugator3/>}/>
         </Routes>
       </main>
       {/* We'll add a footer component later */}

src/Pages/VehiclePages/Subjugator3.jsx

@@ -0,0 +1,113 @@
+import React, {useState, useEffect, useRef} from "react";
+import { Link } from "react-router-dom";
+import "../../styles/Subjugator3.css"
+import Image from "../../assets/SubjuGator3.jpg"
+
+function Subjugator3() {
+
+    const pageRef = useRef(null);
+    const infoRef = useRef(null);
+    const visualRef = useRef(null);
+    const resultsRef = useRef(null);
+
+    useEffect(() => {
+        const page = pageRef.current;
+        const info = infoRef.current;
+        const visual = visualRef.current;
+        const results = resultsRef.current;
+
+        const tids = [];
+        tids.push(setTimeout(() => page?.classList.add("animate-fadeIn"), 100));
+        tids.push(setTimeout(() => info?.classList.add("animate-slideUp"), 200));
+        tids.push(setTimeout(() => visual?.classList.add("animate-slideUp"), 300));
+        tids.push(setTimeout(() => results?.classList.add("animate-slideUp"), 400));
+
+        return () => tids.forEach(clearTimeout);
+    }, []);
+
+    return (
+    <div className="big-background">
+        <div className="background" ref={pageRef}>
+            <div className="info-box" ref={infoRef}>
+                <h2 className="vehicle-title">Subjugator3</h2>
+                <table>
+                    <tr>
+                    <td>Dry Weight:</td>
+                    <td>185 Ibs</td>
+                    <td>Dimensions:</td>
+                    <td>67"x27"x27"</td>
+                    </tr>
+                    <tr>
+                    <td>Max Depth:</td>
+                    <td>20 feet</td>
+                    <td>Max Speed:</td>
+                    <td>unknown</td>
+                    </tr>
+                    <tr>
+                    <td>Battery Life:</td>
+                    <td>unknown</td>
+                    <td>Thrusters:</td>
+                    <td>6 Trolling Motors</td>
+                    </tr>
+                    <tr>
+                    <td>Navigation:</td>
+                    <td>IMU/Compass</td>
+                    <td>Cameras:</td>
+                    <td>unknown</td>
+                    </tr>
+                </table>
+                <div className="vehicle-links">
+                    <Link to="https://subjugator.org/wp-content/uploads/2021/06/uf_auvsi2003.pdf"><h4>Publication</h4></Link>
+                    <Link to="#"><h4>Photos</h4></Link>
+                    <Link to="#"><h4>Team</h4></Link>
+                </div>
+            </div>
+            <div className="visual-box" ref={visualRef}>
+                <img src={Image} alt="Vehicle Image"/>
+            </div>
+        </div>
+        <div className="results" ref={resultsRef}>
+            <p>The 3th generation SubjuGator vehicle has participated in 4 year of operation at the University of Florida from 1999 to 2003.</p>
+            <table class="results-table">
+                <thead>
+                    <tr>
+                    <th>Version</th>
+                    <th>Year</th>
+                    <th>Competition</th>
+                    <th>Placement</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                    <td>3.4</td>
+                    <td>2003</td>
+                    <td>RoboSub 7</td>
+                    <td>8th</td>
+                    </tr>
+                    <tr>
+                    <td>3.3</td>
+                    <td>2002</td>
+                    <td>RoboSub 6</td>
+                    <td>3rd</td>
+                    </tr>
+                    <tr>
+                    <td>3.2</td>
+                    <td>2001</td>
+                    <td>RoboSub 5</td>
+                    <td>3rd</td>
+                    </tr>
+                    <tr>
+                    <td>3.1</td>
+                    <td>2000</td>
+                    <td>RoboSub 4</td>
+                    <td>7th</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    );
+}
+
+
+export default Subjugator3;

src/styles/Subjugator3.css

@@ -0,0 +1,170 @@
+.big-background {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    justify-items: center;
+    margin: 0 auto;
+    gap: 12px;
+    padding: 12px;
+}
+
+.background {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: stretch;
+    gap: 12px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 12px;
+}
+
+.info-box, .visual-box {
+    flex: 1;
+    box-sizing: border-box;
+    width: 600px;
+}
+
+.info-box, .visual-box, .vehicle-page { 
+    opacity: 0; 
+    transform: translateY(8px); 
+}
+.animate-fadeIn, .animate-slideUp { 
+    opacity: 1; 
+    transform: none; 
+    transition: opacity .5s ease, transform .5s ease; 
+}
+
+.info-box {
+    padding: 28px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    border-radius: 16px;
+    border: 2px solid #FA4616;
+    box-shadow: -4px 8px 40px #003087;
+}
+
+.info-box h2 {
+    margin-bottom: 24px;
+    color: #003087;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-weight: bold;
+    font-size: 2.2rem; 
+    letter-spacing: 1px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: "Poppins", Arial, sans-serif;
+    color: white;
+    font-size: 1rem;   
+    letter-spacing: 0.5px;
+    border: 2px solid #FA4616;
+    margin-bottom: 20px;
+}
+
+td {
+    border: 2px solid #FA4616;
+    padding: 10px 12px; 
+    text-align: left;
+    white-space: nowrap;
+}
+
+td:first-child, td:nth-child(3) { 
+    font-weight: 600; 
+}
+
+td:nth-child(2), td:nth-child(4) { 
+    text-align: center;
+}
+
+.visual-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16px;
+    overflow: hidden;
+}
+
+.visual-box img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+}
+
+.vehicle-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    margin-top: 20px;
+}
+
+.vehicle-links a { 
+    text-decoration: none; 
+    color: #003087; 
+}
+
+.vehicle-links a h4 {
+    font-size: 1.5rem;
+    margin: 0;
+    transition: color 0.3s ease;
+}
+
+.vehicle-links a:hover h4 { 
+    color: #FA4616; 
+    transform: translateY(-2px);
+}
+
+@media (max-width: 1200px) {
+    .background {
+        flex-direction: column;
+    }
+
+    .info-box, .visual-box {
+        width: 100%;
+        max-width: 600px;
+    }
+}
+
+.results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 10px auto;
+}
+
+.results p {
+    font-weight: bold;
+    margin-top: 12px;
+    color: white;
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: "Poppins", Arial, sans-serif;
+    font-size: 1rem;
+    text-align: left;
+    color: white;
+    margin-top: 0 auto;
+    border: 1px solid #FA4616;
+}
+
+.results-table th {
+    font-weight: 600;
+    padding: 12px 16px;
+    border: 1px solid #FA4616;
+    color: white;
+}
+
+.results-table td {
+    padding: 12px 16px;
+    border: 1px solid #FA4616;
+}