{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "faq-two-column",
  "title": "FAQ — Two Column",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/faq-two-column/FaqTwoColumn.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface FaqTwoColumnProps {\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { ArrowRight } from '@lucide/svelte'\n  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '$lib/components/ui/accordion'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n\n  let { class: className }: FaqTwoColumnProps = $props()\n\n  const faqs = [\n    {\n      q: 'Does our data leave the warehouse?',\n      a: 'No. Metrics resolve against your warehouse at query time using a read-only role. We store definitions and query metadata, never rows.',\n    },\n    {\n      q: 'How long does a rollout take?',\n      a: 'Five weeks from kickoff to hand-over is typical: a week to connect, a week to model, two to pilot with one team, one to roll out.',\n    },\n    {\n      q: 'What happens when a definition changes?',\n      a: 'It opens a pull request. Once merged, every consumer resolves the new definition at once, and reverting is the same single click.',\n    },\n    {\n      q: 'Can we keep using our BI tool?',\n      a: 'Yes. Looker, Hex, and Sigma read certified metrics through the API, so they stop maintaining their own competing definitions.',\n    },\n    {\n      q: 'How is access controlled?',\n      a: 'Row-level scope resolves per query from your identity provider. A shared dashboard link cannot show a viewer more than their own scope.',\n    },\n    {\n      q: 'What does it cost to run?',\n      a: 'Query budgets are enforced per team at run time, so warehouse spend is capped rather than reconciled from an invoice a month later.',\n    },\n  ]\n\n  // Deal alternately so the two columns stay balanced regardless of answer length.\n  const columns = $derived([\n    faqs.filter((_, index) => index % 2 === 0),\n    faqs.filter((_, index) => index % 2 === 1),\n  ])\n</script>\n\n<section data-slot=\"faq-two-column\" class={['bg-background', className]}>\n  <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n    <div class=\"max-w-2xl\">\n      <Badge variant=\"secondary\">FAQ</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Questions we get on the first call</h2>\n    </div>\n\n    <!-- Two independent accordions: a long answer on the left cannot push the\n         questions on the right out of alignment. -->\n    <div class=\"mt-10 grid gap-x-12 gap-y-0 md:grid-cols-2\">\n      {#each columns as column, index (index)}\n        <Accordion type=\"multiple\" class=\"w-full\">\n          {#each column as faq (faq.q)}\n            <AccordionItem value={faq.q}>\n              <AccordionTrigger class=\"text-left text-sm font-medium\">{faq.q}</AccordionTrigger>\n              <AccordionContent class=\"text-muted-foreground text-sm leading-relaxed\">{faq.a}</AccordionContent>\n            </AccordionItem>\n          {/each}\n        </Accordion>\n      {/each}\n    </div>\n\n    <div class=\"border-border mt-10 flex flex-wrap items-center justify-between gap-4 border-t pt-6\">\n      <p class=\"text-muted-foreground text-sm\">Something not covered here?</p>\n      <Button variant=\"outline\">\n        Talk to an engineer\n        <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/faq-two-column/FaqTwoColumn.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/accordion.json",
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json"
  ],
  "description": "Frequently asked questions split across two columns of independent accordions, so a long answer in one column never pushes the questions beside it out of alignment.",
  "categories": [
    "marketing"
  ]
}