Template
29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
|
|
|
export type FaqProps = {
|
|
heading?: string;
|
|
description?: string;
|
|
items?: Array<{ question: string; answer: string }>;
|
|
};
|
|
|
|
export default function Faq({ heading = '', description = '', items = [] }: FaqProps) {
|
|
return (
|
|
<section id="faq" className="scroll-mt-20 bg-background py-20 sm:py-28">
|
|
<div className="section-shell">
|
|
<div className="max-w-4xl">
|
|
<h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
|
|
{description && <p className="mt-4 max-w-2xl leading-7 text-muted-foreground">{description}</p>}
|
|
</div>
|
|
<Accordion type="single" collapsible className="mt-12 border-t">
|
|
{items.map((item, index) => (
|
|
<AccordionItem key={index} value={`faq-${index}`}>
|
|
<AccordionTrigger className="py-7 text-2xl font-normal sm:py-8 sm:text-3xl">{item.question}</AccordionTrigger>
|
|
<AccordionContent className="max-w-3xl pb-8 text-base leading-7 text-muted-foreground">{item.answer}</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|