{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-section-shadcnui",
  "type": "registry:page",
  "title": "FAQ Section",
  "description": "Animated FAQ section with expandable questions and smooth transitions",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/faq-section.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { ChevronDown, HelpCircle } from \"lucide-react\";\nimport { useId, useState } from \"react\";\n\nconst faqs = [\n  {\n    question: \"How do I get started?\",\n    answer:\n      \"Simply install the library using npm or yarn, import the components you need, and start building amazing interfaces!\",\n  },\n  {\n    question: \"Is this library free to use?\",\n    answer:\n      \"Yes, the library is completely free and open source. You can use it in both personal and commercial projects.\",\n  },\n  {\n    question: \"Can I customize the animations?\",\n    answer:\n      \"Absolutely! All components are fully customizable. You can modify colors, durations, easing functions, and more.\",\n  },\n  {\n    question: \"Does it work with Next.js?\",\n    answer:\n      \"Yes, all components are fully compatible with Next.js, including both App Router and Pages Router.\",\n  },\n  {\n    question: \"Is TypeScript supported?\",\n    answer:\n      \"Yes! The entire library is written in TypeScript and includes comprehensive type definitions.\",\n  },\n];\n\nexport function FAQSection() {\n  const [openIndex, setOpenIndex] = useState<number | null>(0);\n  const baseId = useId();\n\n  return (\n    <div className=\"w-full px-4 py-16\">\n      <div className=\"mx-auto max-w-4xl\">\n        <motion.div\n          initial={{ opacity: 0, y: 30 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-12 text-center\"\n        >\n          <motion.div\n            initial={{ scale: 0 }}\n            whileInView={{ scale: 1 }}\n            viewport={{ once: true }}\n            transition={{ delay: 0.2, type: \"spring\" }}\n            className=\"mb-4 inline-flex rounded-full bg-accent/10 p-3\"\n            aria-hidden=\"true\"\n          >\n            <HelpCircle\n              className=\"h-8 w-8 text-[var(--muted-foreground)]\"\n              aria-hidden=\"true\"\n            />\n          </motion.div>\n          <h2 className=\"mb-4 text-3xl font-bold sm:text-4xl md:text-5xl\">\n            Frequently Asked Questions\n          </h2>\n          <p className=\"text-sm text-[var(--foreground)]/70 sm:text-base md:text-lg\">\n            Everything you need to know about our library\n          </p>\n        </motion.div>\n\n        <div className=\"space-y-4\">\n          {faqs.map((faq, index) => {\n            const questionId = `${baseId}-question-${index}`;\n            const answerId = `${baseId}-answer-${index}`;\n\n            return (\n              <motion.div\n                key={index}\n                initial={{ opacity: 0, y: 20 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true }}\n                transition={{ delay: index * 0.1 }}\n              >\n                <Card className=\"overflow-hidden  bg-[var(--card-bg)]\">\n                  <CardHeader>\n                    <motion.button\n                      type=\"button\"\n                      onClick={() =>\n                        setOpenIndex(openIndex === index ? null : index)\n                      }\n                      className=\"flex w-full items-center justify-between text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-white/70\"\n                      whileHover={{ x: 4 }}\n                      aria-expanded={openIndex === index}\n                      aria-controls={answerId}\n                      id={questionId}\n                    >\n                      <span className=\"text-lg font-semibold\">\n                        {faq.question}\n                      </span>\n                      <motion.div\n                        animate={{ rotate: openIndex === index ? 180 : 0 }}\n                        transition={{ duration: 0.3 }}\n                        aria-hidden=\"true\"\n                      >\n                        <ChevronDown className=\"h-5 w-5 text-[var(--foreground)]/60\" />\n                      </motion.div>\n                    </motion.button>\n                  </CardHeader>\n\n                  <AnimatePresence initial={false}>\n                    {openIndex === index && (\n                      <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: \"auto\", opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{ duration: 0.3, ease: \"easeInOut\" }}\n                        role=\"region\"\n                        id={answerId}\n                        aria-labelledby={questionId}\n                      >\n                        <CardContent className=\"pt-0\">\n                          <p className=\"text-[var(--foreground)]/70\">\n                            {faq.answer}\n                          </p>\n                        </CardContent>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </Card>\n              </motion.div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/faq-section-shadcnui.tsx"
    }
  ]
}