// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name FAQ 02 * @description A two-column FAQ layout with sticky header on left * and expandable answer cards on the right. * * @slots faq, faq-container, faq-header, faq-heading, faq-description, * faq-list, faq-item, faq-question, faq-answer * @variant split * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { ChevronDown } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FaqItem { /** Unique identifier */ id: string /** Question text */ question: string /** Answer text */ answer: string } interface Faq02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Array of FAQ items */ faqs?: FaqItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFaqs: FaqItem[] = [ { id: "faq-1", question: "What payment methods do you accept?", answer: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans. All payments are processed securely through our payment provider.", }, { id: "faq-2", question: "Can I cancel my subscription at any time?", answer: "Yes, you can cancel your subscription at any time from your account settings. Your access will continue until the end of your current billing period.", }, { id: "faq-3", question: "Do you offer a free trial?", answer: "Yes, we offer a 14-day free trial on all plans. No credit card required to start. You'll have full access to all features during the trial period.", }, { id: "faq-4", question: "How do I get support?", answer: "We offer 24/7 support through our help center, email, and live chat. Pro and Enterprise customers also get access to priority support with faster response times.", }, { id: "faq-5", question: "Can I upgrade or downgrade my plan?", answer: "Absolutely! You can change your plan at any time. When upgrading, you'll be charged the prorated difference. When downgrading, the new rate applies at your next billing cycle.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Faq02({ heading = "Frequently asked questions", description = "Can't find the answer you're looking for? Reach out to our customer support team.", faqs = defaultFaqs, className, }: Faq02Props) { return (

{/* Left Column - Header */}

{heading}

{description && (

{description}

)}

{/* Right Column - FAQ Items */}

{faq.question}: {faq.answer}

) } export default Faq02 export { Faq02, type Faq02Props, type FaqItem }