{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq1",
  "title": "FAQ Exemple 1",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/faq/faq1.tsx",
      "content": "'use client';\r\n\r\nimport { useState, useEffect, useRef } from 'react';\r\nimport { Plus } from 'lucide-react';\r\nimport gsap from 'gsap';\r\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\r\n\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\ninterface FAQItem {\r\n  id: string;\r\n  question: string;\r\n  answer: string;\r\n}\r\n\r\nconst faqItems: FAQItem[] = [\r\n  {\r\n    id: \"001\",\r\n    question: \"What is included in Bag/UI?\",\r\n    answer:\r\n        \"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.\",\r\n  },\r\n  {\r\n    id: \"002\",\r\n    question: \"Do I need to install dependencies?\",\r\n    answer:\r\n        \"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.\",\r\n  },\r\n  {\r\n    id: \"003\",\r\n    question: \"Can I customize the components?\",\r\n    answer:\r\n        \"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.\",\r\n  },\r\n  {\r\n    id: \"004\",\r\n    question: \"What about browser support?\",\r\n    answer:\r\n        \"Components are tested on all modern browsers including Chrome, Firefox, Safari, and Edge. We use standard web technologies that work consistently across platforms.\",\r\n  },\r\n  {\r\n    id: \"005\",\r\n    question: \"Is there a license?\",\r\n    answer:\r\n        \"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.\",\r\n  },\r\n  {\r\n    id: \"006\",\r\n    question: \"How often are new blocks added?\",\r\n    answer:\r\n        \"New blocks are released regularly. All updates are free for existing users. Subscribe to our newsletter for announcements about new components and features.\",\r\n  },\r\n];\r\n\r\nexport default function FAQ() {\r\n  const [expandedId, setExpandedId] = useState<string>('');\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const headerRef = useRef<HTMLDivElement>(null);\r\n  const faqListRef = useRef<HTMLDivElement>(null);\r\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\r\n\r\n  useEffect(() => {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    const ctx = gsap.context(() => {\r\n      // Animate header\r\n      if (headerRef.current) {\r\n        gsap.fromTo(\r\n            headerRef.current,\r\n            { opacity: 0, y: 40 },\r\n            {\r\n              opacity: 1,\r\n              y: 0,\r\n              duration: 0.8,\r\n              ease: 'power2.out',\r\n              scrollTrigger: {\r\n                trigger: headerRef.current,\r\n                start: 'top 80%',\r\n                end: 'top 50%',\r\n                scrub: 1,\r\n              },\r\n            }\r\n        );\r\n      }\r\n\r\n      // Animate FAQ items with stagger\r\n      itemsRef.current.forEach((item, index) => {\r\n        if (item) {\r\n          gsap.fromTo(\r\n              item,\r\n              { opacity: 0, y: 30 },\r\n              {\r\n                opacity: 1,\r\n                y: 0,\r\n                duration: 0.6,\r\n                ease: 'power2.out',\r\n                scrollTrigger: {\r\n                  trigger: item,\r\n                  start: 'top 85%',\r\n                  end: 'top 60%',\r\n                  scrub: 1,\r\n                },\r\n                delay: index * 0.05,\r\n              }\r\n          );\r\n        }\r\n      });\r\n    }, containerRef);\r\n\r\n    return () => ctx.revert();\r\n  }, []);\r\n\r\n  const toggleFAQ = (id: string, index: number) => {\r\n    const itemEl = itemsRef.current[index];\r\n    const contentEl = itemEl?.querySelector(`#faq-content-${id}`) as HTMLElement;\r\n\r\n    if (!contentEl) return;\r\n\r\n    const isExpanding = expandedId !== id;\r\n    const lenisEase = (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t));\r\n\r\n    if (isExpanding) {\r\n      // Close other open item\r\n      if (expandedId) {\r\n        const otherIndex = faqItems.findIndex((item) => item.id === expandedId);\r\n        const otherItemEl = itemsRef.current[otherIndex];\r\n        const otherContentEl = otherItemEl?.querySelector(\r\n            `#faq-content-${expandedId}`\r\n        ) as HTMLElement;\r\n        if (otherContentEl) {\r\n          gsap.to(otherContentEl, {\r\n            height: 0,\r\n            opacity: 0,\r\n            duration: 0.6,\r\n            ease: lenisEase,\r\n          });\r\n        }\r\n      }\r\n\r\n      setExpandedId(id);\r\n\r\n      requestAnimationFrame(() => {\r\n        const actualHeight = contentEl.scrollHeight;\r\n        gsap.fromTo(\r\n            contentEl,\r\n            { height: 0, opacity: 0 },\r\n            {\r\n              height: actualHeight,\r\n              opacity: 1,\r\n              duration: 0.8,\r\n              ease: lenisEase,\r\n            }\r\n        );\r\n\r\n        // Animate text fade in\r\n        const textEl = contentEl.querySelector('p');\r\n        if (textEl) {\r\n          gsap.fromTo(\r\n              textEl,\r\n              { opacity: 0, y: 10 },\r\n              { opacity: 1, y: 0, duration: 0.6, ease: lenisEase, delay: 0.1 }\r\n          );\r\n        }\r\n      });\r\n    } else {\r\n      // Collapse\r\n      gsap.to(contentEl, {\r\n        height: 0,\r\n        opacity: 0,\r\n        duration: 0.6,\r\n        ease: lenisEase,\r\n        onComplete: () => {\r\n          setExpandedId('');\r\n        },\r\n      });\r\n    }\r\n  };\r\n\r\n  return (\r\n      <div ref={containerRef} className=\"min-h-screen \">\r\n        <div className=\"max-w-7xl mx-auto px-3 sm:px-4 md:px-8 py-2 sm:py-6 md:py-16\">\r\n          {/* Main Layout - Two columns: Title on left, FAQs on right */}\r\n          <div className=\"flex flex-col md:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-24\">\r\n            {/* Left Column - Title & Description */}\r\n            <div ref={headerRef} className=\"w-full md:w-1/3 flex-shrink-0\">\r\n              <h1 className=\"font-sans text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-normal tracking-tight text-black leading-none mb-4 sm:mb-6\">\r\n                FAQ.\r\n              </h1>\r\n              <p className=\"font-sans text-xs sm:text-sm md:text-base font-normal leading-relaxed text-black/70\">\r\n                Everything you need to know about Bag/UI. Can't find what you're\r\n                looking for? Reach out to our support team.\r\n              </p>\r\n            </div>\r\n\r\n            {/* Right Column - FAQ Items */}\r\n            <div ref={faqListRef} className=\"flex-1 w-full md:w-2/3\">\r\n              <div className=\"space-y-0\">\r\n                {faqItems.map((item, index) => (\r\n                    <div\r\n                        key={item.id}\r\n                        ref={(el) => {\r\n                          if (el) itemsRef.current[index] = el;\r\n                        }}\r\n                        className=\"border-b border-black/10\"\r\n                    >\r\n                      <button\r\n                          onClick={() => toggleFAQ(item.id, index)}\r\n                          className=\"w-full flex items-start justify-between gap-4 sm:gap-6 py-4 p-3 sm:py-5 md:py-6 hover:bg-black/2 transition-colors text-left group cursor-pointer rounded\"\r\n                      >\r\n                        <h3 className=\"font-sans text-sm sm:text-base md:text-lg font-normal tracking-tight text-black flex-1 text-left\">\r\n                          {item.question}\r\n                        </h3>\r\n                        <span className=\"flex-shrink-0 text-black/40 group-hover:text-black transition-colors pointer-events-none min-w-fit\">\r\n                      {expandedId === item.id ? (\r\n                          <span className=\"text-lg sm:text-xl font-light\">−</span>\r\n                      ) : (\r\n                          <Plus size={20} className=\"sm:w-6 sm:h-6\" />\r\n                      )}\r\n                    </span>\r\n                      </button>\r\n\r\n                      {/* Expanded Content */}\r\n                      <div\r\n                          id={`faq-content-${item.id}`}\r\n                          style={{\r\n                            overflow: 'hidden',\r\n                            height: 0,\r\n                            opacity: 0,\r\n                          }}\r\n                      >\r\n                        <div className=\"pb-4 sm:pb-5 md:pb-6 border-t border-black/5\">\r\n                          <p className=\"font-sans text-xs sm:text-sm md:text-base font-normal p-6 leading-relaxed text-black/70 pt-4 sm:pt-5 md:pt-6\">\r\n                            {item.answer}\r\n                          </p>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n  );\r\n}",
      "type": "registry:block",
      "target": "components/blocks/faq1.tsx"
    }
  ],
  "type": "registry:block"
}