{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-interactive-preview",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/faq-section/faq-interactive-preview.tsx",
      "content": "'use client'\r\nimport React, { useState } from 'react'\r\nimport { AlignStartVertical, ArrowRight, Sparkles } from 'lucide-react'\r\nimport { motion, AnimatePresence } from 'motion/react'\r\nimport { cn } from '@/lib/utils'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\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  img: string\r\n}\r\n\r\nconst FAQ_DATA: FAQItem[] = [\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    img: 'https://images.unsplash.com/photo-1768280511074-3b3effe7a139?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\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    img: 'https://images.unsplash.com/photo-1759269834957-3457c9ee46c7?q=80&w=627&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\r\n  },\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    img: 'https://images.unsplash.com/photo-1754405300142-246a9bf917d9?q=80&w=627&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\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 the Gemini AI API for our intelligent features.',\r\n    img: 'https://images.unsplash.com/photo-1738510992679-41f599ec9399?q=80&w=627&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\r\n  },\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, PayPal, and cryptocurrency for our premium enterprise plans.',\r\n    img: 'https://images.unsplash.com/photo-1688909906484-738d78601884?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\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. Your features will remain active until the end of the billing cycle.',\r\n    img: 'https://images.unsplash.com/photo-1703600091728-8d0a2bf13396?q=80&w=711&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\r\n  },\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\". We will send an email with instructions to reset your access securely.',\r\n    img: 'https://images.unsplash.com/photo-1642849206045-d34279481967?q=80&w=711&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\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. We offer team plans for collaborative work environments.',\r\n    img: 'https://images.unsplash.com/photo-1667776384514-a06f0b7675a1?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\r\n  },\r\n]\r\n\r\nexport const FaqInteractivePreview = () => {\r\n  const timelineRef = React.useRef<HTMLDivElement>(null)\r\n  // @ts-ignore\r\n  const [activeItem, setActiveItem] = useState<FAQItem | null>(FAQ_DATA[0])\r\n\r\n  return (\r\n    <section\r\n      className=\"min-h-screen w-full flex flex-col justify-center items-center relative bg-white\"\r\n      ref={timelineRef}\r\n    >\r\n      <TimelineAnimation\r\n        timelineRef={timelineRef}\r\n        animationNum={0}\r\n        as=\"h1\"\r\n        className=\"text-2xl sm:text-3xl font-medium text-neutral-900 mb-10 text-center\"\r\n      >\r\n        Frequently Asked Questions\r\n      </TimelineAnimation>\r\n      <div className=\"w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 px-4 py-12 relative z-10\">\r\n        <div className=\"space-y-4 \">\r\n          {FAQ_DATA.slice(0, 6).map((item, i) => (\r\n            <motion.button\r\n              key={item.id}\r\n              onMouseEnter={() => setActiveItem(item)}\r\n              onClick={() => setActiveItem(item)}\r\n              className={cn(\r\n                'w-full text-left px-4 py-6 rounded-2xl cursor-pointer transition-shadow duration-300 flex items-center justify-between group',\r\n                activeItem?.id === item.id\r\n                  ? 'bg-white text-black shadow-2xl scale-[1.02]'\r\n                  : 'bg-white  text-slate-600 hover:bg-slate-50'\r\n              )}\r\n            >\r\n              <span className=\"text-lg font-semibold font-spaceGrotesk\">\r\n                {item.question}\r\n              </span>\r\n              <ArrowRight\r\n                className={cn(\r\n                  'transition-transform',\r\n                  activeItem?.id === item.id\r\n                    ? 'translate-x-0'\r\n                    : '-translate-x-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-0'\r\n                )}\r\n              />\r\n            </motion.button>\r\n          ))}\r\n        </div>\r\n\r\n        <AnimatePresence mode=\"wait\">\r\n          <motion.div\r\n            key={activeItem?.id}\r\n            // layoutId={activeItem?.id}\r\n            initial={{ opacity: 0, x: 20 }}\r\n            animate={{ opacity: 1, x: 0 }}\r\n            exit={{ opacity: 0, x: -20 }}\r\n            className=\"bg-neutral-100 rounded-xl p-6 relative h-full min-h-[500px] flex flex-col justify-center shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_1px_1px_0px_rgba(0,0,0,0.05),0px_2px_2px_0px_rgba(0,0,0,0.05),0px_2px_4px_0px_rgba(0,0,0,0.05)]\"\r\n          >\r\n            <div className=\"relative z-10 space-y-4\">\r\n              <span className=\" text-xs font-semibold uppercase tracking-widest rounded-full  inline-block\">\r\n                Magic Preview\r\n              </span>\r\n              <h3 className=\"text-3xl font-semibold font-spaceGrotesk text-slate-900 leading-tight\">\r\n                {activeItem?.question}\r\n              </h3>\r\n              <p className=\"text-slate-600 leading-relaxed\">\r\n                {activeItem?.answer}\r\n              </p>\r\n              <img\r\n                src={activeItem?.img}\r\n                alt={activeItem?.question}\r\n                className=\"aspect-video rounded-lg mt-4 object-cover\"\r\n              />\r\n            </div>\r\n          </motion.div>\r\n        </AnimatePresence>\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"
}