diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2b10f6dfd..578ea7f05 100644
--- a/frontend/src/App.tsx
+++ b/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: ,
+ children: [
+ {
+ element: ,
+ path: "/faq",
+ },
+ ],
+ },
]);
export default function App() {
diff --git a/frontend/src/app/FAQ/FAQ.module.scss b/frontend/src/app/FAQ/FAQ.module.scss
new file mode 100644
index 000000000..ca846ffb5
--- /dev/null
+++ b/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%;
+ }
+}
diff --git a/frontend/src/app/FAQ/index.tsx b/frontend/src/app/FAQ/index.tsx
new file mode 100644
index 000000000..b58a42106
--- /dev/null
+++ b/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 (
+
+
+
+
Frequently Asked Questions
+
+ Answering your most commonly asked questions.
+
+
+
+
+ {/* ADD ACCORDION ITEMS */}
+
+
+
+
+ );
+};
+
+export default FAQ;
diff --git a/frontend/src/components/Accordion/Accordion.module.scss b/frontend/src/components/Accordion/Accordion.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/components/Accordion/index.tsx b/frontend/src/components/Accordion/index.tsx
new file mode 100644
index 000000000..71f91913d
--- /dev/null
+++ b/frontend/src/components/Accordion/index.tsx
@@ -0,0 +1,33 @@
+import { ComponentPropsWithRef, ElementType, useState } from 'react';
+
+import classNames from "classnames";
+
+import styles from "./Accordion.module.scss";
+
+// export default function Button({
+// active,
+// children,
+// className,
+// secondary,
+// as,
+// ...props
+// }: ButtonProps & Omit, keyof ButtonProps>) {
+// const Component = as ?? "button";
+
+// return (
+//
+// {children}
+//
+// );
+// }
+
\ No newline at end of file