FAQ Section

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