Ghost

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7 
8const faqs = [
9  {
10    q: 'What payment methods do you accept?',
11    a: 'All major credit cards, plus PayPal and bank transfer on annual plans.',
12  },
13  {
14    q: 'Do you offer student discounts?',
15    a: 'Yes — verified students and educators get 50% off any paid plan.',
16  },
17  {
18    q: 'Can I export my data?',
19    a: 'Export everything to JSON or CSV at any time, with no lock-in.',
20  },
21]
22 
23export function Accordion12() {
24  return (
25    <Accordion className="w-full max-w-md">
26      {faqs.map((faq, index) => (
27        <AccordionItem
28          key={faq.q}
29          value={`item-${index}`}
30          className="border-b-0"
31        >
32          <AccordionTrigger className="aria-expanded:text-primary py-3 hover:no-underline">
33            {faq.q}
34          </AccordionTrigger>
35          <AccordionContent className="text-muted-foreground">
36            {faq.a}
37          </AccordionContent>
38        </AccordionItem>
39      ))}
40    </Accordion>
41  )
42}