"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Plus, Minus } from "lucide-react"; const faqs = [ { question: "Can I use these components in commercial projects?", answer: "Yes! All components in the free tier are licensed under MIT. You can use them in your personal and commercial projects without any attribution." }, { question: "Do I need to install any heavy dependencies?", answer: "No. The components are built strictly using standard Tailwind CSS classes, React, and Framer Motion for animations. Just copy, paste, and you're good to go." }, { question: "How do I customize the colors?", answer: "Because everything uses Tailwind CSS, you can simply change the class names directly in the code. We use standard colors like 'emerald-500' which you can replace globally." }, { question: "Is there a premium version available?", answer: "Yes! We offer a Full-Stack Boilerplate in our Digital Store that comes pre-configured with authentication, databases, and all these UI blocks pre-installed." }, ]; export function AccordionFAQ() { const [openIndex, setOpenIndex] = useState(0); const toggleOpen = (index: number) => { setOpenIndex(openIndex === index ? null : index); }; return (

Frequently Asked Questions

Everything you need to know about the product and billing.

{faqs.map((faq, index) => { const isOpen = openIndex === index; return (

{isOpen && (

{faq.answer}

)}

); })}

); }