Faq 2

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "motion/react";
4import { useState } from "react";
5 
6const ANIMATION_DURATION = 0.6;
7const STAGGER_DELAY = 0.1;
8const INITIAL_Y_OFFSET = 20;
9const HOVER_SCALE = 1.01;
10const TAP_SCALE = 0.99;
11const ROTATION_OPEN = 180;
12const ROTATION_CLOSED = 0;
13const CONTENT_DELAY = 0.1;
14const INITIAL_CONTENT_Y = -10;
15 
16interface FaqsAccordionProps {
17  description?: string;
18  faqs?: Array<{
19    question: string;
20    answer: string;
21  }>;
22  title?: string;
23}
24 
25export function FaqsAccordion({
26  title = "Frequently Asked Questions",
27  description = "Find answers to common questions about our product and services",
28  faqs = [
29    {
30      answer:
31        "Smoothui is a modern UI component library that provides beautiful, animated components for building stunning user interfaces. It includes pre-built components with smooth animations and customizable themes.",
32      question: "What is Smoothui?",
33    },
34    {
35      answer:
36        "Getting started is easy! Simply install the package via npm or yarn, import the components you need, and start building. We provide comprehensive documentation and examples to help you get up and running quickly.",
37      question: "How do I get started?",
38    },
39    {
40      answer:
41        "Yes! Smoothui is completely free and open source. You can use it in both personal and commercial projects without any restrictions. We believe in making beautiful UI components accessible to everyone.",
42      question: "Is it free to use?",
43    },
44    {
45      answer:
46        "Absolutely! All components are fully customizable. You can modify colors, spacing, animations, and more using CSS variables or by extending the component classes. We also provide a theming system for easy customization.",
47      question: "Can I customize the components?",
48    },
49    {
50      answer:
51        "Currently, Smoothui supports React and Next.js. We're working on expanding support to other popular frameworks like Vue, Svelte, and Angular in the coming months.",
52      question: "What frameworks are supported?",
53    },
54    {
55      answer:
56        "We release updates regularly, typically every 2-3 weeks. This includes new components, bug fixes, performance improvements, and new features. You can follow our changelog to stay updated on the latest releases.",
57      question: "How often do you release updates?",
58    },
59  ],
60}: FaqsAccordionProps) {
61  const shouldReduceMotion = useReducedMotion();
62// … truncated