update navbar, add banner

frontend/src/App.tsx

@@ -1,17 +1,15 @@
 import { HelmetProvider } from "react-helmet-async";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { Footer } from "src/components/Footer";
 import { Navbar } from "src/components/Navbar";
+import { PrivateRoute } from "src/components/PrivateRoute";
 import { Home } from "src/pages";
+import { AddProduct } from "src/pages/AddProduct";
+import { EditProduct } from "src/pages/EditProduct";
+import { IndividualProductPage } from "src/pages/Individual-product-page";
 import { Marketplace } from "src/pages/Marketplace";
-
-import { PrivateRoute } from "../src/components/PrivateRoute";
-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 FirebaseProvider from "../src/utils/FirebaseProvider";
-import { SavedProducts } from "./pages/SavedProducts";
+import { PageNotFound } from "src/pages/PageNotFound";
+import { SavedProducts } from "src/pages/SavedProducts";
+import FirebaseProvider from "src/utils/FirebaseProvider";
 
 const router = createBrowserRouter([
   {
@@ -73,7 +71,6 @@ export default function App() {
           <div className="flex-grow">
             <RouterProvider router={router} />
           </div>
-          <Footer />
         </div>
       </FirebaseProvider>
     </HelmetProvider>

frontend/src/components/Header.tsx

@@ -0,0 +1,8 @@
+export function Header() {
+  return (
+    <>
+      <div className="bg-[url('./ucsd-pricecenter.png')] bg-[center_25%] bg-cover w-full h-[60%] shadow-[8px_8px_0px_rgba(246,174,45,0.6)] fixed -z-50"/>
+      <div className="h-[50vh]"/>
+    </>
+  );
+}

frontend/src/components/Navbar.tsx

@@ -1,4 +1,5 @@
-import { faBars, faCartShopping, faUser, faXmark, faHeart } from "@fortawesome/free-solid-svg-icons";
+import { faHeart } from "@fortawesome/free-regular-svg-icons";
+import { faBars, faCartShopping, faUser, faXmark } 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";
@@ -40,65 +41,59 @@ export function Navbar() {
     };
   }, []);
 
+  const tabStyling = "text-gray-400 hover:text-gray-800";
+  const selectedTabStyling = "text-ucsd-blue";
+
   return (
     <>
-      <nav className="bg-ucsd-blue text-white w-full h-12 max-h-12 p-2 flex items-center justify-between sticky top-0 z-50">
+      <nav className="font-rubik shadow-md shadow-ucsd-blue bg-white c left-0 right-0 min-w-0 mx-12 rounded-b-lg h-12 max-h-12 px-6 py-10 flex items-center justify-between fixed top-0 z-55">
         {/* Desktop View */}
         <button
-          className="font-jetbrains text-xl pl-2"
+          className="text-lg font-semibold"
           onClick={() => (window.location.href = "/products")}
         >
-          Low-Price Center
+          <span className="text-3xl text-ucsd-blue">Low </span>
+          <span className="text-3xl text-ucsd-gold">Price Center</span>
         </button>
-        <ul className="hidden md:flex items-center space-x-4 text-xl">
-          <li>
-            <button
-              hidden={user === null}
-              onClick={() => (window.location.href = "/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={faCartShopping}
-                aria-label="Shopping Cart"
-              />
-              Products
-            </button>
-          </li>
-          <li>
+        <div className={`hidden ${!user && "opacity-0"} md:flex flex-row gap-3 items-center justify-center`}>
+          {[
+            { label: "Shop", path: "/products" },
+            { label: "Sell", path: "/sell" },
+            { label: "Student Organizations", path: "/organizations" },
+          ].map((val) => (
             <button
-              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"
+              key={val.label}
+              className={`${window.location.pathname === val.path ? selectedTabStyling : tabStyling}`}
+              onClick={() => {
+                window.location.href = val.path;
+              }}
             >
-              <FontAwesomeIcon
-                className="text-lg pr-2"
-                icon={faHeart}
-                aria-label="Heart Icon"
-              />
-              Saved
+              {val.label}
             </button>
-          </li>
-          <li>
-            {user ? (
-              <button
-                onClick={signOutFromFirebase}
-                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={faUser} aria-label="User Icon" />
-                Sign Out
-              </button>
-            ) : (
-              <button
-                onClick={openGoogleAuthentication}
-                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={faUser} aria-label="User Icon" />
-                Sign In
-              </button>
-            )}
-          </li>
-        </ul>
+          ))}
+        </div>
+        <div className="hidden md:flex items-center text-2xl space-x-4">
+          <button
+            onClick={() => (window.location.href = "/saved-products")}
+            className={`${!user && "opacity-0"} w-12 h-12 text-xl flex items-center justify-center border-2 hover:bg-gray-300 rounded-full transition-colors`}
+          >
+            <FontAwesomeIcon icon={faHeart} aria-label="Heart Icon" />
+          </button>
+
+          <button
+            onClick={() => (window.location.href = "/products")}
+            className={`${!user && "opacity-0"} w-12 h-12 text-xl flex items-center justify-center border-2 hover:bg-gray-300 rounded-full transition-colors`}
+          >
+            <FontAwesomeIcon icon={faCartShopping} aria-label="Shopping Cart" />
+          </button>
+
+          <button
+            onClick={user ? signOutFromFirebase : openGoogleAuthentication}
+            className="px-4 py-1 bg-transparent border-transparent rounded transition-colors"
+          >
+            {user ? "Log Out" : "Log In"}
+          </button>
+        </div>
 
         {/* Mobile View */}
         <div className="md:hidden relative">

frontend/src/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

frontend/src/pages/Home.tsx

@@ -1,55 +1,33 @@
 import { useContext } from "react";
-import { Helmet } from "react-helmet-async";
 import { Navigate } from "react-router-dom";
+import { Header } from "src/components/Header";
 import { FirebaseContext } from "src/utils/FirebaseProvider";
 
 const buttonStyles =
-  "bg-slate-800 text-white py-3 px-4 rounded-md mt-2 hover:bg-slate-900 transition-colors w-full sm:w-fit flex flex-row gap-3 justify-center";
+  "text-gray-400 text-lg border-2 shadow-md py-2 px-4 rounded-full hover:bg-gray-200 transition-colors w-full sm:w-fit flex items-center justify-center";
 
 export function Home() {
-  const { user, openGoogleAuthentication, signOutFromFirebase } = useContext(FirebaseContext);
+  const { user, openGoogleAuthentication } = useContext(FirebaseContext);
 
   if (user) {
     return <Navigate to="/products" />;
   }
 
   return (
-    <>
-      <Helmet>
-        <title>Low-Price Center</title>
-      </Helmet>
-      <main className="w-full flex flex-col sm:flex-row justify-center items-center mt-16 mb-16 gap-4 sm:gap-6 px-4 sm:px-8 [@media(max-height:400px)]:min-h-screen">
-        <section className="w-full max-w-[90%] sm:max-w-[35%] h-[auto] sm:h-[60vh] flex flex-col justify-center text-center sm:text-left">
-          <h1 className="font-inter font-normal text-3xl leading-[40px] md:text-4xl lg:text-[50px] lg:leading-[65px] mb-7">
-            Welcome to
-            <br />
-            <span className="font-bold">Low-Price Center</span>
-          </h1>
-          <div className="bg-[#F5F0E6] max-w-[90%] flex justify-center items-center mb-7 mx-auto sm:mx-0 p-1">
-            <p className="font-inter font-normal text-sm sm:text-base lg:text-xl p-5 inline-block text-center">
-              An online marketplace made <strong>by</strong> and <strong>for</strong> UCSD students
-              to buy and sell goods.
-            </p>
-          </div>
-          {user ? (
-            <button className={buttonStyles} onClick={signOutFromFirebase}>
-              Sign out
-            </button>
-          ) : (
-            <button className={buttonStyles} onClick={openGoogleAuthentication}>
-              <img src="/googlebutton.svg" alt="Google sign-in" className="w-6 h-6 mr-1" />
-              Sign in with Google
-            </button>
-          )}
-        </section>
-        <section className="w-full max-w-[90%] sm:max-w-[40%] h-[auto] sm:h-[60vh] mt-4 sm:mt-0">
-          <img
-            src="./ucsd-pricecenter.png"
-            alt="UCSD Price Center"
-            className="w-full h-full object-cover shadow-[8px_8px_0px_rgba(165,165,165,0.6)]"
-          />
-        </section>
-      </main>
-    </>
+    <div>
+      <Header />
+      <section className="bg-white font-rubik rounded-xl mx-12 px-8 py-4 shadow-md shadow-ucsd-blue">
+        <div className="font-bold text-5xl pb-16">
+          <span className="text-ucsd-blue">Low </span>
+          <span className="text-ucsd-gold">Price Center</span>
+        </div>
+        <div className="flex flex-col justify-center items-center mb-7 mx-auto sm:mx-0 p-1 gap-4 ">
+          <div className="text-3xl">Log in to sell on Low Price Center</div>
+          <button className={buttonStyles} onClick={openGoogleAuthentication}>
+            Log In
+          </button>
+        </div>
+      </section>
+    </div>
   );
 }

frontend/src/pages/Marketplace.tsx

@@ -1,9 +1,10 @@
-import { useState, useEffect, useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
+import { get, post } from "src/api/requests";
+import { Header } from "src/components/Header";
 import Product from "src/components/Product";
 import SearchBar from "src/components/SearchBar";
 import { FirebaseContext } from "src/utils/FirebaseProvider";
-import { get, post } from "src/api/requests";
 
 export function Marketplace() {
   const [products, setProducts] = useState<
@@ -50,6 +51,7 @@ export function Marketplace() {
 
   return (
     <>
+      <Header />
       <Helmet>
         <title>Low-Price Center Marketplace</title>
       </Helmet>
@@ -86,6 +88,7 @@ export function Marketplace() {
               </div>
             ))}
           </div>
+          <div className="min-h-screen bg-gray-200">this is a big component to test scrolling</div>
         </div>
       </main>
     </>

frontend/tailwind.config.js

@@ -16,6 +16,7 @@ export default {
       fontFamily: {
         jetbrains: ["JetBrains Mono", "monospace"],
         inter: ["Inter", "sans-serif"],
+        rubik: ["Rubik", "sans-serif"],
       },
     },
   },