Dark FAQ with Glow Seam

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"
import { GlowSeam } from "@/components/glow/glow-seam"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Frequently asked questions",
  body: "The things people ask before they install, with the honest answer to each.",
} as const

const TOPICS = [
  {
    name: "Installing",
    body: "Getting a block into a project that already exists.",
    faqs: [
      {
        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.",
      },
      {
        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.",
      },
    ],
  },
  {
    name: "Customizing",
    body: "Changing copy, layout and mode without forking.",
    faqs: [
      {
        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.",
      },
      {
        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.",
      },
    ],
  },
  {
    name: "Licensing",
    body: "What one purchase covers, and the one thing it does not.",
    faqs: [
      {
        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.",
      },
      {
        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.",
      },
    ],
  },
]

// A dark band; a seam of light divides each topic from the next.
export default function GlowSeamFaq01() {
  return (
    <Section className="dark">
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription variant="muted">{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        {TOPICS.map((topic, i) => (
          <SectionColumns key={topic.name} variant="intro">
            {i > 0 && <GlowSeam className="col-span-full" />}
            <SectionHeader size="sm">
              <SectionTitleGroup>
                <Heading size="sm">{topic.name}</Heading>
              </SectionTitleGroup>
              <SectionDescription variant="muted" size="sm">
                {topic.body}
              </SectionDescription>
            </SectionHeader>
            <FaqList>
              {topic.faqs.map((faq) => (
                <FaqListItem key={faq.question}>
                  <FaqListQuestion>{faq.question}</FaqListQuestion>
                  <FaqListAnswer>{faq.answer}</FaqListAnswer>
                </FaqListItem>
              ))}
            </FaqList>
          </SectionColumns>
        ))}
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/glow-seam-faq-01

npx shadcn add @01orbital/glow-seam-faq-01

yarn shadcn add @01orbital/glow-seam-faq-01

bunx --bun shadcn add @01orbital/glow-seam-faq-01