"use client" import * as React from "react" import { motion, useInView, useReducedMotion } from "framer-motion" import { cn } from "@/lib/utils" import { Section } from "@/components/marketing/section" import { transition } from "@/lib/animations" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion" export interface FaqItem { question: string answer: string } export interface FaqSectionProps { /** Section heading. */ heading?: string /** Optional sub-heading. */ subheading?: string /** FAQ items. */ items: FaqItem[] className?: string } /** * Frequently asked questions section with animated accordion. * Renders a heading, optional subheading, and collapsible Q&A items. */ export function FaqSection({ heading = "Frequently asked questions", subheading, items, className, }: FaqSectionProps) { const headRef = React.useRef(null) const headInView = useInView(headRef, { once: true, margin: "-10% 0px" }) const listRef = React.useRef(null) const listInView = useInView(listRef, { once: true, margin: "-5% 0px" }) const reduced = useReducedMotion() return (

FAQ {heading} {subheading && ( {subheading} )}

{items.map((item, i) => ( {item.question} {item.answer} ))}

) }

Prop	Type	Required	Description
`heading`	`string`	yes	Section heading.
`subheading`	`string`	—	Optional sub-heading.
`items`	`FaqItem[]`	yes	FAQ items { question, answer }.

FaqSection

Frequently asked questions

Is Bounce a one-time purchase?

Can I use it for client projects?

What frameworks are supported?

FaqSection

Frequently asked questions

Is Bounce a one-time purchase?

Can I use it for client projects?

What frameworks are supported?