Footer Component Added

src/App.css

@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 2rem 2rem 0;
   text-align: center;
 }
 

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 Footer from "./Components/Footer";
 import "./App.css";
 
 function App() {
@@ -26,7 +27,7 @@ function App() {
           <Route path="/contact" element={<Contact />} />
         </Routes>
       </main>
-      {/* We'll add a footer component later */}
+      <Footer/>
     </div>
   );
 }

src/Components/Footer.css

@@ -0,0 +1,93 @@
+.background {
+    background: linear-gradient(to bottom, #FA4616 0%, #333333 5%, #1A1A1A 50%);
+    padding: 20px 5vw;
+    display: flex;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+    color: white;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: stretch;
+    box-sizing: border-box;
+}
+
+.left-container, .right-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.left-container {
+    justify-content: flex-start;
+}
+
+.left-container a {
+    color: white;
+    text-decoration: underline;
+}
+
+.web-logo {
+    height: 60px;
+    width: 60px;
+}
+
+.link-container {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.link-container h4 {
+    margin: 0;
+}
+
+.web-logo-text {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    text-align: left;
+}
+
+.main-link, .uf-link {
+    display: flex;
+    gap: 10px
+}
+
+.social-links a {
+    width: 50px;
+    height: 50px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+}
+
+.social-link {
+    background-color: #FA4616;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.right-container a {
+    color: white;
+    font-size: 1rem;
+    text-align: right;
+    margin: 4px 0;
+}
+
+.right-container p {
+    color: white;
+    font-weight: bold;
+}
+
+.right-container p:hover {
+  color: #646cff;
+  cursor: pointer;
+}

src/Components/Footer.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import UF from "../assets/uf.png"
+import MIL from "../assets/mil.png"
+import Youtube from "../assets/socials/youtube.svg"
+import Instagram from "../assets/socials/instagram.svg"
+import LinkedIn from "../assets/socials/linkedin.svg"
+import Github from "../assets/socials/github.svg"
+import Extra from "../assets/socials/link.svg"
+import "./Footer.css"
+
+function Footer() {
+    return <>
+        <div className="background">
+            <div className="left-container">
+                <div className="link-container">
+                    <div className="main-link">
+                        <img className="web-logo" src={MIL}/>
+                        <div className="web-logo-text">
+                            <a href="http://mil.ufl.edu/"><h4>Machine Intelligence Laboratory</h4></a>
+                        </div>
+                    </div>
+                    <div className="uf-link">
+                        <img className="web-logo" src={UF}/>
+                        <div className="web-logo-text">
+                            <a href="https://www.ufl.edu/"><h4>University of Florida</h4></a>
+                        </div>
+                    </div>
+                </div>
+                <div className="social-links">
+                    <a href="https://www.youtube.com/@SubjuGatorUF"><img src={Youtube} className="social-link"/></a>
+                    <a href="https://www.instagram.com/ufmil/"><img src={Instagram} className="social-link"/></a>
+                    <a href="https://www.linkedin.com/company/machineintelligencelab"><img src={LinkedIn} className="social-link"/></a>
+                    <a href="https://github.com/uf-mil/mil"><img src={Github} className="social-link"/></a>
+                    <a href="https://mil.ufl.edu/docs/"><img src={Extra} className="social-link"/></a>
+                </div>
+            </div>
+            <div className="right-container">
+                <Link to="/aboutus"><p>About Us</p></Link>
+                <Link to="/sponsors"><p>Sponsors</p></Link>
+                <Link to="/ourteam"><p>Our Team</p></Link>
+                <Link to="/contact"><p>Contact Us</p></Link>
+            </div>
+        </div>
+    </>
+}
+
+export default Footer;