feature/faq (#428)

* FAQ done

* Revert pnpm-lock.yaml

* Add rest of files

* Clean up FAQ code

* Minor styling changes

* Fix misspellings in FAQ section

* Refactor FAQ code

* Change FAQ desktop view to appear at lg breakpoint instead of sm

* Fix dialogue box sizes

* Change spacing on FAQ section

* FAQ apply prettier suggestions

* Replace opacity classes with hidden for web accessibility

* Remove duration class from FAQ

* FAQ prettier changes

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

@@ -1,8 +1,22 @@
+import Image from "next/image";
+
 import { getQuestions } from "./getQuestions";
-import FAQAccordion from "./FAQAccordion";
+import FAQAccordionMobile from "./FAQAccordionMobile";
+import FAQAccordionDesktop from "./FAQAccordionDesktop";
 
 import { PortableText } from "@portabletext/react";
-import styles from "./FAQ.module.scss";
+import sprite from "./assets/sprite.png";
+import organizerTitle from "./assets/organizer-title.png";
+
+export interface FAQAccordion {
+	faq: FAQ[];
+}
+
+export interface FAQ {
+	_key: string;
+	question: JSX.Element;
+	answer: JSX.Element;
+}
 
 const FAQ = async () => {
 	const questions = await getQuestions();
@@ -13,16 +27,39 @@ const FAQ = async () => {
 	}));
 
 	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
+		<section className="flex justify-center bg-no-repeat bg-cover bg-top mt-20 lg:mt-40">
+			<div className="relative flex flex-col w-4/5 pb-7 justify-center">
+				<h2 className="my-6 font-display text-white text-4xl sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl text-center">
+					Frequently Asked Questions
 				</h2>
-				<FAQAccordion faq={faq} />
+				<div className="mt-8 lg:mt-0 lg:flex lg:gap-6 lg:items-center lg:justify-center">
+					<div className="lg:flex lg:gap-3 lg:gap-[40px] lg:items-center">
+						<div className="flex justify-center items-center h-fit">
+							<Image
+								src={sprite}
+								alt="Wise anteater"
+								className={`
+									h-fit mt-[-30px] w-[250px] duration-300
+									sm:w-[300px] sm:min-w-[300px]
+									md:w-[400px] md:min-w-[400px]
+									lg:w-[240px] lg:min-w-[240px]
+									xl:w-[300px] xl:min-w-[300px]
+								`}
+							/>
+							<Image
+								src={organizerTitle}
+								alt="Wise anteater title"
+								className={`
+									hidden absolute lg:block h-fit duration-300
+									w-40 md:w-48 lg:w-60 xl:w-72
+									sm:top-[270px] md:top-[290px] lg:top-[330px] xl:top-[380px]
+								`}
+							/>
+						</div>
+						<FAQAccordionDesktop faq={faq} />
+						<FAQAccordionMobile faq={faq} />
+					</div>
+				</div>
 			</div>
 		</section>
 	);

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

