FAQ, list

npx shadcn add @klarhimmel/faq-list

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import FaqList from '@/components/klarhimmel/blocks/faq-list';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FaqList props={{
          "eyebrow": "FAQ",
          "title": "Questions, answered",
          "description": "Cannot find what you are looking for? Write to us and a person will reply.",
          "items": [
            {
              "question": "Is there a free plan?",
              "answer": "Yes. The Starter plan is free for as long as you like, with up to three projects and two team members."
            },
            {
              "question": "Can I change plans later?",
              "answer": "You can upgrade or downgrade at any time. Changes apply from the next billing period and we prorate upgrades."
            },
            {
              "question": "How is my data protected?",
              "answer": "Data is encrypted in transit and at rest, backed up daily and never used to train models. Business plans add audit logs and single sign-on."
            },
            {
              "question": "Can I import from another tool?",
              "answer": "Yes. You can import projects and tasks from a CSV file or from most popular project tools in a few minutes."
            },
            {
              "question": "Do you offer discounts for non-profits?",
              "answer": "We give registered non-profits and schools 50% off any paid plan. Contact us with your details."
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}