FAQ Section

1"use client";
2 
3import { AnimatePresence, motion } from "framer-motion";
4import { ChevronDown, HelpCircle } from "lucide-react";
5import { useId, useState } from "react";
6 
7const faqs = [
8  {
9    question: "How do I get started?",
10    answer:
11      "Simply install the library using npm or yarn, import the components you need, and start building amazing interfaces!",
12  },
13  {
14    question: "Is this library free to use?",
15    answer:
16      "Yes, the library is completely free and open source. You can use it in both personal and commercial projects.",
17  },
18  {
19    question: "Can I customize the animations?",
20    answer:
21      "Absolutely! All components are fully customizable. You can modify colors, durations, easing functions, and more.",
22  },
23  {
24    question: "Does it work with Next.js?",
25    answer:
26      "Yes, all components are fully compatible with Next.js, including both App Router and Pages Router.",
27  },
28  {
29    question: "Is TypeScript supported?",
30    answer:
31      "Yes! The entire library is written in TypeScript and includes comprehensive type definitions.",
32  },
33];
34 
35export function FAQSectionBaseui() {
36  const [openIndex, setOpenIndex] = useState<number | null>(0);
37  const baseId = useId();
38 
39  return (
40    <div className="w-full px-4 py-16">
41      <div className="mx-auto max-w-4xl">
42        <motion.div
43          initial={{ opacity: 0, y: 30 }}
44          whileInView={{ opacity: 1, y: 0 }}
45          viewport={{ once: true }}
46          transition={{ duration: 0.6 }}
47          className="mb-12 text-center"
48        >
49          <motion.div
50            initial={{ scale: 0 }}
51            whileInView={{ scale: 1 }}
52            viewport={{ once: true }}
53            transition={{ delay: 0.2, type: "spring" }}
54            className="mb-4 inline-flex rounded-full bg-accent/10 p-3"
55            aria-hidden="true"
56          >
57            <HelpCircle
58              className="h-8 w-8 text-muted-foreground"
59              aria-hidden="true"
60            />
61          </motion.div>
62          <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
63            Frequently Asked Questions
64          </h2>
65          <p className="text-sm text-foreground/70 sm:text-base md:text-lg">
66            Everything you need to know about our library
67          </p>
68        </motion.div>
69 
70        <div className="space-y-4">
71          {faqs.map((faq, index) => {
72            const questionId = `${baseId}-question-${index}`;
73            const answerId = `${baseId}-answer-${index}`;
74// … truncated