{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faqs-02",
  "title": "Two-column FAQ",
  "description": "Sticky copy on the left, full accordion on the right — easier scanning when there are 5+ questions.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "button"
  ],
  "files": [
    {
      "path": "content/components/faqs/faqs-02.tsx",
      "content": "import { ArrowRight, Clock, Mail, MessageCircle } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\n\nconst faqs = [\n  {\n    q: \"What's included in Pro?\",\n    a: \"All 135+ blocks, every category, lifetime updates and registry access from /account/registry-token.\",\n  },\n  {\n    q: \"Can my team share one license?\",\n    a: \"Pro is per-seat. Team plans include up to 10 seats with a per-user token each.\",\n  },\n  {\n    q: \"What stack is required?\",\n    a: \"Next.js (App Router) with React 19, Tailwind v4 and shadcn/ui. Older versions might work but aren't officially supported.\",\n  },\n  {\n    q: \"Are blocks responsive?\",\n    a: \"Every block reads from ~380px to full desktop. Mobile drawers and stacked layouts ship with each section.\",\n  },\n  {\n    q: \"Do you handle dark mode?\",\n    a: \"Yes — every block uses shadcn CSS variables so it adapts to either theme out of the box.\",\n  },\n]\n\nexport default function Faqs02() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-6xl px-6 sm:px-10\">\n        <div className=\"grid gap-10 lg:grid-cols-[1fr_1.4fr] lg:items-start\">\n          <div className=\"lg:sticky lg:top-24 flex flex-col gap-5\">\n            <span className=\"inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground shadow-sm shadow-black/5\">\n              FAQs\n            </span>\n            <h2\n              className=\"text-balance font-semibold tracking-tight\"\n              style={{\n                fontSize: \"clamp(1.85rem, 4vw, 2.75rem)\",\n                letterSpacing: \"-0.03em\",\n                lineHeight: 1.08,\n              }}\n            >\n              Your questions answered\n            </h2>\n            <p className=\"text-sm text-muted-foreground\">\n              Quick answers from the team. Still stuck? Write to{\" \"}\n              <a\n                href=\"#\"\n                className=\"font-medium text-foreground underline-offset-4 hover:underline\"\n              >\n                hey@blockus.dev\n              </a>{\" \"}\n              and a real person replies.\n            </p>\n\n            <div className=\"mt-2 flex flex-col gap-2 rounded-2xl border border-border bg-card p-4\">\n              <div className=\"flex items-center gap-3\">\n                <span className=\"grid size-9 shrink-0 place-items-center rounded-full bg-foreground text-background\">\n                  <MessageCircle className=\"size-4\" />\n                </span>\n                <div className=\"flex flex-col leading-tight\">\n                  <p className=\"text-sm font-medium text-foreground\">\n                    Talk to a human\n                  </p>\n                  <p className=\"text-xs text-muted-foreground\">\n                    <Clock className=\"mr-1.5 inline size-3\" />\n                    Replies in &lt; 4h\n                  </p>\n                </div>\n              </div>\n              <Button size=\"sm\" className=\"mt-2 w-full rounded-full\">\n                Open a ticket\n                <ArrowRight />\n              </Button>\n              <p className=\"text-center text-[11px] text-muted-foreground\">\n                <Mail className=\"mr-1 inline size-3\" />\n                Or email{\" \"}\n                <a\n                  href=\"mailto:hey@blockus.dev\"\n                  className=\"font-medium text-foreground underline-offset-4 hover:underline\"\n                >\n                  hey@blockus.dev\n                </a>\n              </p>\n            </div>\n          </div>\n\n          <Accordion type=\"single\" collapsible>\n            {faqs.map((f, i) => (\n              <AccordionItem key={f.q} value={`item-${i}`}>\n                <AccordionTrigger>{f.q}</AccordionTrigger>\n                <AccordionContent>{f.a}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/faqs-02.tsx"
    }
  ],
  "categories": [
    "faqs"
  ],
  "type": "registry:block"
}