{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-two-column",
  "title": "Two-column FAQ",
  "description": "Sticky intro and contact card on the left, an accordion of questions on the right.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "accordion",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/spotlight-card.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/faq-two-column.tsx",
      "content": "import {\n  ArrowUpRightIcon,\n  BookOpenIcon,\n  MailIcon,\n  MessagesSquareIcon,\n} from \"lucide-react\";\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { SpotlightCard } from \"@/components/velora/spotlight-card\";\n\nconst FAQS = [\n  {\n    question: \"What exactly is Lumen?\",\n    answer:\n      \"Lumen is an analytics workspace for product teams. It connects to your warehouse, lets anyone explore events without SQL, and turns the answers into dashboards your whole company can read.\",\n  },\n  {\n    question: \"How long does setup take?\",\n    answer:\n      \"Most teams see their first dashboard within an hour. Connect your warehouse, pick the tables that hold your events, and Lumen maps users, sessions and properties for you.\",\n  },\n  {\n    question: \"Which data sources do you support?\",\n    answer:\n      \"All the major cloud warehouses, Postgres and MySQL, plus event streams through our SDKs for web, iOS, Android and server-side languages. New connectors ship every month.\",\n  },\n  {\n    question: \"Do you copy our data?\",\n    answer:\n      \"No. Queries run directly in your warehouse, and only aggregated results are cached — encrypted and for at most 24 hours. Your raw events never leave your infrastructure.\",\n  },\n  {\n    question: \"How is pricing calculated?\",\n    answer:\n      \"By the number of tracked users per month, not by seats — invite your whole company at no extra cost. If you go over your limit, we'll let you know before anything changes on your bill.\",\n  },\n  {\n    question: \"Can we self-host Lumen?\",\n    answer:\n      \"Self-hosting is available on the Enterprise plan as a container you run in your own cloud account, with the same release cadence as our hosted version.\",\n  },\n  {\n    question: \"What happens to our dashboards if we leave?\",\n    answer:\n      \"You can export every dashboard as SQL and every chart as CSV or PNG at any time. After cancellation your workspace stays readable for 30 days, then it's permanently deleted.\",\n  },\n];\n\nconst CONTACTS = [\n  {\n    icon: MessagesSquareIcon,\n    label: \"Chat with the team\",\n    detail: \"Replies in under 10 minutes\",\n    href: \"#\",\n  },\n  {\n    icon: MailIcon,\n    label: \"hello@lumen.example\",\n    detail: \"For billing and contracts\",\n    href: \"#\",\n  },\n  {\n    icon: BookOpenIcon,\n    label: \"Read the docs\",\n    detail: \"Guides, API and changelog\",\n    href: \"#\",\n  },\n];\n\n/**\n * Two-column FAQ: the heading and ways to get in touch stay pinned on the\n * left on wide screens while the numbered questions scroll on the right.\n */\nexport function FaqTwoColumn() {\n  return (\n    <section className=\"px-6 py-24 sm:py-32 lg:px-8\">\n      <div className=\"mx-auto grid max-w-7xl gap-12 lg:grid-cols-12 lg:gap-16\">\n        <div className=\"lg:col-span-5\">\n          <BlurFade className=\"lg:sticky lg:top-12\">\n            <p className=\"text-sm font-medium text-primary\">Support</p>\n            <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl\">\n              Frequently asked questions\n            </h2>\n            <p className=\"mt-5 text-lg text-pretty text-muted-foreground\">\n              The short answers to what teams ask before switching to Lumen. For\n              anything else, a real person is on the other end.\n            </p>\n\n            <SpotlightCard className=\"mt-10 p-2\">\n              <ul className=\"divide-y\">\n                {CONTACTS.map(({ icon: Icon, label, detail, href }) => (\n                  <li key={label}>\n                    <a\n                      href={href}\n                      className=\"group/contact flex items-center gap-4 rounded-xl p-4 outline-none transition-colors hover:bg-muted/60 focus-visible:ring-3 focus-visible:ring-ring/50\"\n                    >\n                      <span className=\"grid size-10 shrink-0 place-items-center rounded-lg border bg-background\">\n                        <Icon aria-hidden className=\"size-5 text-primary\" />\n                      </span>\n                      <span className=\"min-w-0 flex-1\">\n                        <span className=\"block truncate text-sm font-medium\">\n                          {label}\n                        </span>\n                        <span className=\"block text-sm text-muted-foreground\">\n                          {detail}\n                        </span>\n                      </span>\n                      <ArrowUpRightIcon\n                        aria-hidden\n                        className=\"size-4 shrink-0 text-muted-foreground transition-transform group-hover/contact:-translate-y-0.5 group-hover/contact:translate-x-0.5 group-hover/contact:text-foreground motion-reduce:transition-none\"\n                      />\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </SpotlightCard>\n          </BlurFade>\n        </div>\n\n        <BlurFade delay={0.1} className=\"lg:col-span-7\">\n          <Accordion\n            type=\"multiple\"\n            defaultValue={[\"item-0\"]}\n            className=\"border-t\"\n          >\n            {FAQS.map((faq, i) => (\n              <AccordionItem\n                key={faq.question}\n                value={`item-${i}`}\n                className=\"border-b\"\n              >\n                <AccordionTrigger className=\"gap-4 py-6 text-base hover:no-underline sm:text-lg\">\n                  <span className=\"flex gap-4 sm:gap-6\">\n                    <span\n                      aria-hidden\n                      className=\"mt-0.5 font-mono text-sm text-muted-foreground tabular-nums group-aria-expanded/accordion-trigger:text-primary sm:mt-1\"\n                    >\n                      {String(i + 1).padStart(2, \"0\")}\n                    </span>\n                    <span>{faq.question}</span>\n                  </span>\n                </AccordionTrigger>\n                <AccordionContent className=\"pr-8 pb-6 pl-8 text-[0.9375rem] leading-relaxed text-pretty text-muted-foreground sm:pl-10\">\n                  {faq.answer}\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </BlurFade>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/faq-two-column.tsx"
    }
  ],
  "categories": [
    "faq-sections"
  ],
  "type": "registry:block"
}