{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-faq-sections-tabbed-categories","type":"registry:block","title":"Tabbed Categories","files":[{"path":"components/blocks/marketing/faq-sections/tabbed-categories.tsx","content":"import { useState } from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\n\nconst categories = [\n  {\n    id: 'general',\n    label: 'General',\n  },\n  {\n    id: 'billing',\n    label: 'Billing & Pricing',\n  },\n  {\n    id: 'support',\n    label: 'Support & Help',\n  },\n  {\n    id: 'features',\n    label: 'Features',\n  },\n];\n\nconst faqsByCategory = {\n  general: [\n    {\n      question: 'What is Acme and how does it work?',\n      answer:\n        'Acme is a comprehensive platform designed to help teams collaborate more efficiently. Our tools integrate seamlessly with your existing workflow, providing powerful features without the complexity.',\n    },\n    {\n      question: 'Is Acme suitable for individual users?',\n      answer:\n        'Absolutely! While Acme is great for teams, many of our features are perfect for individual users looking to boost their productivity and organization.',\n    },\n    {\n      question: 'Can I use Acme on multiple devices?',\n      answer:\n        'Yes, Acme works across all your devices. Your data syncs automatically, so you can switch between desktop, mobile, and tablet seamlessly.',\n    },\n  ],\n  billing: [\n    {\n      question: 'How much does Acme cost?',\n      answer:\n        'Acme offers flexible pricing options starting from $10/month for individual users and $25/month for teams. We also offer custom enterprise plans for larger organizations.',\n    },\n    {\n      question: 'Do you offer a free trial?',\n      answer:\n        'Yes, all plans come with a 14-day free trial, no credit card required. You can explore all features before deciding which plan works best for you.',\n    },\n    {\n      question: 'Can I change my plan later?',\n      answer:\n        'You can upgrade, downgrade, or cancel your plan at any time. Changes to your subscription will take effect at the next billing cycle.',\n    },\n  ],\n  support: [\n    {\n      question: 'How can I contact support?',\n      answer:\n        'Our support team is available 24/7 via email and chat. Premium plans also include priority support and dedicated account managers.',\n    },\n    {\n      question: 'Do you offer onboarding assistance?',\n      answer:\n        'Yes, all plans include basic onboarding resources. Team and Enterprise plans include personalized onboarding sessions with our customer success team.',\n    },\n    {\n      question: 'Where can I find documentation?',\n      answer:\n        'Comprehensive documentation is available in our Help Center. We also provide video tutorials and regular webinars for users who prefer visual learning.',\n    },\n  ],\n  features: [\n    {\n      question: 'What integrations does Acme offer?',\n      answer:\n        \"Acme integrates with over 50 popular tools including Slack, GitHub, Trello, and Zoom. We're constantly adding new integrations based on user feedback.\",\n    },\n    {\n      question: 'Is there a limit to how many projects I can create?',\n      answer:\n        'No, all plans include unlimited projects. The only limitation is on the number of team members who can access those projects, which varies by plan.',\n    },\n    {\n      question: 'Can I export my data from Acme?',\n      answer:\n        'Yes, you can export all your data at any time in common formats like CSV, JSON, or PDF. We believe your data belongs to you and make it easy to take it with you.',\n    },\n  ],\n};\n\nexport default function TabbedCategories() {\n  const [activeCategory, setActiveCategory] = useState('general');\n\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          Everything you need to know about our product and billing\n        </p>\n      </div>\n      {/* End Title */}\n\n      <div className=\"mx-auto max-w-4xl\">\n        {/* Tabs for larger screens */}\n        <div className=\"mb-8 hidden space-x-6 border-b md:flex\">\n          {categories.map((category) => (\n            <button\n              key={category.id}\n              onClick={() => setActiveCategory(category.id)}\n              className={cn(\n                'relative px-1 pb-4 font-medium',\n                activeCategory === category.id\n                  ? 'text-primary border-primary -mb-px border-b-2'\n                  : 'text-muted-foreground hover:text-foreground'\n              )}\n            >\n              {category.label}\n            </button>\n          ))}\n        </div>\n\n        {/* Dropdown for mobile */}\n        <div className=\"mb-8 md:hidden\">\n          <Select value={activeCategory} onValueChange={setActiveCategory}>\n            <SelectTrigger className=\"w-full\">\n              <SelectValue placeholder=\"Select category\" />\n            </SelectTrigger>\n            <SelectContent>\n              {categories.map((category) => (\n                <SelectItem key={category.id} value={category.id}>\n                  {category.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        {/* FAQ Content */}\n        <div className=\"space-y-8\">\n          {faqsByCategory[activeCategory as keyof typeof faqsByCategory].map(\n            (faq, index) => (\n              <div key={index} className=\"border-b pb-8 last:border-0\">\n                <h3 className=\"mb-2 text-lg font-semibold\">{faq.question}</h3>\n                <p className=\"text-muted-foreground\">{faq.answer}</p>\n              </div>\n            )\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/faq-sections/tabbed-categories.tsx"},{"path":"components/ui/select.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n","type":"registry:ui","target":"components/ui/select.tsx"}],"description":"An FAQ section with tabs that group questions by category. Visitors pick a topic and see only relevant answers, keeping a broad help area uncluttered.","dependencies":["lucide-react","radix-ui"]}