Subjugator1 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 Subjugator1 from "./Pages/VehcilePages/Subjugator1";
 import "./App.css";
 
 function App() {
@@ -24,11 +25,14 @@ function App() {
           <Route path="/ourteam" element={<OurTeam />} />
           <Route path="/sponsors" element={<Sponsors />} />
           <Route path="/contact" element={<Contact />} />
+          <Route path="/subjugator1" element={<Subjugator1/>}/>
         </Routes>
       </main>
       {/* We'll add a footer component later */}
     </div>
   );
 }
 
+
+
 export default App;

src/Pages/VehcilePages/Subjugator1.jsx

@@ -0,0 +1,69 @@
+import React, {useState, useEffect, useRef} from "react";
+import { Link } from "react-router-dom";
+import "../../styles/Subjugator1.css"
+import Image from "../../assets/subjugator1.png"
+
+function Subjugator1() {
+
+    const pageRef = useRef(null);
+    const infoRef = useRef(null);
+    const visualRef = useRef(null);
+
+    useEffect(() => {
+        const page = pageRef.current;
+        const info = infoRef.current;
+        const visual = visualRef.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));
+
+        return () => tids.forEach(clearTimeout);
+    }, []);
+
+    return (
+    <div className="background" ref={pageRef}>
+        <div className="info-box" ref={infoRef}>
+            <h2 className="vehicle-title">Subjugator1</h2>
+            <table>
+                <tr>
+                  <td>Dry Weight:</td>
+                  <td>—</td>
+                  <td>Dimensions:</td>
+                  <td>—</td>
+                </tr>
+                <tr>
+                  <td>Max Depth:</td>
+                  <td>—</td>
+                  <td>Max Speed:</td>
+                  <td>—</td>
+                </tr>
+                <tr>
+                  <td>Battery Life:</td>
+                  <td>—</td>
+                  <td>Thrusters:</td>
+                  <td>—</td>
+                </tr>
+                <tr>
+                  <td>Navigation:</td>
+                  <td>—</td>
+                  <td>Cameras:</td>
+                  <td>—</td>
+                </tr>
+            </table>
+            <div className="vehicle-links">
+                <Link to="#"><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>
+    );
+}
+
+
+export default Subjugator1;

src/styles/Subjugator1.css

@@ -0,0 +1,156 @@
+.background {
+    display: grid;
+    grid-template-columns: 1fr; 
+    align-items: start;
+    gap: 12px;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 12px;
+}
+
+.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: 16px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    border-radius: 16px;
+    border: 2px solid orangered;
+    box-shadow: -4px 8px 40px darkblue;
+}
+
+.info-box h2 {
+    margin-bottom: 16px; 
+    color: darkblue;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-size: 28px; 
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: "Poppins", Arial, sans-serif;
+    color: white;
+    font-size: 0.95rem;   
+    letter-spacing: 0.5px;
+    border: 2px solid orangered;
+}
+
+td {
+    border: 2px solid orangered;
+    padding: 8px 10px; 
+    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 { 
+    border-radius: 16px; 
+}
+
+.visual-box img {
+    width: 100%;
+    height: 100%;
+    max-height: min(72vh, 820px);
+    object-fit: contain;
+    border-radius: 8px;
+}
+
+.vehicle-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin: 12px 0;
+}
+
+.vehicle-links a { 
+    text-decoration: none; 
+    color: darkblue; 
+}
+
+.vehicle-links a h4 {
+    font-size: 1rem;
+    margin: 0;
+    transition: color 0.3s ease;
+}
+
+.vehicle-links a:hover h4 { 
+    color: orangered; 
+}
+
+@media (max-width: 420px) {
+    td { 
+        white-space: normal; 
+    }
+    .table-wrap table { 
+        min-width: 0; 
+    }
+}
+
+@media (min-width: 600px) {
+.background {
+        grid-template-columns: minmax(280px, 520px) minmax(0, 1fr);
+        gap: 20px;
+        padding: 24px;
+    }
+    .info-box { 
+        padding: 28px 40px; 
+    }
+    .info-box h2 { 
+        margin-bottom: 24px; font-size: 36px; 
+    }
+    table { 
+        font-size: 1rem; 
+    }
+    td { 
+        padding: 10px 14px; 
+    }
+    .vehicle-links { 
+        gap: 18px; margin: 16px 0; 
+    }
+    .vehicle-links a h4 { 
+        font-size: 1.25rem; 
+    }
+}
+
+@media (min-width: 1200px) {
+    .background {
+        gap: 30px;
+        padding: 32px;
+    }
+    .info-box { 
+        padding: 40px 60px; }
+    .info-box h2 { 
+        margin-bottom: 32px; 
+        font-size: 44px; 
+    }
+    td { 
+        padding: 12px 16px; 
+    }
+    .vehicle-links { 
+        gap: 24px; 
+        margin: 20px 0; 
+    }
+    .vehicle-links a h4 { 
+        font-size: 1.5rem; 
+    }
+}