BetaUnder active development — content may be incomplete or change without notice.

FAQ 2

A centered single-column FAQ layout with accordion-style questions and answers.

0px
Loading Preview...

FAQ 2 is a centered single-column FAQ layout with the header and description at the top, an accordion-style list of questions in the middle, and a "Still have questions?" call-to-action section at the bottom with a contact button. It uses Next.js Link for navigation.

Fields Reference

Field NameTypeRequiredLocalizedDescription
headertextYesYesThe main header text for the FAQ section.
descriptionrichtextNoYesA description or subtitle for the FAQ section.
buttongroupNoNoA call-to-action button with link configuration.
faqsarrayYesYesAn array of FAQ items containing questions and answers.
faqs.questiontextYesYesThe FAQ question.
faqs.answerrichtextNoYesThe FAQ answer.
ctaDescriptionrichtextNoYesA call-to-action description displayed below the FAQs.

Code

//@ts-nocheck
import React from 'react';
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion";
import RichText from '@/components/cms/RichText';
import { CMSLink } from '@/components/cms/Link';
import { Faq2Type } from '@/payload-types';

const Faq2Component: React.FC<Faq2Type> = ({ header, description, button, faqs, ctaDescription }: Faq2Type) => {
    return (
        <section className="container mx-auto px-4 py-16">
            <div className="max-w-3xl mx-auto">
                {/* Header Section */}
                <div className="text-center mb-12">
                    <h2 className="text-4xl font-semibold mb-4">
                        {header}
                    </h2>
                    {description && (
                        <RichText
                            data={description}
                            className="text-muted-foreground"
                        />
                    )}
                </div>

                {/* Accordion */}
                <Accordion defaultValue={["0"]} className="mb-16">
                    {faqs?.map((faq, index) => (
                        <AccordionItem key={index} value={index.toString()}>
                            <AccordionTrigger className="text-left font-semibold">
                                {faq.question}
                            </AccordionTrigger>
                            {faq.answer && (
                                <AccordionContent>
                                    <RichText data={faq.answer} enableGutter={false} className="text-muted-foreground" />
                                </AccordionContent>
                            )}
                        </AccordionItem>
                    )) ?? []}
                </Accordion>

                {/* Still have questions section */}
                {button?.links?.[0] && (
                    <div className="text-center">
                        {ctaDescription && (
                            <div className="mb-6">
                                <RichText
                                    data={ctaDescription}
                                    className="prose-h2:text-2xl prose-headings:text-primary prose-h2:font-semibold prose-h2:mb-2 prose-p:text-muted-foreground"
                                />
                            </div>
                        )}
                        <CMSLink
                            {...button.links[0].link}
                            className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
                        />
                    </div>
                )}
            </div>
        </section>
    );
};

export default Faq2Component;