{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faqs-02",
  "type": "registry:block",
  "description": "A simple pricing section.",
  "files": [
    {
      "path": "registry/designali/blocks/faqs/faqs-02.tsx",
      "content": "\"use client\"\n\nimport { Plus, X } from \"lucide-react\"\nimport { cn } from \"@workspace/ui/lib/utils\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@workspace/ui/components/accordion\"\n\ninterface FaqItem {\n  title: string\n  description: string\n}\n\ninterface Faq02Props {\n  label?: string\n  title?: string\n  description?: string\n  items?: FaqItem[]\n  className?: string\n}\n\nconst defaultItems: FaqItem[] = [\n  {\n    title: \"What is Designali?\",\n    description:\n      \"Designali is a UI library for designers and developers with production-ready components, blocks, templates, logos, icons, and design resources.\",\n  },\n  {\n    title: \"Is Designali free to use?\",\n    description:\n      \"Yes. Designali provides free and open-source resources that can be used for personal and commercial projects according to the applicable license.\",\n  },\n  {\n    title: \"Can I customize the components?\",\n    description:\n      \"Absolutely. The components are designed to be copied and customized. You can change the layout, styling, colors, typography, animations, and functionality.\",\n  },\n  {\n    title: \"Does Designali work with shadcn/ui?\",\n    description:\n      \"Yes. Designali works alongside modern React, Tailwind CSS, and shadcn/ui workflows, making it easy to add components to your existing project.\",\n  },\n  {\n    title: \"What technologies are supported?\",\n    description:\n      \"Designali components are built with modern technologies including React, TypeScript, Tailwind CSS, and accessible UI primitives.\",\n  },\n  {\n    title: \"Can I use Designali for commercial projects?\",\n    description:\n      \"Yes. Designali resources can be used in commercial projects according to the license associated with the specific resource.\",\n  },\n]\n\nexport const Faq02 = ({\n  label = \"FAQ\",\n  title = \"Questions, answered.\",\n  description = \"Everything you need to know about Designali.\",\n  items = defaultItems,\n  className,\n}: Faq02Props) => (\n  <section\n    className={cn(\n      \"relative w-full overflow-hidden py-20 md:py-28\",\n      className\n    )}\n  >\n    <div className=\"max-w-7xl mx-auto px-4\">\n      {/* Header */}\n      <div className=\"mx-auto flex max-w-2xl flex-col items-center gap-4 text-center\">\n        {label && (\n          <p className=\"text-xs font-medium tracking-[0.2em] text-muted-foreground uppercase\">\n            {label}\n          </p>\n        )}\n\n        <h2 className=\"text-4xl font-medium leading-tight tracking-tight md:text-5xl\">\n          {title}\n        </h2>\n\n        {description && (\n          <p className=\"max-w-xl text-muted-foreground md:text-lg\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      {/* FAQ Grid */}\n      <Accordion \n      defaultValue={[\"item-0\"]}\n        className=\"mx-auto mt-12 grid w-full max-w-5xl gap-3 md:grid-cols-2\"\n      >\n        {items.map((item, index) => (\n          <AccordionItem\n            key={index}\n            value={`item-${index}`}\n            className=\"group relative h-fit overflow-hidden border bg-background px-6 transition-colors data-[state=open]:bg-muted/40\"\n          >\n            <AccordionTrigger className=\"py-5 h-full pr-12 text-left text-base font-medium hover:no-underline md:text-lg\">\n              {item.title}\n\n              <span className=\"absolute right-5 flex size-7 shrink-0 items-center justify-center rounded-full border bg-background\">\n                <Plus className=\"size-3.5 text-muted-foreground group-data-[state=open]:hidden\" />\n                <X className=\"hidden size-3.5 text-muted-foreground group-data-[state=open]:block\" />\n              </span>\n            </AccordionTrigger>\n\n            <AccordionContent className=\"pb-6 pr-8 text-sm leading-6 text-muted-foreground md:text-base\">\n              {item.description}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  </section>\n) ",
      "type": "registry:component",
      "target": "components/faqs-02.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "800px"
  },
  "categories": [
    "faqs"
  ]
}