{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-faq-sections-accordion-with-background","type":"registry:block","title":"Accordion With Background","files":[{"path":"components/blocks/marketing/faq-sections/accordion-with-background.tsx","content":"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Check, HelpCircle } from \"lucide-react\";\n\nconst faqs = [\n  {\n    question: \"Can I cancel my subscription at any time?\",\n    answer:\n      \"Yes, you can cancel your subscription at any time. You'll continue to have access to the service until the end of your billing period.\",\n  },\n  {\n    question: \"How do I access premium features?\",\n    answer:\n      \"Premium features are automatically available once you subscribe to our Pro or Enterprise plans. You can access them from your dashboard immediately after payment is processed.\",\n  },\n  {\n    question: \"Do you offer a free trial?\",\n    answer:\n      \"Yes, we offer a 14-day free trial on all our plans. No credit card is required to start your trial, and you can upgrade or cancel at any time.\",\n  },\n  {\n    question: \"How does the team billing work?\",\n    answer:\n      \"Team billing is based on the number of seats you need. Each team member counts as one seat, and you can add or remove seats as your team size changes.\",\n  },\n  {\n    question: \"Is there a discount for annual billing?\",\n    answer:\n      \"Yes, we offer a 20% discount when you choose annual billing instead of monthly. This discount is automatically applied at checkout.\",\n  },\n  {\n    question: \"What payment methods do you accept?\",\n    answer:\n      \"We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual enterprise plans.\",\n  },\n];\n\nexport default function AccordionWithBackground() {\n  return (\n    <div className=\"max-w-[85rem] bg-muted/50 container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-24 lg:py-32\">\n      <div className=\"rounded-2xl\">\n        {/* Title */}\n        <div className=\"max-w-2xl mx-auto text-center mb-10\">\n          <h2 className=\"text-2xl font-bold md:text-3xl md:leading-tight\">\n            Frequently Asked Questions\n          </h2>\n          <p className=\"mt-4 text-muted-foreground\">\n            Find answers to the most common questions about our service\n          </p>\n        </div>\n        {/* End Title */}\n\n        <div className=\"max-w-3xl mx-auto\">\n          <Accordion type=\"single\" collapsible className=\"w-full space-y-4\">\n            {faqs.map((faq, index) => (\n              <AccordionItem\n                value={`item-${index}`}\n                key={faq.question}\n                className=\"border rounded-lg px-6 bg-background shadow-sm\"\n              >\n                <AccordionTrigger className=\"py-4 text-lg font-medium\">\n                  <div className=\"flex items-center gap-3\">\n                    <HelpCircle className=\"h-5 w-5 text-primary hidden sm:block\" />\n                    <span className=\"text-start mr-3\">{faq.question}</span>\n                  </div>\n                </AccordionTrigger>\n                <AccordionContent className=\"pt-2 pb-4 text-muted-foreground\">\n                  <div className=\"flex gap-3\">\n                    <Check className=\"h-5 w-5 mt-0.5 text-primary shrink-0\" />\n                    <p>{faq.answer}</p>\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/faq-sections/accordion-with-background.tsx"},{"path":"components/ui/accordion.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","type":"registry:ui","target":"components/ui/accordion.tsx"}],"description":"An accordion FAQ set against a tinted background panel. Each question expands to reveal its answer, keeping long lists of details tidy and easy to scan.","dependencies":["lucide-react","radix-ui"]}