Setup FAQ (#23)

* feat: add accordions

* feat: add background

* refactor: use tailwind for media queries

* fix: type errors in Accordion.tsx

* refactor: use Tailwind classes for FAQ.tsx

* fix: accordion trigger text causing open button to be misaligned

* fix: create faq background natively with css

* remove nested css

* remove unnecessary FAQ/index.ts

* fix: remove unnecessary parts of code and add margin between Mentor and FAQ section

* fix: remove temporary type fix in tsconfig

* fix: decrease FAQ font size

* fix: overflow x

apps/site/package.json

@@ -1,42 +1,45 @@
 {
-  "name": "site",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@react-three/drei": "^9.88.11",
-    "@react-three/fiber": "^8.15.10",
-    "@types/three": "^0.158.1",
-    "clsx": "^2.0.0",
-    "lucide-react": "^0.292.0",
-    "next": "13.5.6",
-    "react": "^18",
-    "react-dom": "^18",
-    "three": "^0.158.0",
-    "tunnel-rat": "^0.1.2"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.6",
-    "postcss": "^8",
-    "postcss-nesting": "^12.0.1",
-    "sass": "^1.69.5",
-    "tailwindcss": "^3",
-    "typescript": "^5"
-  }
+	"name": "site",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@portabletext/react": "^3.0.11",
+		"@radix-ui/react-accordion": "^1.1.2",
+		"@radix-ui/react-checkbox": "^1.0.4",
+		"@radix-ui/react-navigation-menu": "^1.1.4",
+		"@radix-ui/react-select": "^2.0.0",
+		"@radix-ui/react-tabs": "^1.0.4",
+		"@radix-ui/react-toast": "^1.1.5",
+		"@react-three/drei": "^9.88.14",
+		"@react-three/fiber": "^8.15.11",
+		"@types/three": "^0.158.2",
+		"clsx": "^2.0.0",
+		"lucide-react": "^0.292.0",
+		"next": "13.5.6",
+		"next-sanity": "^5.5.4",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"three": "^0.158.0",
+		"tunnel-rat": "^0.1.2",
+		"zod": "^3.22.4"
+	},
+	"devDependencies": {
+		"@types/node": "^20.9.0",
+		"@types/react": "^18.2.37",
+		"@types/react-dom": "^18.2.15",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.53.0",
+		"eslint-config-next": "13.5.6",
+		"postcss": "^8.4.31",
+		"postcss-nesting": "^12.0.1",
+		"sass": "^1.69.5",
+		"tailwindcss": "^3.3.5",
+		"typescript": "^5.2.2"
+	}
 }

apps/site/src/app/(home)/page.tsx

@@ -1,4 +1,6 @@
-import { About, Landing, MentorVolunteer } from "./sections";
+import { About, Landing, MentorVolunteer, FAQ } from "./sections";
+
+export const revalidate = 60;
 
 export default function Home() {
 	// Show landing section only if still in maintenance,
@@ -10,6 +12,7 @@ export default function Home() {
 			<Landing />
 			<About />
 			<MentorVolunteer />
+			<FAQ />
 		</>
 	);
 }

apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss

@@ -0,0 +1,23 @@
+.container {
+	background: radial-gradient(
+			50% 50% at 50% 50%,
+			#2c1909 58.33%,
+			#422810 100%
+		),
+		#aa5315;
+}
+
+.title {
+	text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
+}
+
+@media (min-width: 640px) {
+	.container {
+		background-image: linear-gradient(
+			180deg,
+			#432810 0.32%,
+			#2b1809 52.42%,
+			#442911 100%
+		);
+	}
+}

apps/site/src/app/(home)/sections/FAQ/FAQ.tsx

@@ -0,0 +1,31 @@
+import { getQuestions } from "./getQuestions";
+import FAQAccordion from "./FAQAccordion";
+
+import { PortableText } from "@portabletext/react";
+import styles from "./FAQ.module.scss";
+
+const FAQ = async () => {
+	const questions = await getQuestions();
+	const faq = questions[0]["faqs"].map(({ _key, question, answer }) => ({
+		_key,
+		question: <strong className="w-10/12">{question}</strong>,
+		answer: <PortableText value={answer} />,
+	}));
+
+	return (
+		<section
+			className={`${styles.container} rounded-[500rem/20rem] py-24 flex justify-center bg-no-repeat bg-cover bg-center bg-top`}
+		>
+			<div className="relative flex flex-col w-4/5 pb-7">
+				<h2
+					className={`${styles.title} my-6 font-display sm:text-[3rem] text-[#fffce2] text-4xl text-center`}
+				>
+					FAQ
+				</h2>
+				<FAQAccordion faq={faq} />
+			</div>
+		</section>
+	);
+};
+
+export default FAQ;

apps/site/src/app/(home)/sections/FAQ/FAQAccordion.tsx

@@ -0,0 +1,24 @@
+import { Root, Item, Trigger, Content } from "@/lib/components/Accordion";
+
+interface FAQAccordion {
+	faq: {
+		_key: string;
+		question: JSX.Element;
+		answer: JSX.Element;
+	}[];
+}
+
+const FAQAccordion: React.FC<FAQAccordion> = ({ faq }) => {
+	return (
+		<Root className="font-body" type="single" collapsible>
+			{faq.map(({ _key, question, answer }) => (
+				<Item key={_key} value={_key}>
+					<Trigger className="sm:!text-[1.5rem]">{question}</Trigger>
+					<Content>{answer}</Content>
+				</Item>
+			))}
+		</Root>
+	);
+};
+
+export default FAQAccordion;

