Final Revised Changes for the Subjugator 8 Page Branch!

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

src/Pages/Vehicles/Subjugator8.jsx

@@ -0,0 +1,87 @@
+import "../../styles/Vehicles/Subjugator8.css";
+
+function Subjugator8() {
+  return (
+    <div className="subjugator8-section">
+      <div className="subjugator8b-section">
+
+        <div className="title-text"> <h2> SubjuGator 8B </h2> </div>
+
+        <div className="hero-section-8b">
+
+            <img src="/src/assets/subjugator-vehicles/Subjugator8B.png"></img>
+
+            <div className="table-container">
+
+                <div className="statistic-card"> <strong>Dry Weight:</strong> 120 lbs </div>
+                <div className="statistic-card"> <strong>Thrusters:</strong> T-200 Blue Robotics (x8) </div>
+                <div className="statistic-card"> <strong>Dimensions:</strong> 15" x 22" x 30" </div>
+                <div className="statistic-card"> <strong>Max Thrust:</strong> 62 lbf static surge </div>
+                <div className="statistic-card"> <strong>Max Depth:</strong> 150 feet </div>
+                <div className="statistic-card"> <strong>Navigation:</strong> Teledyne DVL </div>
+                <div className="statistic-card"> <strong>Max Speed:</strong> 2 m/s </div>
+                <div className="statistic-card"> Sensonar IMU </div>
+                <div className="statistic-card"> <strong>Battery Life:</strong> 2 hours </div>
+                <div className="statistic-card"> <strong>Cameras:</strong> Point Grey Blackfly (x3) </div>
+
+            </div>
+          </div>
+        </div>
+
+        <p className="subjugator-description">
+            Leveraging 20 years of autonomous underwater vehicle (AUV) development experience at the University of Florida, which has produced 7 prior individual platform designs, the SubjuGator family of AUVs has progressed to accommodate advances in sensors, computing, and mission requirements leading to the design of the current generation SubjuGator 8 vehicle.External design influences include commercially available underwater vehicles, which are generally factored into two broad classes: long range, slender, under-actuated vehicles and short range, precision movement, and fully-actuated vehicles[1]. SubjuGator 8 falls into the latter category, as it is designed for high performance maneuvering and manipulation missions.
+
+            <br></br> <br></br> 
+
+            UF’s eighth generation vehicle with the addition of the Blue View Sonar and a new upper stage with the battery pod moved higher, SubjuGator 8B, has competed in the 2018, 2019, 2020(virtually) & 2021(virtually) at RoboSub and will again be competing in the 202 RoboSub competition.
+
+            <br></br> <br></br> 
+
+            For additional information, please see our latest <a href="http://subjugator.org/wp-content/uploads/2020/03/2019_UF_SubjuGator_RoboSub.pdf">AUVSI Publication.</a>
+
+        </p>
+
+      <hr class="section-divider"></hr>
+
+      <div className="subjugator8a-section">
+
+        <div className="title-text"> <h2> SubjuGator 8A </h2> </div>
+
+        <div className="hero-section-8a">
+
+            <div className="auv-image-wrapper">
+
+                <img src="/src/assets/subjugator-vehicles/Subjugator8A.png"></img>
+            </div>
+
+            <div className="table-container">
+
+                <div className="statistic-card"> <strong>Dry Weight:</strong> 75 lbs </div>
+                <div className="statistic-card"> <strong>Thrusters:</strong> Video Ray M5 (x8) </div>
+                <div className="statistic-card"> <strong>Dimensions:</strong> 15" x 22" x 22" </div>
+                <div className="statistic-card"> <strong>Max Thrust:</strong> 62 lbf static surge </div>
+                <div className="statistic-card"> <strong>Max Depth:</strong> 150 feet </div>
+                <div className="statistic-card"> <strong>Navigation:</strong> Teledyne DVL </div>
+                <div className="statistic-card"> <strong>Max Speed:</strong> 2 m/s </div>
+                <div className="statistic-card"> Sensonar IMU </div>
+                <div className="statistic-card"> <strong>Battery Life:</strong> 2 hours </div>
+                <div className="statistic-card"> <strong>Cameras:</strong> Point Grey Blackfly (x3) </div>
+
+            </div>
+          </div>
+        </div>
+
+        <p className="subjugator-description">
+            UF’s eighth generation vehicle, SubjuGator 8, has competed in the 2015 and 2016 RoboSub Competitions and will again be competing in the 2017 RoboSub competition.
+
+            <br></br> <br></br>
+
+            For additional information, please see our latest <a href="http://subjugator.org/wp-content/uploads/2016/06/SubjuGator-2016-Journal-Paper.pdf">AUVSI Publication. </a>
+
+        </p>
+
+    </div>
+  );
+}
+
+export default Subjugator8;

src/styles/Vehicles/Subjugator8.css

@@ -0,0 +1,133 @@
+.subjugator8b-section {
+
+    margin-top: 10%;
+
+}
+
+.subjugator8b-section .title-text {
+
+    background: linear-gradient(90deg, #ffffff, #0044ff);
+    -webkit-background-clip: text;
+    color: transparent;
+
+}
+
+.subjugator8b-section .hero-section-8b {
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 50px;
+    align-items: center;
+
+}
+
+.subjugator8b-section .statistic-card:hover {
+
+  transform: translateY(-5px);
+  border-color: #0044ff;
+
+}
+
+.subjugator8b-section .statistic-card::before {
+
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: #0044ff;
+
+}
+
+.subjugator8a-section .title-text {
+
+    background: linear-gradient(90deg, #ffffff, #ff9900);
+    -webkit-background-clip: text;
+    color: transparent;
+
+}
+
+.subjugator8a-section .hero-section-8a {
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 50px;
+    align-items: center;
+
+}
+
+.subjugator8a-section .statistic-card:hover {
+
+  transform: translateY(-5px);
+  border-color: #ff9900;
+
+}
+
+.subjugator8a-section .statistic-card::before {
+
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: #ff9900;
+
+}
+
+
+.subjugator8-section img {
+
+    width: 100%;
+    border-radius: 12px;
+    box-shadow: 0 0 25px rgba(0,0,0,0.5);
+    transition: transform 0.3s ease, box-shadow 0.2s ease;
+
+}
+
+.subjugator8-section img:hover {
+
+    transform: scale(1.04);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+
+}
+
+.subjugator8-section .table-container {
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+
+}
+
+.subjugator8-section .statistic-card {
+
+    position: relative;
+    overflow: hidden;
+    padding: 16px 22px;
+    border-radius: 14px;
+    background: linear-gradient(145deg, #111, #0d0d0d);
+    border: 1px solid #222;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 8px rgba(255,255,255,0.03);
+    transition: transform 0.15s ease, border-color 0.2s ease;
+
+}
+
+.subjugator8-section .subjugator-description {
+
+    margin-top: 15px;
+    color: rgb(197, 197, 197);
+
+
+}
+
+.subjugator8-section .section-divider {
+
+    width: 80%;
+    height: 2px;
+    margin: 80px auto;
+    border: 0;
+    background: linear-gradient(90deg, transparent, #444, transparent);
+
+}