@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+
+import ListItemButton from "./components/ListItemButton";
+import TriangleIcon from "./components/TriangleIcon";
+import { FAQAccordion, FAQ } from "./FAQ";
+
+import SpeechDesktop from "./assets/speech-desktop.svg";
+
+const FAQAccordionDesktop: React.FC<FAQAccordion> = ({ faq }) => {
+	const faqGroup1 = faq.slice(0, 8);
+	const faqGroup2 = faq.slice(8);
+
+	const [page1Selected, setPage1Selected] = useState<boolean>(true);
+
+	const [focusedQuestion, setFocusedQuestion] = useState<null | FAQ>(null);
+
+	return (
+		<div className="flex flex-1 justify-center lg:h-auto mt-16 lg:mt-8 mb-[-250px] lg:mb-0">
+			{/* Desktop View */}
+			<Image
+				src={SpeechDesktop}
+				alt="Dialogue box background"
+				className="hidden lg:block h-fit lg:max-w-[630px] lg:h-[310px] xl:max-w-[775px] xl:h-[350px]"
+			/>
+			<div className="hidden lg:block absolute lg:w-[555px] xl:w-[685px] lg:text-[.85rem] xl:text-[1rem] mt-3">
+				{/* Page 1 focused */}
+				<div
+					className={`absolute w-full ${
+						page1Selected && !focusedQuestion
+							? "z-50"
+							: "hidden pointer-events-none"
+					}`}
+				>
+					{faqGroup1.map((F) => (
+						<ListItemButton
+							key={F._key}
+							onClick={() => setFocusedQuestion(F)}
+							text={F.question}
+							inverted={false}
+							className="mb-0 py-[2px]"
+						/>
+					))}
+					<div className="flex justify-end w-full ms-3">
+						<button
+							type="button"
+							onClick={() => {
+								setPage1Selected(false);
+							}}
+							className={`flex items-center opacity-100 hover:bg-white hover:text-black p-[1px] px-[3px] duration-200 group`}
+						>
+							Page 1/2
+							<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
+							<TriangleIcon
+								className={`ms-2 absolute hidden group-hover:block duration-200 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+								dark
+							/>
+							<TriangleIcon
+								className={`ms-2 absolute group-hover:hidden duration-200 right-[-7px] lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+							/>
+						</button>
+					</div>
+				</div>
+
+				{/* Page 2 focused */}
+				<div
+					className={`absolute ${
+						!page1Selected && !focusedQuestion
+							? "z-50"
+							: "hidden pointer-events-none"
+					}`}
+				>
+					{faqGroup2.map((F) => (
+						<ListItemButton
+							key={F._key}
+							onClick={() => setFocusedQuestion(F)}
+							text={F.question}
+							inverted={false}
+							className="mb-0 py-[2px]"
+						/>
+					))}
+					<div className="flex justify-end ms-3 w-full">
+						<button
+							type="button"
+							onClick={() => {
+								setPage1Selected(true);
+							}}
+							className={`absolute flex items-center mt-4 group hover:bg-white hover:text-black p-[1px] px-[3px] xl:mt-4 duration-200 `}
+						>
+							<TriangleIcon className="ms-2 opacity-0 lg:w-4 lg:h-4 xl:w-5 xl:h-5" />
+							<TriangleIcon
+								className={`ms-2 absolute hidden group-hover:block duration-200 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+								dark
+							/>
+							<TriangleIcon
+								className={`ms-2 absolute group-hover:hidden duration-200 left-[-5px] rotate-180 lg:w-4 lg:h-4 xl:w-5 xl:h-5`}
+							/>
+							Page 2/2
+						</button>
+					</div>
+				</div>
+
+				{/* Question is focused. */}
+				<div
+					className={`${
+						focusedQuestion ? "z-50" : "hidden pointer-events-none"
+					} absolute lg:h-[250px] xl:h-[285px]`}
+				>
+					<div>
+						<ListItemButton
+							onClick={() => setFocusedQuestion(null)}
+							className="mb-2 py-[2px]"
+							text={focusedQuestion?.question}
+							rotate="rotate-90"
+							inverted
+						/>
+
+						<p className="ms-2">{focusedQuestion?.answer}</p>
+					</div>
+
+					<div className="absolute bottom-0">
+						<ListItemButton
+							onClick={() => setFocusedQuestion(null)}
+							className="py-[2px] min-w-[175px] xl:min-w-[200px]"
+							text="Ask another question"
+							rotate="rotate-180"
+							inverted={false}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default FAQAccordionDesktop;

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

@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+
+import ListItemButton from "./components/ListItemButton";
+import { FAQAccordion, FAQ } from "./FAQ";
+
+import SpeechMobile from "./assets/speech-mobile.svg";
+
+const FAQAccordionMobile: React.FC<FAQAccordion> = ({ faq }) => {
+	const [focusedQuestion, setFocusedQuestion] = useState<null | FAQ>(null);
+
+	return (
+		<div className="flex flex-1 justify-center lg:h-auto mt-60 lg:mt-8 mb-[-250px] lg:mb-0 sm:text-lg md:text-xl">
+			{/* Changes size of parent component */}
+			<div
+				className={`z-0 ${
+					focusedQuestion ? "h-[520px]" : "h-[965px] sm:h-[940px] md:h-[1030px]"
+				} duration-200 transition-transform lg:hidden`}
+			/>
+			<div className="relative flex justify-center lg:hidden">
+				<Image
+					src={SpeechMobile}
+					alt="Dialogue box background"
+					className={`${
+						focusedQuestion
+							? "mt-[-160px] sm:mt-[-120px] sm:max-h-[620px]"
+							: "mt-[-275px] md:mt-[-300px]"
+					} min-w-[450px] sm:min-w-[600px] md:min-w-[750px] object-fill`}
+					layout="responsive"
+				/>
+
+				{/* No question is focused. */}
+				<div
+					className={`${
+						focusedQuestion ? "hidden pointer-events-none" : "z-50"
+					} duration-200 w-[325px] sm:w-[450px] md:w-[560px] absolute mx-4 mt-2 h-fit`}
+				>
+					<div>
+						{faq.map((F) => (
+							<ListItemButton
+								key={F._key}
+								onClick={() => setFocusedQuestion(F)}
+								text={F.question}
+								className="md:p-2"
+								inverted={false}
+							/>
+						))}
+					</div>
+				</div>
+
+				{/* Question is focused. */}
+				<div
+					className={`${
+						focusedQuestion ? "z-50" : "hidden pointer-events-none"
+					} duration-200 absolute w-[325px] sm:w-[450px] md:w-[570px] h-[350px] sm:h-[325px] mt-2 sm:mt-8`}
+				>
+					<ListItemButton
+						onClick={() => setFocusedQuestion(null)}
+						className="mb-3"
+						text={focusedQuestion?.question}
+						rotate="rotate-90"
+						inverted
+					/>
+
+					<p>{focusedQuestion?.answer}</p>
+
+					<div className="-bottom-2 absolute">
+						<ListItemButton
+							onClick={() => setFocusedQuestion(null)}
+							text="Ask another question"
+							rotate="rotate-180"
+							inverted={false}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default FAQAccordionMobile;