diff --git a/src/App.jsx b/src/App.jsx index fee585b..7e10571 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 Subjugator4 from "./Pages/VehiclePages/Subjugator4" import "./App.css"; function App() { @@ -24,6 +25,7 @@ function App() { } /> } /> } /> + }/> {/* We'll add a footer component later */} diff --git a/src/Pages/VehiclePages/Subjugator4.jsx b/src/Pages/VehiclePages/Subjugator4.jsx new file mode 100644 index 0000000..f841430 --- /dev/null +++ b/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 ( +
+
+
+

Subjugator4

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dry Weight:60 IbsDimensions:48"x30"x15"
Max Depth:20 feetMax Speed:0.5 m/s
Battery Life:unknownThrusters:4 Trolling Motors
Navigation:IMU/CompassCameras:unknown
Placement:7th
+
+

Publication

+

Photos

+

Team

+
+
+
+ Vehicle Image +
+
+
+

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

+

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.

+

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

+
+
+ ); +} + + +export default Subjugator4; \ No newline at end of file diff --git a/src/assets/SubjuGator4.jpg b/src/assets/SubjuGator4.jpg new file mode 100644 index 0000000..2eeb1ac Binary files /dev/null and b/src/assets/SubjuGator4.jpg differ diff --git a/src/styles/Subjugator4.css b/src/styles/Subjugator4.css new file mode 100644 index 0000000..d1ff78e --- /dev/null +++ b/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; +} \ No newline at end of file