{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-tabbed-explorer",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/faq-section/faq-tabbed-explorer.tsx",
      "content": "'use client'\r\nimport React, { useState } from 'react'\r\nimport {\r\n  Accordion,\r\n  AccordionItem,\r\n  AccordionHeader,\r\n  AccordionPanel,\r\n} from '@/components/ui/accordion'\r\nimport { LayoutGrid, ShieldCheck, Cpu, CreditCard } from 'lucide-react'\r\nimport { cn } from '@/lib/utils'\r\n\r\ninterface FAQItem {\r\n  id: string\r\n  question: string\r\n  answer: string\r\n  category: 'general' | 'technical' | 'billing' | 'account'\r\n}\r\n\r\ntype FAQCategory = FAQItem['category']\r\n\r\nconst FAQ_DATA: FAQItem[] = [\r\n  // ───────────────── GENERAL ─────────────────\r\n  {\r\n    id: 'g1',\r\n    category: 'general',\r\n    question: 'What is this platform about?',\r\n    answer:\r\n      'This is a premium showcase platform designed to demonstrate modern UI patterns, including sophisticated accordions and AI-driven features.',\r\n  },\r\n  {\r\n    id: 'g2',\r\n    category: 'general',\r\n    question: 'How do I get started?',\r\n    answer:\r\n      'Simply browse through our various sections. If you have a specific question, use our AI Assistant at the bottom of the page.',\r\n  },\r\n  {\r\n    id: 'g3',\r\n    category: 'general',\r\n    question: 'Who is this platform for?',\r\n    answer:\r\n      'This platform is built for designers, developers, founders, and teams who want high-quality UI patterns and modern interaction examples.',\r\n  },\r\n  {\r\n    id: 'g4',\r\n    category: 'general',\r\n    question: 'Do I need an account to explore the content?',\r\n    answer:\r\n      'No account is required to explore public sections. An account is only needed for premium features and saved configurations.',\r\n  },\r\n  {\r\n    id: 'g5',\r\n    category: 'general',\r\n    question: 'Is this platform suitable for production use?',\r\n    answer:\r\n      'Yes. All components follow production-ready patterns and can be adapted directly into real-world applications.',\r\n  },\r\n\r\n  // ───────────────── TECHNICAL ─────────────────\r\n  {\r\n    id: 't1',\r\n    category: 'technical',\r\n    question: 'Is it mobile responsive?',\r\n    answer:\r\n      'Absolutely. Every component is built with a mobile-first approach using Tailwind CSS, ensuring a seamless experience across all devices.',\r\n  },\r\n  {\r\n    id: 't2',\r\n    category: 'technical',\r\n    question: 'What technologies are used?',\r\n    answer:\r\n      'We use React 18, TypeScript, Framer Motion for animations, and modern API integrations for intelligent features.',\r\n  },\r\n  {\r\n    id: 't3',\r\n    category: 'technical',\r\n    question: 'Can I customize the components?',\r\n    answer:\r\n      'Yes. All components are designed to be customizable through props, Tailwind utility classes, and configuration options.',\r\n  },\r\n  {\r\n    id: 't4',\r\n    category: 'technical',\r\n    question: 'Does this support dark mode?',\r\n    answer:\r\n      'Yes. Dark mode is fully supported and follows system preferences or manual user selection.',\r\n  },\r\n  {\r\n    id: 't5',\r\n    category: 'technical',\r\n    question: 'Is server-side rendering supported?',\r\n    answer:\r\n      'Yes. The platform is compatible with Next.js and supports both server-side rendering and static generation.',\r\n  },\r\n\r\n  // ───────────────── BILLING ─────────────────\r\n  {\r\n    id: 'b1',\r\n    category: 'billing',\r\n    question: 'What payment methods are accepted?',\r\n    answer:\r\n      'We accept all major credit cards and PayPal for paid plans. Enterprise billing options are available on request.',\r\n  },\r\n  {\r\n    id: 'b2',\r\n    category: 'billing',\r\n    question: 'Can I cancel my subscription anytime?',\r\n    answer:\r\n      'Yes, you can cancel your subscription from your account dashboard at any time. Access remains until the billing period ends.',\r\n  },\r\n  {\r\n    id: 'b3',\r\n    category: 'billing',\r\n    question: 'Do you offer refunds?',\r\n    answer:\r\n      'Refunds are handled on a case-by-case basis. Please contact support if you believe you were charged incorrectly.',\r\n  },\r\n  {\r\n    id: 'b4',\r\n    category: 'billing',\r\n    question: 'Are there team or enterprise plans?',\r\n    answer:\r\n      'Yes. We offer team and enterprise plans with additional features, priority support, and flexible billing.',\r\n  },\r\n  {\r\n    id: 'b5',\r\n    category: 'billing',\r\n    question: 'Will I be charged automatically?',\r\n    answer:\r\n      'Yes. Subscriptions renew automatically unless canceled before the next billing cycle.',\r\n  },\r\n\r\n  // ───────────────── ACCOUNT ─────────────────\r\n  {\r\n    id: 'a1',\r\n    category: 'account',\r\n    question: 'How do I reset my password?',\r\n    answer:\r\n      'Go to the login page and click on \"Forgot Password\". You will receive an email with reset instructions.',\r\n  },\r\n  {\r\n    id: 'a2',\r\n    category: 'account',\r\n    question: 'Can I share my account?',\r\n    answer:\r\n      'Sharing accounts is against our terms of service. Team plans are available for collaborative use.',\r\n  },\r\n  {\r\n    id: 'a3',\r\n    category: 'account',\r\n    question: 'How do I delete my account?',\r\n    answer:\r\n      'You can request account deletion from the account settings page or by contacting support.',\r\n  },\r\n  {\r\n    id: 'a4',\r\n    category: 'account',\r\n    question: 'Can I change my email address?',\r\n    answer:\r\n      'Yes. Email addresses can be updated from the account settings section after verification.',\r\n  },\r\n  {\r\n    id: 'a5',\r\n    category: 'account',\r\n    question: 'How is my data secured?',\r\n    answer:\r\n      'We use industry-standard security practices, including encryption and secure authentication, to protect user data.',\r\n  },\r\n]\r\n\r\nexport const FaqTabbedExplorer = () => {\r\n  const [activeTab, setActiveTab] = useState<FAQCategory>('general')\r\n  const categories: { id: FAQCategory; icon: any; label: string }[] = [\r\n    { id: 'general', icon: LayoutGrid, label: 'General' },\r\n    { id: 'technical', icon: Cpu, label: 'Technical' },\r\n    { id: 'billing', icon: CreditCard, label: 'Billing' },\r\n    { id: 'account', icon: ShieldCheck, label: 'Account' },\r\n  ]\r\n\r\n  const filteredItems = FAQ_DATA.filter((item) => item.category === activeTab)\r\n\r\n  return (\r\n    <section className=\"w-full min-h-screen flex items-center justify-center bg-white\">\r\n      <div className=\"w-full max-w-5xl mx-auto bg-slate-50 rounded-3xl border border-slate-200 flex flex-col md:flex-row justify-center\">\r\n        <div className=\"w-full md:w-72 bg-slate-50 p-6 border-b md:border-b-0 md:border-r border-slate-200 pt-10 rounded-l-3xl\">\r\n          <h3 className=\"text-sm font-semibold font-spaceGrotesk text-slate-400 uppercase tracking-widest mb-4 px-2\">\r\n            Knowledge Base\r\n          </h3>\r\n          <nav className=\"space-y-2\">\r\n            {categories.map((cat) => (\r\n              <button\r\n                key={cat.id}\r\n                onClick={() => setActiveTab(cat.id)}\r\n                className={cn(\r\n                  'w-full flex items-center font-spaceGrotesk cursor-pointer gap-3 px-2 py-3 border rounded-xl transition-all font-medium',\r\n                  activeTab === cat.id\r\n                    ? 'bg-neutral-100 text-black border-neutral-200 shadow-primary-500/30 shadow-[30px_54px_67px_0px_rgba(209,217,230,0.67),25px_27px_27px_-7px_rgba(209,217,230,0.34),-34px_-30px_65px_0px_rgba(255,255,255,0.75),-9px_-20px_29px_0px_rgba(255,255,255,0.54),-13px_-11px_22px_7px_rgba(255,255,255,0.25),-16px_-7px_21px_4px_rgba(255,255,255,0.25)]'\r\n                    : 'text-slate-600 hover:bg-slate-200/50  border-slate-50'\r\n                )}\r\n              >\r\n                <cat.icon size={18} />\r\n                {cat.label}\r\n              </button>\r\n            ))}\r\n          </nav>\r\n        </div>\r\n        <div className=\"flex-1 p-8\">\r\n          <div className=\"mb-8\">\r\n            <h2 className=\"text-2xl font-spaceGrotesk font-semibold text-slate-900 mb-2 capitalize\">\r\n              {activeTab} Questions\r\n            </h2>\r\n            <p className=\"text-slate-500 text-sm\">\r\n              Find answers specifically related to your {activeTab} inquiries.\r\n            </p>\r\n          </div>\r\n          <div className=\"space-y-4\">\r\n            <Accordion multiple={false} defaultValue={filteredItems[0]?.id}>\r\n              {filteredItems.map((item) => (\r\n                <AccordionItem\r\n                  key={item.id}\r\n                  value={item.id}\r\n                  className=\"border border-neutral-200 bg-transparent mb-4\"\r\n                >\r\n                  <AccordionHeader className=\"rounded-xl hover:bg-slate-50 bg-white py-4 px-3 font-semibold font-spaceGrotesk\">\r\n                    <span className=\"text-slate-900\">{item.question}</span>\r\n                  </AccordionHeader>\r\n                  <AccordionPanel className=\"px-0 bg-white  data-active:bg-white\">\r\n                    <p className=\"pt-3\">{item.answer}</p>\r\n                  </AccordionPanel>\r\n                </AccordionItem>\r\n              ))}\r\n            </Accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}