{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-cta-sections-faq-cta","type":"registry:block","title":"FAQ CTA","files":[{"path":"components/blocks/marketing/cta-sections/faq-cta.tsx","content":"import { useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Plus, Minus } from 'lucide-react';\n\nexport default function FAQCTA() {\n  // State to track which FAQ item is expanded\n  const [expandedIndex, setExpandedIndex] = useState<number | null>(0);\n\n  const faqs = [\n    {\n      question: 'How does the 30-day free trial work?',\n      answer:\n        'Our free trial gives you full access to all premium features for 30 days with no credit card required. After your trial ends, you can choose to subscribe or continue with our basic free plan.',\n    },\n    {\n      question: 'Can I cancel my subscription at any time?',\n      answer:\n        \"Yes, you can cancel your subscription at any time with no questions asked. If you cancel, you'll still have access until the end of your current billing period.\",\n    },\n    {\n      question:\n        'Do you offer discounts for non-profits or educational institutions?',\n      answer:\n        'Absolutely! We offer special pricing for non-profits, educational institutions, and open-source projects. Contact our sales team to learn more about our discount programs.',\n    },\n    {\n      question: 'How do I get help if I have questions?',\n      answer:\n        'We provide 24/7 support through live chat, email, and our comprehensive knowledge base. Premium users also get access to priority phone support and dedicated account managers.',\n    },\n    {\n      question: 'Do you offer custom solutions for enterprise clients?',\n      answer:\n        'Yes, we offer tailored enterprise solutions with dedicated support, custom integration options, and advanced security features. Our team will work with you to create the perfect solution for your organization.',\n    },\n  ];\n\n  const toggleExpanded = (index: number) => {\n    setExpandedIndex(expandedIndex === index ? null : index);\n  };\n\n  return (\n    <>\n      {/* FAQ CTA Section */}\n      <div className=\"bg-muted/30 py-16 md:py-24\">\n        <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n          <div className=\"grid gap-8 md:grid-cols-5\">\n            <div className=\"space-y-4 md:col-span-2\">\n              <h2 className=\"text-3xl font-bold tracking-tighter md:text-4xl\">\n                Frequently Asked Questions\n              </h2>\n              <p className=\"text-muted-foreground\">\n                Got questions? We&apos;ve got answers. If you don&apos;t see\n                what you&apos;re looking for, reach out to our team.\n              </p>\n              <div className=\"flex flex-col space-y-3 pt-4\">\n                <Button size=\"lg\" asChild>\n                  <a href=\"#\">Sign Up Now</a>\n                </Button>\n                <Button variant=\"outline\" size=\"lg\" asChild>\n                  <a href=\"#\">Contact Sales</a>\n                </Button>\n              </div>\n              <div className=\"text-muted-foreground pt-4 text-sm\">\n                &ldquo;The support team is incredibly responsive and helpful.\n                Any questions I had were answered within minutes.&rdquo;\n                <div className=\"text-foreground pt-2 font-medium\">\n                  — Alex Morgan, Product Manager\n                </div>\n              </div>\n            </div>\n            <div className=\"md:col-span-3\">\n              <div className=\"divide-y rounded-lg border\">\n                {faqs.map((faq, index) => (\n                  <div key={index} className=\"bg-card\">\n                    <button\n                      onClick={() => toggleExpanded(index)}\n                      className=\"hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium transition-all\"\n                      aria-expanded={expandedIndex === index}\n                      aria-controls={`faq-content-${index}`}\n                    >\n                      <span>{faq.question}</span>\n                      <div className=\"ml-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border\">\n                        {expandedIndex === index ? (\n                          <Minus className=\"h-3 w-3\" />\n                        ) : (\n                          <Plus className=\"h-3 w-3\" />\n                        )}\n                      </div>\n                    </button>\n                    <div\n                      id={`faq-content-${index}`}\n                      className={`overflow-hidden transition-all ${\n                        expandedIndex === index\n                          ? 'max-h-96 p-4 pt-0'\n                          : 'max-h-0'\n                      }`}\n                    >\n                      <p className=\"text-muted-foreground\">{faq.answer}</p>\n                    </div>\n                  </div>\n                ))}\n              </div>\n              <div className=\"text-muted-foreground mt-4 text-center text-sm\">\n                <span>Still have questions?</span>{' '}\n                <a\n                  href=\"#\"\n                  className=\"text-primary font-medium underline-offset-4 hover:underline\"\n                >\n                  Chat with our support team\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      {/* End FAQ CTA Section */}\n    </>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/cta-sections/faq-cta.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"}],"description":"A short FAQ list paired with a closing prompt and button. Answers the last objections and nudges readers to convert at the end of a long page.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}