faq page

frontend/src/App.tsx

@@ -12,7 +12,7 @@ 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 { FaqPage } from "../src/pages/FaqPage";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -58,6 +58,7 @@ const router = createBrowserRouter([
       </PrivateRoute>
     ),
   },
+  { path: "/faq", element: <FaqPage /> },
   {
     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,
+  faQuestion,
+} 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 = "/faq")}
+              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={faQuestion}
+                aria-label="Question Mark"
               />
-              Saved
+              FAQ
             </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 = "/faq")}
+                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={faQuestion}
+                  aria-label="Question Mark"
+                />
+                FAQ
+              </button>
+            </li>
             <li>
               {user ? (
                 <button

frontend/src/pages/FaqPage.tsx

@@ -0,0 +1,116 @@
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+
+type FaqItemProps = {
+  question: string;
+  answer: JSX.Element;
+};
+
+function FaqItem({ question, answer }: FaqItemProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="border-t border-gray-400 py-6">
+      <button
+        className="flex justify-between items-center w-full text-lg font-jetbrains"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className={`${isOpen ? "text-[#00629B]" : "text-black"}`}>{question}</div>
+        <img
+          src="/downArrow.svg"
+          className={`w-5 h-5 transition-transform duration-300 ease-in-out ${
+            isOpen ? "rotate-180" : "rotate-0"
+          }`}
+        />
+      </button>
+      {isOpen && <div className="mt-4 text-sm font-mono">{answer}</div>}
+    </div>
+  );
+}
+
+export function FaqPage() {
+  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 mb-8">
+          Frequently Asked Questions
+        </div>
+
+        <FaqItem
+          question="What is Low-Price Center?"
+          answer={
+            <div>
+              <p>We let you buy stuff for cheap at UCSD!</p>
+              <p className="mt-2">
+                Read more about Low-Price Center{" "}
+                <button className="font-bold" onClick={() => navigate("/about-us")}>
+                  Here
+                </button>
+              </p>
+            </div>
+          }
+        />
+
+        <FaqItem
+          question="Is Low-Price Center Officially Affiliated with UCSD?"
+          answer={
+            <p>
+              No, Low-Price Center is an independent entity and is not officially affiliated with
+              UCSD.
+            </p>
+          }
+        />
+        <FaqItem
+          question="Is Low-Price Center Officially Affiliated with UCSD?"
+          answer={
+            <p>
+              No, Low-Price Center is an independent entity and is not officially affiliated with
+              UCSD.
+            </p>
+          }
+        />
+        <FaqItem
+          question="Is Low-Price Center Officially Affiliated with UCSD?"
+          answer={
+            <p>
+              No, Low-Price Center is an independent entity and is not officially affiliated with
+              UCSD.
+            </p>
+          }
+        />
+        <FaqItem
+          question="Is Low-Price Center Officially Affiliated with UCSD?"
+          answer={
+            <p>
+              No, Low-Price Center is an independent entity and is not officially affiliated with
+              UCSD.
+            </p>
+          }
+        />
+        <FaqItem
+          question="Is Low-Price Center Officially Affiliated with UCSD?"
+          answer={
+            <p>
+              No, Low-Price Center is an independent entity and is not officially affiliated with
+              UCSD.
+            </p>
+          }
+        />
+        <FaqItem
+          question="How to Buy?"
+          answer={
+            <p>Visit our marketplace, contact sellers if interested, and then meet to purchase!</p>
+          }
+        />
+      </div>
+    </div>
+  );
+}