diff --git a/src/App.jsx b/src/App.jsx index fee585b..5f6dd15 100644 --- a/src/App.jsx +++ b/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() { } /> } /> } /> + }/> {/* We'll add a footer component later */} diff --git a/src/Pages/VehiclePages/Subjugator3.jsx b/src/Pages/VehiclePages/Subjugator3.jsx new file mode 100644 index 0000000..fff7a3e --- /dev/null +++ b/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 ( +
+
+
+

Subjugator3

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Dry Weight:185 IbsDimensions:67"x27"x27"
Max Depth:20 feetMax Speed:unknown
Battery Life:unknownThrusters:6 Trolling Motors
Navigation:IMU/CompassCameras:unknown
+
+

Publication

+

Photos

+

Team

+
+
+
+ Vehicle Image +
+
+
+

The 3th generation SubjuGator vehicle has participated in 4 year of operation at the University of Florida from 1999 to 2003.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VersionYearCompetitionPlacement
3.42003RoboSub 78th
3.32002RoboSub 63rd
3.22001RoboSub 53rd
3.12000RoboSub 47th
+
+
+ ); +} + + +export default Subjugator3; \ No newline at end of file diff --git a/src/assets/SubjuGator3.jpg b/src/assets/SubjuGator3.jpg new file mode 100644 index 0000000..f93d06b Binary files /dev/null and b/src/assets/SubjuGator3.jpg differ diff --git a/src/styles/Subjugator3.css b/src/styles/Subjugator3.css new file mode 100644 index 0000000..4bd041a --- /dev/null +++ b/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; +}