FAQ Exemple 1

1'use client';
2
3import { useState, useEffect, useRef } from 'react';
4import { Plus } from 'lucide-react';
5import gsap from 'gsap';
6import { ScrollTrigger } from 'gsap/ScrollTrigger';
7
8gsap.registerPlugin(ScrollTrigger);
9
10interface FAQItem {
11  id: string;
12  question: string;
13  answer: string;
14}
15
16const faqItems: FAQItem[] = [
17  {
18    id: "001",
19    question: "What is included in Bag/UI?",
20    answer:
21        "Bag/UI includes production-ready React components built with shadcn/ui and Tailwind CSS. Each block is fully customizable, responsive, and ready to integrate directly into your projects.",
22  },
23  {
24    id: "002",
25    question: "Do I need to install dependencies?",
26    answer:
27        "Components are built with React, TypeScript, and Tailwind CSS. If your project already uses these, you can paste the components directly. For new projects, we provide setup instructions in the documentation.",
28  },
29  {
30    id: "003",
31    question: "Can I customize the components?",
32    answer:
33        "Absolutely! All components are fully customizable. You have complete access to the code and can modify colors, typography, spacing, and functionality to match your design system.",
34  },
35  {
36    id: "004",
37    question: "What about browser support?",
38    answer:
39        "Components are tested on all modern browsers including Chrome, Firefox, Safari, and Edge. We use standard web technologies that work consistently across platforms.",
40  },
41  {
42    id: "005",
43    question: "Is there a license?",
44    answer:
45        "Yes, each component comes with a clear license. You can use components in personal projects, commercial projects, and client work. Check the license terms in the documentation.",
46  },
47  {
48    id: "006",
49    question: "How often are new blocks added?",
50    answer:
51        "New blocks are released regularly. All updates are free for existing users. Subscribe to our newsletter for announcements about new components and features.",
52  },
53];
54
55export default function FAQ() {
56  const [expandedId, setExpandedId] = useState<string>('');
57  const containerRef = useRef<HTMLDivElement>(null);
58  const headerRef = useRef<HTMLDivElement>(null);
59  const faqListRef = useRef<HTMLDivElement>(null);
60  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);
61
62  useEffect(() => {
63    gsap.registerPlugin(ScrollTrigger);
64
65    const ctx = gsap.context(() => {
66      // Animate header
67      if (headerRef.current) {
68// … truncated