apps/site/src/app/(home)/sections/FAQ/getQuestions.ts

@@ -0,0 +1,42 @@
+import { z } from "zod";
+import { cache } from "react";
+import { client } from "@/lib/sanity/client";
+import { SanityDocument } from "@/lib/sanity/types";
+
+const Questions = z.array(
+	SanityDocument.extend({
+		faqs: z.array(
+			z.object({
+				answer: z.array(
+					z.object({
+						_key: z.string(),
+						markDefs: z.array(
+							z.object({
+								_type: z.string(),
+								href: z.optional(z.string()),
+								_key: z.string(),
+							}),
+						),
+						children: z.array(
+							z.object({
+								text: z.string(),
+								_key: z.string(),
+								_type: z.literal("span"),
+								marks: z.array(z.string()),
+							}),
+						),
+						_type: z.literal("block"),
+						style: z.literal("normal"),
+					}),
+				),
+				question: z.string(),
+				_type: z.literal("faq"),
+				_key: z.string(),
+			}),
+		),
+	}),
+);
+
+export const getQuestions = cache(async () => {
+	return Questions.parse(await client.fetch("*[_type == 'faqs']"));
+});

apps/site/src/app/(home)/sections/MentorVolunteer/MentorVolunteer.tsx

@@ -4,7 +4,7 @@ import stand2 from "./stand-2.png";
 
 const MentorVolunteer = () => {
 	return (
-		<div className="grid max-w-lg lg:max-w-none lg:grid-cols-[repeat(2,450px)] lg:items-stretch justify-center m-auto gap-y-8 gap-x-24 mt-24 pl-3 pr-4">
+		<div className="grid max-w-lg lg:max-w-none lg:grid-cols-[repeat(2,450px)] lg:items-stretch justify-center m-auto gap-y-8 gap-x-24 my-24 pl-3 pr-4">
 			<Stand
 				imageSrc={stand1}
 				header="Apply to be a Mentor"

apps/site/src/app/(home)/sections/index.ts

@@ -1,3 +1,4 @@
 export { default as Landing } from "./Landing/Landing";
 export { default as About } from "./About/About";
 export { default as MentorVolunteer } from "./MentorVolunteer/MentorVolunteer";
+export { default as FAQ } from "./FAQ/FAQ";

apps/site/src/components/dom/Layout.tsx

@@ -13,7 +13,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
 				position: "relative",
 				width: " 100%",
 				height: "100%",
-				overflow: "auto",
+				overflowX: "hidden",
 				touchAction: "auto",
 			}}
 		>

apps/site/src/lib/components/Accordion/Accordion.module.scss

@@ -1,9 +1,9 @@
 .root {
-	color: black;
+	color: #fffce2;
 }
 
 .item {
-	border-bottom: 2px #36352f solid;
+	border-bottom: 2px #fffce2 solid;
 }
 
 .trigger {
@@ -12,14 +12,15 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background-color: #fff;
+	background-color: transparent;
 
-	font-size: 24px;
+	font-size: 1.25rem;
+	text-align: left;
 	font-weight: 700;
 	line-height: 150%; /* 36px */
 
 	.icons {
-		$icon-size: 24px;
+		$icon-size: 1.5rem;
 
 		position: relative;
 		width: $icon-size;
@@ -44,13 +45,16 @@
 }
 
 .content {
-	font-size: 20px;
 	font-weight: 500;
-	line-height: 125%;
+	line-height: 1.5625rem; /* 125% */
 	overflow: hidden;
 
+	p {
+		font-size: 1rem;
+	}
+
 	.contentPadding {
-		padding-bottom: 24px;
+		padding-bottom: 1.25rem;
 	}
 
 	@keyframes slideDown {
@@ -78,3 +82,9 @@
 		animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
 	}
 }
+
+@media (min-width: 640px) {
+	.content p {
+		font-size: 1.25rem;
+	}
+}

apps/site/src/lib/sanity/client.ts

@@ -0,0 +1,12 @@
+import { createClient } from "next-sanity";
+
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET;
+const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION;
+
+export const client = createClient({
+	projectId,
+	dataset,
+	apiVersion,
+	useCdn: true,
+});

apps/site/src/lib/sanity/types.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+export const SanityDocument = z.object({
+	_id: z.string(),
+	_createdAt: z.string().datetime(),
+	_updatedAt: z.string().datetime(),
+	_rev: z.string(),
+});
+
+export const SanityReference = z.object({
+	_type: z.literal("reference"),
+	_ref: z.string(),
+});
+export const SanityImageCrop = z.object({
+	_type: z.literal("sanity.imageCrop"),
+	top: z.number(),
+	bottom: z.number(),
+	left: z.number(),
+	right: z.number(),
+});
+export const SanityImageHotspot = z.object({
+	_type: z.literal("sanity.imageHotspot"),
+	x: z.number(),
+	y: z.number(),
+	height: z.number(),
+	width: z.number(),
+});
+export const SanityImageReference = z.object({
+	_type: z.literal("image"),
+	asset: SanityReference,
+	crop: SanityImageCrop.optional(),
+	hotspot: SanityImageHotspot.optional(),
+});