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

FAQ 1

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

0px
Loading Preview...

FAQ 1 is a 2-column FAQ layout with the header, description, and contact button on the left side, and an accordion-style list of questions on the right side. It's responsive and stacks on mobile devices, using a 2-column grid on large screens.

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.

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 { Faq1Type } from '@/payload-types';

const Faq1Component: React.FC<Faq1Type> = ({ header, description, button, faqs }: Faq1Type) => {
    return (
        <section className="w-full bg-background py-16 px-6 md:py-24 lg:py-32">
            <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 xl:gap-24 items-start">

                {/* Left Column: Header & Contact (Span 5) */}
                <div className="lg:col-span-5 flex flex-col items-start text-left gap-6 lg:gap-8">
                    <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-foreground">
                        {header}
                    </h2>
                    {description && (
                        <RichText data={description} className="text-muted-foreground text-lg lg:text-xl max-w-md lg:max-w-lg" />
                    )}
                    {button?.links?.[0] && (
                        <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-6 mt-2"
                        />
                    )}
                </div>

                {/* Right Column: Accordions (Span 7) */}
                <div className="lg:col-span-7 w-full">
                    <Accordion type="single" >
                        {faqs?.map((faq, index) => (
                            <AccordionItem key={index.toString()} value={index.toString()}>
                                <AccordionTrigger className="text-base md:text-lg lg:text-xl">
                                    {faq.question}
                                </AccordionTrigger>
                                {faq.answer && (
                                    <AccordionContent className="text-muted-foreground leading-relaxed lg:text-lg">
                                        <RichText data={faq.answer} enableProse={false} />
                                    </AccordionContent>
                                )}
                            </AccordionItem>
                        )) ?? []}
                    </Accordion>
                </div>

            </div>
        </section>
    );
};

export default Faq1Component;