Fixed some bugs and started introducing React Router

react-client/src/App.jsx

@@ -8,10 +8,15 @@ import promo_data from "./assets/promo.json";
 import Promotion from "./components/Promotion";
 import Footer from "./components/Footer";
 import Search from "./components/Search";
+import Home from "./components/Home";
+import About from "./components/About";
 
-
-
-
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Link
+} from "react-router-dom";
 
 export default function App() {
   const [data, setData] = useState([]);
@@ -51,7 +56,7 @@ export default function App() {
   }, []);
 
   return (
-    <>
+    <Router>
       <nav className="navbar navbar-expand-lg bg-body-tertiary">
         <div className="container-fluid">
           <a className="navbar-brand" href="#">TSE</a>
@@ -98,11 +103,15 @@ export default function App() {
                     ))
                 }
             </div>
-            <Home data={data} handleDelete={handleDelete} /> 
+            <Routes>
+              <Route exact path="/" element={<Home data={data} handleDelete={handleDelete} /> }/>
+              <Route path="/about" element={<About/>}/>
+            </Routes>
+
             <Footer environment={import.meta.env.VITE_ENVIRONMENT}/>
           </div>
         </div>
       </main>
-    </>
+    </Router>
   );
 }

react-client/src/components/About.jsx

@@ -0,0 +1,11 @@
+export default function About(){
+    return (
+    <div>
+      <h1>About</h1>
+        <p>Welcome to <strong>The Sock Exchange</strong> - your one-stop-shop for reuniting lost soles! Ever find yourself socked with a lonely leftie, or perhaps a solitary rightie, pining for its partner? Fear not, for The Sock Exchange is here to save the day (and your feet) from mismatched misery. Our innovative platform is dedicated to the noble cause of re-pairing the unpaired, ensuring that every sock finds its soulmate.</p>
+        <p>Here's how it works: Simply upload a glamour shot and a heartfelt bio of your single sock. Whether it's a stripey stunner with a passion for puddle-jumping or a woolly wonder that's walked a thousand miles, we believe there's a match for every sock out there. Browse through our vast repository of single socks, upload your own, or maybe, just maybe, find that perfect match that'll make your sock drawer complete again.</p>
+        <p>But wait, there's more! The Sock Exchange isn't just a place for lonely socks; it's a community of like-minded individuals who believe in a world where no sock should ever have to go it alone. Share your success stories, sock-related puns, or join our "Sock of the Month" club where the most heartwarming or hilarious sock tale wins a brand new pair (because sometimes, even the best of us need a fresh start).</p>
+        <p>So, if you're tired of seeing that one-eyed sock monster lurking in your laundry room, or you believe in giving every sock its happily ever after, lace up your shoeless foot and hop on over to The Sock Exchange. It's time to bring some balance back to your sock drawer and a little bit of joy to your sole.</p>
+    </div>
+  );
+}

react-client/src/components/Footer.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
 export default function Footer({environment}){
-    let color = "green";
+    let color = "yellow";
     environment = environment.toUpperCase();
-    if(environment === "DEVELOPMENT"){
-        color = "yellow";
+    if(environment === "PRODUCTION"){
+        color = "green";
     }
     return(
         <footer className="text-muted">