Always-Open FAQ with Intro

import {
  FaqList,
  FaqListAnswer,
  FaqListItem,
  FaqListQuestion,
} from "@/components/editorial/faq-list"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionColumns,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Frequently asked questions",
  support: {
    lead: "Can’t find the answer you need? Write to ",
    label: "customer support",
    tail: " and a person replies within one business day.",
  },
} as const

const FAQS = [
  {
    id: "install",
    question: "How do I install a block?",
    answer:
      "Copy the command under any block in Browse and run it in your project. The shadcn CLI drops the source files into your components folder and adds the dependencies it needs.",
  },
  {
    id: "existing",
    question: "Does it work with components I already have?",
    answer:
      "Yes. The kit uses the same tokens, folder layout and primitives as a stock shadcn project, so a block sits next to what you built without a second theme.",
  },
  {
    id: "customize",
    question: "Can I change the copy and the layout?",
    answer:
      "Every block keeps its words in a constant at the top of the file and its layout in named parts. Edit the constant for copy; swap or remove a part for layout.",
  },
  {
    id: "updates",
    question: "What happens when a block is updated?",
    answer:
      "Nothing, until you ask. Re-run the install command to pull the new version; the CLI shows a diff and never overwrites an edited file without confirming.",
  },
  {
    id: "dark",
    question: "Is dark mode included?",
    answer:
      "Every block renders in both modes from the same tokens. The previews in Browse show each one light and dark so you can check before installing.",
  },
  {
    id: "license",
    question: "Can I use it for client work?",
    answer:
      "One license covers unlimited projects for yourself and for clients. The only thing it excludes is redistributing the blocks themselves.",
  },
] as const

export default function OpenFaq01() {
  return (
    <Section>
      <SectionContent>
        <SectionColumns variant="intro">
          <SectionHeader size="sm">
            <SectionTitleGroup>
              <Heading>{COPY.title}</Heading>
            </SectionTitleGroup>
            <SectionDescription>
              {COPY.support.lead}
              <a
                href="#"
                className="font-medium text-foreground underline underline-offset-3"
              >
                {COPY.support.label}
              </a>
              {COPY.support.tail}
            </SectionDescription>
          </SectionHeader>
          <FaqList>
            {FAQS.map((faq) => (
              <FaqListItem key={faq.id}>
                <FaqListQuestion>{faq.question}</FaqListQuestion>
                <FaqListAnswer>{faq.answer}</FaqListAnswer>
              </FaqListItem>
            ))}
          </FaqList>
        </SectionColumns>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/open-faq-01

npx shadcn add @01orbital/open-faq-01

yarn shadcn add @01orbital/open-faq-01

bunx --bun shadcn add @01orbital/open-faq-01