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

src/Pages/VehiclePages/Subjugator4.jsx

@@ -0,0 +1,85 @@
+import React, {useState, useEffect, useRef} from "react";
+import { Link } from "react-router-dom";
+import "../../styles/Subjugator4.css"
+import Image from "../../assets/SubjuGator4.jpg"
+
+function Subjugator4() {
+
+    const pageRef = useRef(null);
+    const infoRef = useRef(null);
+    const visualRef = useRef(null);
+    const resultsRef = useRef(null);
+    const paraRef = useRef(null);
+
+    useEffect(() => {
+        const page = pageRef.current;
+        const info = infoRef.current;
+        const visual = visualRef.current;
+        const results = resultsRef.current;
+        const para = paraRef.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));
+        tids.push(setTimeout(() => para?.classList.add("animate-slideUp"), 500));
+        return () => tids.forEach(clearTimeout);
+    }, []);
+
+    return (
+    <div className="big-background">
+        <div className="background" ref={pageRef}>
+            <div className="info-box" ref={infoRef}>
+                <h2 className="vehicle-title">Subjugator4</h2>
+                <table>
+                    <tr>
+                    <td>Dry Weight:</td>
+                    <td>60 Ibs</td>
+                    <td>Dimensions:</td>
+                    <td>48"x30"x15"</td>
+                    </tr>
+                    <tr>
+                    <td>Max Depth:</td>
+                    <td>20 feet</td>
+                    <td>Max Speed:</td>
+                    <td>0.5 m/s</td>
+                    </tr>
+                    <tr>
+                    <td>Battery Life:</td>
+                    <td>unknown</td>
+                    <td>Thrusters:</td>
+                    <td>4 Trolling Motors</td>
+                    </tr>
+                    <tr>
+                    <td>Navigation:</td>
+                    <td>IMU/Compass</td>
+                    <td>Cameras:</td>
+                    <td>unknown</td>
+                    </tr>
+                    <tr>
+                        <td>Placement:</td>
+                        <td>7th</td>
+                    </tr>
+                </table>
+                <div className="vehicle-links">
+                    <Link to="https://subjugator.org/wp-content/uploads/2011/03/publication_2004_auvsi.pdf"><h4>Publication</h4></Link>
+                    <Link to="https://subjugator.org/?page_id=538"><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="info" ref={paraRef}>
+                <p>The 4th generation SubjuGator vehicle has participated in 1 year of operation at the University of Florida from 2003 to 2004.</p>
+                <p>For the 2004 competition, the Machine Intelligence Lab is venturing down a path few are willing to trek.  Keying off the graceful and articulate lines of a stingray, the University of Florida’s  design  goes beyond  the traditional submarine technology.  Preconceived notions have been shed to take advantage of rules that stipulate the submarine must fit within a 3’x 3’x 6’ box and weigh less than half of last year’s vehicle weight.   New weight requirements were also considered in the new design.  Blending composite materials with a wet hull design, team members are aiming for a compact package that weighs less than seventy pounds.</p>
+                <p>The new sub must be able to navigate through an underwater gate, receive and correctly interpret a visual navigation signal underwater, and then proceed on a search pattern to approach within visual detection range of a small LED display.  At the display, the autonomous vehicle must then engage two specified target receptacles, successfully loading these with special 1.5 pound marker modules, and returning to base, all within the specified time</p>
+        </div>
+    </div>
+    );
+}
+
+
+export default Subjugator4;

src/styles/Subjugator4.css

@@ -0,0 +1,138 @@
+.big-background {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    justify-items: center;
+    margin: 24px 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;
+    }
+}
+
+.info {
+    margin-top: 12px;
+    text-align: left;
+}