Accorions are a great way to display FAQs in a compact and user-friendly manner as it does not overwhelm the user with too much information at once.
Two column layout is used on medium and larger screens to make better use of horizontal space and allow users to skim through the questions more easily.
Frequently Asked Questions
npx shadcn@latest add https://www.payload.koszyka.com/r/faqs.jsonComponent.tsx
import type { FaqBlock as FaqBlockProps } from 'src/payload-types'import { cn } from '@/lib/utils'import React from 'react'import Faqs from './Faqs'import { cn } from '@/lib/utils'import React from 'react'import Faqs from './Faqs'type Props = { className?: string} & FaqBlockPropsexport const FaqBlock: React.FC<Props> = ({ className, data }) => { const faqs = data?.faqs ?? [] return ( <section className={cn('min-h-screen flex flex-col items-center justify-center px-6 py-12', className)} > <div className="w-full"> <h2 className="text-4xl md:text-5xl leading-[1.15]! font-semibold tracking-tighter"> Frequently Asked Questions </h2> </div> <Faqs faqs={faqs} /> </section> );}