{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "faq-two-column",
  "title": "FAQ — Two Column",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/faq-two-column/FaqTwoColumn.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ArrowRight } from 'lucide-vue-next'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nconst 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.\nconst columns = computed(() => [faqs.filter((_, index) => index % 2 === 0), faqs.filter((_, index) => index % 2 === 1)])\n</script>\n\n<template>\n  <section data-slot=\"faq-two-column\" class=\"bg-background\">\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        <Accordion v-for=\"(column, index) in columns\" :key=\"index\" type=\"multiple\" class=\"w-full\">\n          <AccordionItem v-for=\"faq in column\" :key=\"faq.q\" :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        </Accordion>\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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FaqTwoColumn.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/accordion.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/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"
  ]
}