about us page

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import { AddProduct } from "../src/pages/AddProduct";
 import { EditProduct } from "../src/pages/EditProduct";
 import { IndividualProductPage } from "../src/pages/Individual-product-page";
 import { PageNotFound } from "../src/pages/PageNotFound";
+import { AboutUsPage } from "../src/pages/AboutUs";
 import FirebaseProvider from "../src/utils/FirebaseProvider";
 import { SavedProducts } from "./pages/SavedProducts";
 
@@ -58,6 +59,7 @@ const router = createBrowserRouter([
       </PrivateRoute>
     ),
   },
+  { path: "/about-us", element: <AboutUsPage /> },
   {
     path: "*",
     element: <PageNotFound />,

frontend/src/components/Navbar.tsx

@@ -1,4 +1,11 @@
-import { faBars, faCartShopping, faUser, faXmark, faHeart } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBars,
+  faCartShopping,
+  faUser,
+  faXmark,
+  faHeart,
+  faMoneyBill,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useContext, useEffect, useRef, useState } from "react";
 import { FirebaseContext } from "src/utils/FirebaseProvider";
@@ -70,13 +77,23 @@ export function Navbar() {
               hidden={user === null}
               onClick={() => (window.location.href = "/saved-products")}
               className="font-inter px-4 py-1 bg-transparent border-transparent rounded hover:bg-ucsd-darkblue transition-colors"
+            >
+              <FontAwesomeIcon className="text-lg pr-2" icon={faHeart} aria-label="Heart Icon" />
+              Saved
+            </button>
+          </li>
+          <li>
+            <button
+              hidden={user === null}
+              onClick={() => (window.location.href = "/about-us")}
+              className="font-inter px-4 py-1 bg-transparent border-transparent rounded hover:bg-ucsd-darkblue transition-colors"
             >
               <FontAwesomeIcon
                 className="text-lg pr-2"
-                icon={faHeart}
-                aria-label="Heart Icon"
+                icon={faMoneyBill}
+                aria-label="Money Icon"
               />
-              Saved
+              About Us
             </button>
           </li>
           <li>
@@ -129,6 +146,20 @@ export function Navbar() {
                 Products
               </button>
             </li>
+            <li className="mb-2">
+              <button
+                hidden={user === null}
+                onClick={() => (window.location.href = "/about-us")}
+                className="font-inter w-full text-center px-4 py-2 bg-transparent border-transparent rounded hover:bg-ucsd-darkblue transition-colors"
+              >
+                <FontAwesomeIcon
+                  className="text-lg pr-2"
+                  icon={faMoneyBill}
+                  aria-label="Money Bill"
+                />
+                About Us
+              </button>
+            </li>
             <li>
               {user ? (
                 <button

frontend/src/pages/AboutUs.tsx

@@ -0,0 +1,29 @@
+import { useNavigate } from "react-router-dom";
+export function AboutUsPage() {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <div className="flex flex-col mx-auto w-[60%]">
+        <button
+          className="text-lg mt-12 font-inter hover:underline self-start"
+          onClick={() => navigate("/products")}
+        >
+          &larr; Return to Marketplace
+        </button>
+        <div className="font-jetbrains text-center text-[48px] mt-12">About Us</div>
+        <div className="text-center mx-auto bg-[#F5F0E6] my-12 p-8">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </div>
+      <div className="flex xxl:flex-row xxl:justify-between mx-auto gap-y-12 mb-12 xxl:w-[60%] w-[30%] flex-col">
+        <img src="csesLogo.png" alt="cses" />
+        <img src="ucsdLogo.png" alt="ucsd" />
+      </div>
+    </div>
+  );
+}