4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.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} ); }; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui-layouts.com/r/faq-interactive-preview.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/faq-interactive-preview","itemId":"@ui-layouts/faq-interactive-preview"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$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"}]}]]}],"$L53"]}]

Faq Interactive Preview

Installation

Files

components

Styles