FAQ

PagesReactTailwind

Accordion FAQ with smooth height transitions, single-open behavior, and keyboard-accessible disclosure.

FAQ Accordion

The free tier includes 1 project, community support, and 10K API requests per month. No credit card required to start.

Yes. Changes take effect at the start of your next billing cycle. Downgrades preserve all data; we never delete projects.

Yes. Students get 50% off Pro with a valid .edu email. Open-source maintainers receive Pro free for verified public repositories.

Data is stored in encrypted form (AES-256) across multiple regions. Enterprise plans support region pinning (US, EU, APAC, ID).

Starter uses community Discord. Pro receives email response within 24 hours. Enterprise gets a dedicated Slack channel and 1-hour SLA.

Enterprise customers can self-host on their own infrastructure with a deployment package. Docker Compose and Kubernetes Helm charts provided.

1 "use client";
2 
3 import { useState } from "react";
4 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
6 
7 type FAQItem = { question: string; answer: string };
8 
9 // Your data — swap these for your own questions + answers.
10 const items: FAQItem[] = [
11   {
12     question: "What is included in the free tier?",
13     answer: "1 project, community support, 10K API requests/month. No card required.",
14   },
15   {
16     question: "Can I upgrade or downgrade my plan anytime?",
17     answer: "Yes. Changes take effect at next billing cycle. Downgrades preserve all data.",
18   },
19   // ... more items
20 ];
21 
22 export function FAQ() {
23   const [openIndex, setOpenIndex] = useState<number | null>(0);
24 
25   return (
26     <div className="divide-y divide-border bg-card rounded-lg border">
27       {items.map((item, i) => {
28         const isOpen = openIndex === i;
29         return (
30           <div key={item.question}>
31             <button
32               type="button"
33               className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left"
34               onClick={() => setOpenIndex(isOpen ? null : i)}
35               aria-expanded={isOpen}
36             >
37               <span className="text-foreground text-sm font-medium">{item.question}</span>
38               <FontAwesomeIcon
39                 icon={faChevronDown}
40                 className={`text-muted-foreground h-3 w-3 shrink-0 transition-transform duration-200 ${
41                   isOpen ? "rotate-180" : ""
42                 }`}
43               />
44             </button>
45             {/* CSS grid trick for height transition */}
46             <div
47               className={`grid transition-all duration-200 ${
48                 isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
49               }`}
50             >
51               <div className="overflow-hidden">
52                 <p className="text-muted-foreground px-4 pb-4 text-sm">{item.answer}</p>
53               </div>
54             </div>
55           </div>
56         );
57       })}
58     </div>
59   );
60 }

1	"use client";
2
3	import { useState } from "react";
4	import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
5	import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
6
7	type FAQItem = { question: string; answer: string };
8
9	// Your data — swap these for your own questions + answers.
10	const items: FAQItem[] = [
11	{
12	question: "What is included in the free tier?",
13	answer: "1 project, community support, 10K API requests/month. No card required.",
14	},
15	{
16	question: "Can I upgrade or downgrade my plan anytime?",
17	answer: "Yes. Changes take effect at next billing cycle. Downgrades preserve all data.",
18	},
19	// ... more items
20	];
21
22	export function FAQ() {
23	const [openIndex, setOpenIndex] = useState<number \| null>(0);
24
25	return (
26	<div className="divide-y divide-border bg-card rounded-lg border">
27	{items.map((item, i) => {
28	const isOpen = openIndex === i;
29	return (
30	<div key={item.question}>
31	<button
32	type="button"
33	className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 px-4 py-3.5 text-left"
34	onClick={() => setOpenIndex(isOpen ? null : i)}
35	aria-expanded={isOpen}
36	>
37	<span className="text-foreground text-sm font-medium">{item.question}</span>
38	<FontAwesomeIcon
39	icon={faChevronDown}
40	className={`text-muted-foreground h-3 w-3 shrink-0 transition-transform duration-200 ${
41	isOpen ? "rotate-180" : ""
42	}`}
43	/>
44	</button>
45	{/* CSS grid trick for height transition */}
46	<div
47	className={`grid transition-all duration-200 ${
48	isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
49	}`}
50	>
51	<div className="overflow-hidden">
52	<p className="text-muted-foreground px-4 pb-4 text-sm">{item.answer}</p>
53	</div>
54	</div>
55	</div>
56	);
57	})}
58	</div>
59	);
60	}