4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1bca,'use client' import React, { useState } from 'react' import { AlignStartVertical, ArrowRight, Sparkles } from 'lucide-react' import { motion, AnimatePresence } from 'motion/react' import { cn } from '@/lib/utils' import { TimelineAnimation } from '@/components/ui/timeline-animation' interface FAQItem { id: string question: string answer: string category: 'general' | 'technical' | 'billing' | 'account' img: string } const FAQ_DATA: FAQItem[] = [ { id: 'g1', category: 'general', question: 'What is this platform about?', answer: 'This is a premium showcase platform designed to demonstrate modern UI patterns, including sophisticated accordions and AI-driven features.', 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', }, { id: 'g2', category: 'general', question: 'How do I get started?', answer: 'Simply browse through our various sections. If you have a specific question, use our AI Assistant at the bottom of the page.', 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', }, { id: 't1', category: 'technical', question: 'Is it mobile responsive?', answer: 'Absolutely. Every component is built with a mobile-first approach using Tailwind CSS, ensuring a seamless experience across all devices.', 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', }, { id: 't2', category: 'technical', question: 'What technologies are used?', answer: 'We use React 18, TypeScript, Framer Motion for animations, and the Gemini AI API for our intelligent features.', 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', }, { id: 'b1', category: 'billing', question: 'What payment methods are accepted?', answer: 'We accept all major credit cards, PayPal, and cryptocurrency for our premium enterprise plans.', 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', }, { id: 'b2', category: 'billing', question: 'Can I cancel my subscription anytime?', answer: '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.', 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', }, { id: 'a1', category: 'account', question: 'How do I reset my password?', answer: 'Go to the login page and click on "Forgot Password". We will send an email with instructions to reset your access securely.', 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', }, { id: 'a2', category: 'account', question: 'Can I share my account?', answer: 'Sharing accounts is against our terms of service. We offer team plans for collaborative work environments.', 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', }, ] export const FaqInteractivePreview = () => { const timelineRef = React.useRef(null) // @ts-ignore const [activeItem, setActiveItem] = useState(FAQ_DATA[0]) return (

Frequently Asked Questions

{FAQ_DATA.slice(0, 6).map((item, i) => ( setActiveItem(item)} onClick={() => setActiveItem(item)} className={cn( 'w-full text-left px-4 py-6 rounded-2xl cursor-pointer transition-shadow duration-300 flex items-center justify-between group', activeItem?.id === item.id ? 'bg-white text-black shadow-2xl scale-[1.02]' : 'bg-white text-slate-600 hover:bg-slate-50' )} > {item.question} ))}

Magic Preview

{activeItem?.question}

{activeItem?.answer}

) } 52:T582,import type { Variants } from 'motion/react'; import { type HTMLMotionProps, motion, useInView } from 'motion/react'; import type React from 'react'; type TimelineContentProps = { children?: React.ReactNode; animationNum: number; className?: string; timelineRef: React.RefObject; as?: T; customVariants?: Variants; once?: boolean; } & HTMLMotionProps; export const TimelineAnimation = ({ children, animationNum, timelineRef, className, as, customVariants, once = true, ...props }: TimelineContentProps) => { const defaultSequenceVariants = { visible: (i: number) => ({ filter: 'blur(0px)', y: 0, opacity: 1, transition: { delay: i * 0.5, duration: 0.5, }, }), hidden: { filter: 'blur(20px)', y: 0, opacity: 0, }, }; const sequenceVariants = customVariants || defaultSequenceVariants; const isInView = useInView(timelineRef, { once, }); const MotionComponent = motion[as || 'div'] as React.ElementType; return ( {children} ); }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@ui-layouts","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"../../packages/blocks/src/faq-section/faq-interactive-preview.tsx","content":"$51","type":"registry:block"},{"path":"./components/ui/timeline-animation.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]