From 18f0d42da43c80bf384d81cb3c255c7dd4a3692f Mon Sep 17 00:00:00 2001
From: Rocktim Saikia <rocktimthedev@gmail.com>
Date: Sun, 22 Dec 2024 02:29:11 +0530
Subject: [PATCH] Add FAQs section

---
 biome.json                   |  3 ++
 client/components/Layout.tsx |  2 +-
 client/components/faq.tsx    | 98 ++++++++++++++++++++++++++++++++++++
 client/package.json          |  1 +
 client/pages/index.tsx       |  5 +-
 pnpm-lock.yaml               | 12 +++++
 6 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 client/components/faq.tsx

diff --git a/biome.json b/biome.json
index a79f55d..b998898 100644
--- a/biome.json
+++ b/biome.json
@@ -16,6 +16,9 @@
 			"style": {
 				"noUnusedTemplateLiteral": "off",
 				"useTemplate": "off"
+			},
+			"security": {
+				"noDangerouslySetInnerHtml": "off"
 			}
 		}
 	}
diff --git a/client/components/Layout.tsx b/client/components/Layout.tsx
index 6e10a1d..3e45fa1 100644
--- a/client/components/Layout.tsx
+++ b/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>
 	);
diff --git a/client/components/faq.tsx b/client/components/faq.tsx
new file mode 100644
index 0000000..326dd57
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/client/package.json b/client/package.json
index 247d10c..1b6fc8d 100644
--- a/client/package.json
+++ b/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"
 	}
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
index 5804c3f..e782176 100644
--- a/client/pages/index.tsx
+++ b/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>
 	);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f7a8c2d..de0a88f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,6 +105,9 @@ importers:
       postcss:
         specifier: ^8.4.18
         version: 8.4.38
+      schema-dts:
+        specifier: ^1.1.2
+        version: 1.1.2(typescript@4.8.4)
       tailwindcss:
         specifier: ^3.2.1
         version: 3.4.3
@@ -3722,6 +3725,11 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
+  schema-dts@1.1.2:
+    resolution: {integrity: sha512-MpNwH0dZJHinVxk9bT8XUdjKTxMYrA5bLtrrGmFA6PTLwlOKnhi67XoRd6/ty+Djt6ZC0slR57qFhZDNMI6DhQ==}
+    peerDependencies:
+      typescript: '>=4.1.0'
+
   scroll-into-view-if-needed@3.1.0:
     resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
 
@@ -8037,6 +8045,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  schema-dts@1.1.2(typescript@4.8.4):
+    dependencies:
+      typescript: 4.8.4
+
   scroll-into-view-if-needed@3.1.0:
     dependencies:
       compute-scroll-into-view: 3.1.0