Add FAQs section

biome.json

@@ -16,6 +16,9 @@
 			"style": {
 				"noUnusedTemplateLiteral": "off",
 				"useTemplate": "off"
+			},
+			"security": {
+				"noDangerouslySetInnerHtml": "off"
 			}
 		}
 	}

client/components/Layout.tsx

@@ -52,7 +52,7 @@ export default function Layout({ children, metaInfo }: Props) {
 			</Head>
 			<HelloBar />
 			<Navbar />
-			<main>{children}</main>
+			<main className="container relative max-w-4xl px-2 py-10 lg:mx-auto">{children}</main>
 			<Footer />
 		</div>
 	);

client/components/faq.tsx

@@ -0,0 +1,98 @@
+import { Heading, Link } from "@radix-ui/themes";
+import { useId } from "react";
+import type { FAQPage, WithContext } from "schema-dts";
+
+const BMAC_CTA = (
+	<Link href="https://buymeacoffee.com/animechan_api" target="_blank" underline="always">
+		Buy Me A Coffee
+	</Link>
+);
+
+interface IFaq {
+	question: string;
+	answer: React.ReactChild;
+	jsonLdAnswer?: string;
+}
+
+function generateFaqSchema(faqs: IFaq[]) {
+	const mainEntity = faqs.map((faq) => ({
+		"@type": "Question",
+		name: faq.question,
+		acceptedAnswer: {
+			"@type": "Answer",
+			text: faq?.jsonLdAnswer || faq.answer,
+		},
+	}));
+	const jsonLd: WithContext<FAQPage> = {
+		"@context": "https://schema.org",
+		"@type": "FAQPage",
+		mainEntity,
+	};
+	return jsonLd;
+}
+
+export default function Faq() {
+	const FAQs: IFaq[] = [
+		{
+			question: "What is Animechan API and what anime data does it provide?",
+			answer:
+				"Animechan is a comprehensive anime quotes and information API service that provides developers with access to a curated database of anime content. Our API delivers episode counts, detailed show summaries, character information, and memorable quotes from thousands of anime series. You can easily filter and search quotes by specific anime titles or character names, making it perfect for anime-focused applications and websites.",
+		},
+		{
+			question: "Is Animechan API free to use? What are the pricing options?",
+			answer:
+				"Animechan offers both free and premium API access. The free tier includes essential features with standard rate limits for developers. Our premium version provides increased rate limits, priority access, and additional API endpoints through a dedicated API key. The premium features are designed for applications requiring higher usage limits and enhanced capabilities.",
+		},
+		{
+			question: "How do I upgrade to Animechan Premium and get an API key?",
+			answer: (
+				<>
+					To access Animechan Premium, simply subscribe to our monthly membership plan through our{" "}
+					{BMAC_CTA} page. Once subscribed, we'll provide you with a unique API key for accessing
+					premium endpoints and features. Please note that this is a recurring monthly subscription,
+					not a one-time payment. Visit our{" "}
+					<Link href="/get-premium" underline="always">
+						/get-premium
+					</Link>{" "}
+					page for detailed pricing information and subscription benefits.
+				</>
+			),
+			jsonLdAnswer:
+				"To access Animechan Premium, simply subscribe to our monthly membership plan through our {BMAC_CTA} page. Once subscribed, we'll provide you with a unique API key for accessing premium endpoints and features. Please note that this is a recurring monthly subscription, not a one-time payment. Visit our /get-premium page for detailed pricing information and subscription benefits.",
+		},
+		{
+			question: "What is Animechan's subscription cancellation policy?",
+			answer: (
+				<>
+					You can cancel your Animechan Premium subscription at any time through your{" "}
+					<span className="font-medium">“Buy Me A Coffee”</span> account settings. Upon
+					cancellation, your premium API key access will be automatically revoked
+				</>
+			),
+			jsonLdAnswer:
+				"You can cancel your Animechan Premium subscription at any time through your “Buy Me A Coffee” account settings. Upon cancellation, your premium API key access will be automatically revoked",
+		},
+	];
+
+	const jsonLd = generateFaqSchema(FAQs);
+
+	return (
+		<article className="flex flex-col space-y-10 text-[#2b2929] mt-16 px-2">
+			{/* Schema.org FAQ markup */}
+			<script
+				type="application/ld+json"
+				dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+			/>
+
+			<Heading as="h3">Frequently Asked Questions:</Heading>
+			{FAQs.map(({ question, answer }) => (
+				<section key={useId()}>
+					<h4 className="font-semibold text-lg">{question}</h4>
+					<div>
+						<p>{answer}</p>
+					</div>
+				</section>
+			))}
+		</article>
+	);
+}

client/package.json

@@ -39,6 +39,7 @@
 		"@types/stringify-object": "^4.0.1",
 		"autoprefixer": "^10.4.12",
 		"postcss": "^8.4.18",
+		"schema-dts": "^1.1.2",
 		"tailwindcss": "^3.2.1",
 		"typescript": "4.8.4"
 	}

client/pages/index.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { Element } from "react-scroll";
 import stringifyObject from "stringify-object";
 import CodeBlock from "~/components/codeblock";
+import Faq from "~/components/faq";
 import Layout from "~/components/Layout";
 import { SPLITBEE_EVENTS } from "~/constants/common";
 import type { CodeBlock as CodeBlockType, Quote } from "~/types";
@@ -68,7 +69,7 @@ export default function Home() {
 			</Section>
 
 			<Element name="tryThis">
-				<div className="container relative max-w-4xl px-2 py-10 lg:mx-auto">
+				<div className="relative py-10">
 					<Text size="6" weight="medium" as="p">
 						Try here:
 					</Text>
@@ -100,6 +101,8 @@ export default function Home() {
 					<CodeBlock {...responseCodeBlock} />
 				</div>
 			</Element>
+
+			<Faq />
 		</Layout>
 	);
 }