FAQ

Frequently asked questions with accordion.

Usage

import { FAQ } from '@/components/landing';

<FAQ />

Location: src/components/landing/FAQ.tsx

Features

• Accordion-based Q&A
• Smooth expand/collapse animations
• Contact CTA at bottom
• Uses Radix UI Accordion primitive

Customization

Edit the faqs array in FAQ.tsx:

const faqs: FAQItem[] = [
  { questionKey: 'q1.question', answerKey: 'q1.answer' },
  { questionKey: 'q2.question', answerKey: 'q2.answer' },
  // Add more...
];

i18n

Update translations in src/locales/en.json:

{
  "landing": {
    "faq": {
      "title": "Frequently Asked Questions",
      "subtitle": "Find answers to common questions",
      "q1": {
        "question": "What is Starterbase?",
        "answer": "Starterbase is a production-ready app template..."
      },
      "q2": {
        "question": "Do I need coding experience?",
        "answer": "Basic knowledge of React and Python helps..."
      }
    }
  }
}

Accordion Animation

The accordion uses Radix UI with CSS animations:

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

[data-state="open"] > .accordion-content {
  animation: accordion-down 200ms ease-out;
}

[data-state="closed"] > .accordion-content {
  animation: accordion-up 200ms ease-out;
}

Adding Contact CTA

Include a contact section below the FAQ:

<div className="text-center mt-12">
  <p className="text-zinc-600 dark:text-zinc-400 mb-4">
    Still have questions?
  </p>
  <Button as={Link} href="/contact" outline>
    Contact Us
  </Button>
</div>