basic faq layout, no accordion

Author: claratu2

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import About from "@/app/About";
 import Catalog from "@/app/Catalog";
 import Landing from "@/app/Landing";
 import Layout from "@/app/Layout";
+import FAQ from "@/app/FAQ";
 
 const router = createBrowserRouter([
   {
@@ -52,6 +53,15 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    element: <Layout footer={false} />,
+    children: [
+      {
+        element: <FAQ />,
+        path: "/faq",
+      },
+    ],
+  },
 ]);
 
 export default function App() {

frontend/src/app/FAQ/FAQ.module.scss

@@ -0,0 +1,61 @@
+.root {
+  display: flex;
+  flex-direction: column;
+
+  .container {
+    margin-top: 2rem;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+
+  .text {
+    width: 512px;
+    flex-shrink: 0;
+    margin-left: auto;
+    margin-right: auto;
+
+    .link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--blue-500);
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 1;
+      transition: all 100ms ease-in-out;
+
+      &:hover {
+        color: var(--blue-600);
+      }
+    }
+
+    .heading {
+      font-size: 32px;
+      font-weight: 660;
+      font-feature-settings:
+        "cv05" on,
+        "cv13" on,
+        "ss07" on,
+        "cv12" on,
+        "cv06" on;
+      line-height: 1.25;
+      letter-spacing: -1%;
+      margin-bottom: 16px;
+      color: var(--slate-900);
+    }
+
+    .description {
+      font-size: 16px;
+      line-height: 1.5;
+      margin-bottom: 32px;
+      color: var(--slate-500);
+    }
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}

frontend/src/app/FAQ/index.tsx

@@ -0,0 +1,26 @@
+import Button from "@/components/Button";
+import Footer from "@/components/Footer";
+
+import styles from "./FAQ.module.scss";
+
+const FAQ = () => {
+  return (
+    <div className={styles.root}>
+      <div className={styles.container}>
+        <div className={styles.text}>
+          <h1 className={styles.heading}>Frequently Asked Questions</h1>
+          <h2 className={styles.description}>
+            Answering your most commonly asked questions.
+          </h2>
+          <Button children={"Contact Us"} className={styles.container} />
+        </div>
+      </div>
+      {/* ADD ACCORDION ITEMS */}
+      <div className={styles.footer}>
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;

frontend/src/components/Accordion/Accordion.module.scss

@@ -0,0 +1,33 @@
+import { ComponentPropsWithRef, ElementType, useState } from 'react';
+
+import classNames from "classnames";
+
+import styles from "./Accordion.module.scss";
+
+// export default function Button<T extends ElementType = "button">({
+//     active,
+//     children,
+//     className,
+//     secondary,
+//     as,
+//     ...props
+//   }: ButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>) {
+//     const Component = as ?? "button";
+  
+//     return (
+//       <Component
+//         className={classNames(
+//           styles.root,
+//           {
+//             [styles.active]: active,
+//             [styles.secondary]: secondary,
+//           },
+//           className
+//         )}
+//         {...props}
+//       >
+//         {children}
+//       </Component>
+//     );
+//   }
+