{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-faq-sections-image-illustrated","type":"registry:block","title":"Image Illustrated","files":[{"path":"components/blocks/marketing/faq-sections/image-illustrated.tsx","content":"import { Button } from '@/components/ui/button';\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\n\nconst faqs = [\n  {\n    question: 'How do teams collaborate on the platform?',\n    answer:\n      'Teams can collaborate seamlessly through shared workspaces, real-time document editing, and integrated communication tools. Our platform makes it easy to assign tasks, track progress, and share feedback in one centralized location.',\n    image:\n      'https://images.unsplash.com/photo-1521737711867-e3b97375f902?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',\n    alt: 'Team collaboration meeting',\n  },\n  {\n    question: 'How secure is the data stored on your platform?',\n    answer:\n      'We implement bank-level security measures including end-to-end encryption, two-factor authentication, and regular security audits. Your data is stored in SOC 2 compliant data centers with 24/7 monitoring and automatic backups.',\n    image:\n      'https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',\n    alt: 'Security shield and data protection',\n  },\n  {\n    question: 'How can I integrate with my existing tools?',\n    answer:\n      'Our platform offers native integrations with over 100 popular tools and services. For custom integrations, you can use our API or Zapier connection. Our support team can also help set up specific integrations for enterprise customers.',\n    image:\n      'https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',\n    alt: 'Connected app integrations',\n  },\n  {\n    question: 'What support options are available?',\n    answer:\n      'We offer multiple support channels including 24/7 chat support, email, and an extensive knowledge base. Enterprise plans include dedicated account managers and priority phone support. Our community forum is also a great resource for connecting with other users.',\n    image:\n      'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',\n    alt: 'Customer support team',\n  },\n  {\n    question: 'How does your pricing model work?',\n    answer:\n      'Our pricing is based on a tiered subscription model with options for monthly or annual billing. We offer plans for individuals, small teams, and enterprises with different feature sets. Custom plans are available for organizations with specific requirements.',\n    image:\n      'https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',\n    alt: 'Subscription pricing plans',\n  },\n];\n\nexport default function ImageIllustrated() {\n  return (\n    <div className=\"container mx-auto max-w-[85rem] px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]\">\n      {/* Title */}\n      <div className=\"mx-auto mb-10 max-w-2xl text-center lg:mb-14\">\n        <h2 className=\"text-2xl font-bold md:text-4xl md:leading-tight\">\n          Frequently Asked Questions\n        </h2>\n        <p className=\"text-muted-foreground mt-4\">\n          Get answers to common questions about our platform\n        </p>\n      </div>\n      {/* End Title */}\n\n      <div className=\"space-y-16\">\n        {faqs.map((faq, index) => (\n          <div\n            key={index}\n            className={`grid items-center gap-8 md:grid-cols-2 md:gap-12 ${\n              index % 2 === 1 ? 'md:grid-flow-dense' : ''\n            }`}\n          >\n            {/* Image Section (swap order based on index) */}\n            <div className={index % 2 === 1 ? 'md:col-start-1' : ''}>\n              <div className=\"relative aspect-video overflow-hidden rounded-xl\">\n                <img\n                  src={faq.image}\n                  alt={faq.alt}\n                  className=\"object-cover\"\n                  sizes=\"(max-width: 768px) 100vw, 50vw\"\n                />\n              </div>\n            </div>\n\n            {/* Content Section */}\n            <div>\n              <h3 className=\"mb-4 text-xl font-semibold\">{faq.question}</h3>\n              <p className=\"text-muted-foreground mb-6\">{faq.answer}</p>\n              <a href=\"#\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Learn more\n                </Button>\n              </a>\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Additional FAQs */}\n      <div className=\"bg-muted/30 mt-24 rounded-xl p-8 md:p-10\">\n        <h3 className=\"mb-6 text-center text-xl font-semibold\">\n          More Questions\n        </h3>\n\n        <div className=\"mx-auto max-w-3xl\">\n          <Accordion type=\"single\" collapsible>\n            <AccordionItem value=\"item-1\">\n              <AccordionTrigger>Can I try before I subscribe?</AccordionTrigger>\n              <AccordionContent>\n                Yes, we offer a 14-day free trial that includes all features. No\n                credit card is required to start your trial.\n              </AccordionContent>\n            </AccordionItem>\n            <AccordionItem value=\"item-2\">\n              <AccordionTrigger>\n                How often do you release updates?\n              </AccordionTrigger>\n              <AccordionContent>\n                We release major updates quarterly and smaller improvements\n                weekly. All updates are automatically available to subscribers\n                at no additional cost.\n              </AccordionContent>\n            </AccordionItem>\n            <AccordionItem value=\"item-3\">\n              <AccordionTrigger>Is there a limit on storage?</AccordionTrigger>\n              <AccordionContent>\n                Different plans come with different storage limits. Our basic\n                plan includes 10GB, while our premium and enterprise plans offer\n                100GB and unlimited storage respectively.\n              </AccordionContent>\n            </AccordionItem>\n          </Accordion>\n        </div>\n      </div>\n\n      {/* CTA Section */}\n      <div className=\"mt-16 text-center\">\n        <h3 className=\"mb-4 text-xl font-semibold\">Still have questions?</h3>\n        <p className=\"text-muted-foreground mx-auto mb-6 max-w-md\">\n          Our team is just an email away. We&apos;re always happy to help with\n          any questions you might have.\n        </p>\n        <a href=\"#\">\n          <Button size=\"lg\">Contact Support</Button>\n        </a>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/faq-sections/image-illustrated.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"},{"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 FAQ section with a supporting illustration beside the question list. Adds visual context and warmth to a help area while answers stay easy to read.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}