{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-11","type":"registry:block","title":"Faq 11","description":"","dependencies":[],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/accordion.json","https://www.diarmuradi.com/r/styles/base-nova/fancy-button.json"],"files":[{"path":"faq.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { FancyButton } from \"@/components/fancy-button\"\n\nconst categories = [\n  {\n    title: \"Account\",\n    description: \"Manage profile & settings.\",\n    items: [\n      {\n        value: \"item-1\",\n        trigger: \"How do I change my email address?\",\n        content:\n          \"You can update your email address in your account settings. We'll send a verification link to confirm the change.\",\n      },\n      {\n        value: \"item-2\",\n        trigger: \"Can I update my payment details online?\",\n        content:\n          \"Yes, you can update your payment information anytime in the billing section of your account settings.\",\n      },\n      {\n        value: \"item-3\",\n        trigger: \"What should I do if I forget my password?\",\n        content:\n          \"Click 'Forgot Password' on the login page and follow the reset instructions sent to your email.\",\n      },\n    ],\n  },\n  {\n    title: \"Payments\",\n    description: \"All about transactions.\",\n    items: [\n      {\n        value: \"item-4\",\n        trigger: \"How long does it take to process a payment?\",\n        content:\n          \"Most payments are processed within 1-2 business days depending on your payment method.\",\n      },\n      {\n        value: \"item-5\",\n        trigger: \"Are refunds handled automatically?\",\n        content:\n          \"Yes, refunds are processed automatically and typically appear in your account within 3-5 business days.\",\n      },\n    ],\n  },\n  {\n    title: \"Support\",\n    description: \"Get help when needed.\",\n    items: [\n      {\n        value: \"item-6\",\n        trigger: \"How can I contact customer support?\",\n        content:\n          \"You can reach our support team via live chat, email, or phone. We're available 24/7 to help.\",\n      },\n      {\n        value: \"item-7\",\n        trigger: \"Do you provide weekend assistance?\",\n        content:\n          \"Yes, our support team is available 7 days a week, including weekends and holidays.\",\n      },\n      {\n        value: \"item-8\",\n        trigger: \"Is live chat support available?\",\n        content:\n          \"Yes, live chat support is available during business hours. For after-hours issues, please email us.\",\n      },\n      {\n        value: \"item-9\",\n        trigger: \"Where can I find detailed guides?\",\n        content:\n          \"Our comprehensive knowledge base with guides and tutorials is available in the help section.\",\n      },\n    ],\n  },\n]\n\nexport function Faq() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-5xl flex-col gap-12\">\n      <header className=\"flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\">\n        <div className=\"flex flex-col gap-3\">\n          <p className=\"w-fit rounded-md bg-muted p-2 text-sm text-foreground\">\n            Three columns\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              Account, payments & support\n            </h1>\n            <p className=\"text-muted-foreground\">\n              Pick a column, then open the question that matches what you need.\n            </p>\n          </div>\n        </div>\n        <FancyButton size=\"lg\" className=\"w-fit shrink-0\">\n          Email the team\n        </FancyButton>\n      </header>\n\n      <div className=\"flex flex-col gap-6 md:flex-row md:gap-12\">\n        {categories.map((category) => (\n          <div key={category.title} className=\"flex flex-1 flex-col gap-8\">\n            <div className=\"flex min-w-fit flex-col gap-1\">\n              <h2 className=\"text-lg font-semibold\">{category.title}</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                {category.description}\n              </p>\n            </div>\n            <Accordion\n              defaultValue={[category.items[0]?.value]}\n              className=\"gap-2\"\n            >\n              {category.items.map((item) => (\n                <AccordionItem\n                  key={item.value}\n                  value={item.value}\n                  className=\"rounded-xl border-none bg-card shadow-elevated-sm\"\n                >\n                  <AccordionTrigger className=\"px-4 py-3.5 text-sm text-muted-foreground hover:no-underline aria-expanded:text-foreground\">\n                    {item.trigger}\n                  </AccordionTrigger>\n                  <AccordionContent className=\"flex flex-col gap-2 px-4 pb-3 text-balance text-foreground\">\n                    <p className=\"text-sm\">{item.content}</p>\n                  </AccordionContent>\n                </AccordionItem>\n              ))}\n            </Accordion>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}","target":"components/faq.tsx"}]}