{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-9","type":"registry:block","title":"Faq 9","description":"","dependencies":["lucide-react"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/accordion.json","https://www.diarmuradi.com/r/styles/base-nova/toggle-group.json"],"files":[{"path":"faq.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\"\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'\n\nconst groups = {\n  General: [\n    {\n      value: \"item-1\",\n      trigger: \"What services are included in the subscription?\",\n      content:\n        \"Every plan includes unlimited design requests, a dedicated board, and two rounds of revision per task. Brand assets and source files are delivered with each request.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"How many design requests can I make each month?\",\n      content:\n        \"There is no request cap. Tasks are queued and worked one at a time so quality stays consistent. Pause or add requests whenever you need.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"What is the turnaround time for design requests?\",\n      content:\n        \"Smaller tasks such as graphics or copy tweaks take 2-4 hours. Larger pages and campaigns typically ship within one business day.\",\n    },\n  ],\n  Subscriptions: [\n    {\n      value: \"item-4\",\n      trigger: \"Can I pause my subscription?\",\n      content:\n        \"Pause anytime from billing. Your queue is saved, and you can resume on the same plan without setup fees.\",\n    },\n    {\n      value: \"item-5\",\n      trigger: \"What if I need services outside the subscription?\",\n      content:\n        \"One-off projects such as motion or 3D can be quoted separately. We will share a fixed price before any work starts.\",\n    },\n  ],\n  Services: [\n    {\n      value: \"item-6\",\n      trigger: \"Can I request revisions to the designs?\",\n      content:\n        \"Yes. Each request includes two revision rounds. Extra rounds can be added as a follow-up task so nothing is blocked.\",\n    },\n    {\n      value: \"item-7\",\n      trigger: \"Who owns the final files?\",\n      content:\n        \"You own everything we deliver. Source files, fonts we licensed for you, and exported assets are transferred at handoff.\",\n    },\n  ],\n}\n\nconst categories = Object.keys(groups)\n\nexport function Faq() {\n  const [active, setActive] = useState(categories[0] ?? \"General\")\n  const items = groups[active as keyof typeof groups]\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-2xl flex-col gap-8\">\n      <header className=\"flex flex-col gap-3\">\n        <p className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n          <span className=\"size-1.5 rounded-full bg-primary\" />\n          Subscriptions\n        </p>\n        <div className=\"flex flex-col gap-2\">\n          <h1 className=\"text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl\">\n            Plans, seats, and renewals\n          </h1>\n          <p className=\"text-muted-foreground\">\n            Use the rail to switch topics. Each question opens in place.\n          </p>\n        </div>\n      </header>\n\n      <div className=\"grid gap-8 md:grid-cols-[10rem_1fr]\">\n        <ToggleGroup\n          value={[active]}\n          onValueChange={(value) => {\n            if (value.length > 0)\n              setActive(value[0] ?? categories[0] ?? \"General\")\n          }}\n          orientation=\"vertical\"\n          spacing={1}\n          className=\"flex-row md:flex-col\"\n        >\n          {categories.map((category) => (\n            <ToggleGroupItem\n              key={category}\n              value={category}\n              className=\"justify-start rounded-lg px-3 py-2 text-sm\"\n            >\n              {category}\n            </ToggleGroupItem>\n          ))}\n        </ToggleGroup>\n\n        <Accordion\n          key={active}\n          defaultValue={[items[0]?.value]}\n          className=\"gap-2\"\n        >\n          {items.map((item) => (\n            <AccordionItem\n              key={item.value}\n              value={item.value}\n              className=\"overflow-hidden rounded-xl border-none bg-muted\"\n            >\n              <AccordionTrigger className=\"px-4 py-4 text-left hover:no-underline *:data-[slot=accordion-trigger-icon]:hidden\">\n                <span className=\"font-medium\">{item.trigger}</span>\n                <span className=\"ml-auto flex size-7 shrink-0 items-center justify-center\">\n                  <ChevronDownIcon  className=\"size-3.5 text-muted-foreground group-aria-expanded/accordion-trigger:hidden\" />\n                  <ChevronUpIcon  className=\"hidden size-3.5 text-muted-foreground group-aria-expanded/accordion-trigger:inline\" />\n                </span>\n              </AccordionTrigger>\n              <AccordionContent className=\"px-4 pb-4 text-sm text-muted-foreground\">\n                {item.content}\n              </AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </div>\n    </div>\n  )\n}","target":"components/faq.tsx"}]}