refactor: use Tailwind classes for FAQ.tsx

Author: waalbert

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

@@ -11,8 +11,7 @@ export default function Home() {
 	) : (
 		<>
 			<Landing />
-			{/* @ts-expect-error Async Server Component */}
-			<FAQ type="single" />
+			<FAQ/>
 		</>
 	);
 }

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

@@ -1,37 +1,11 @@
-.faq {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	width: 80%;
-
-	padding-bottom: 1.875rem;
-}
-
 .container {
-	padding-top: 6rem;
-	padding-bottom: 6rem;
-	display: flex;
-	justify-content: center;
 	background-image: url("~@/assets/backgrounds/faq-background-mobile.svg");
-	background-position: center top;
-	background-size: cover;
-	background-repeat: no-repeat;
 }
 
 .title {
-	color: #fffce2;
-	margin-top: 1.5rem;
-	margin-bottom: 1.5rem;
-	font-size: 2.25rem;
-	text-align: center;
 	text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
 }
 
-.body {
-	margin-left: 40px;
-	margin-right: 10px;
-}
-
 @media (min-width: 640px) {
 	.container {
 		background-image: url("~@/assets/backgrounds/faq-background.svg");

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

@@ -13,10 +13,10 @@ const FAQ = async () => {
 	}));
 
 	return (
-		<section className={styles.container}>
-			<div className={styles.faq}>
+		<section className={`${styles.container} 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={`font-display sm:!text-[4.5rem] ${styles.title}`}
+					className={`${styles.title} my-6 font-display sm:!text-[4.5rem] text-[#fffce2] text-4xl text-center`}
 				>
 					FAQ
 				</h2>