47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import Link from 'next/link'
|
|
import type { Page } from '../../payload-types'
|
|
|
|
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
|
|
|
|
export const FAQTeaserBlock: React.FC<Props> = ({ eyebrow, title, questions, linkText }) => {
|
|
return (
|
|
<section className="py-20 md:py-32 bg-card/40 border-t border-border">
|
|
<div className="container-premium">
|
|
<div className="max-w-3xl mb-16 md:mb-24">
|
|
{eyebrow && (
|
|
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
|
// {eyebrow}
|
|
</div>
|
|
)}
|
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight text-balance">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="space-y-6 mb-12">
|
|
{questions?.map((q: NonNullable<Props['questions']>[0], index: number) => (
|
|
<div
|
|
key={q.id || index}
|
|
className="py-6 border-b border-border/50 first:border-t"
|
|
>
|
|
<h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground mb-3">{q.question}</h3>
|
|
<p className="text-foreground/75 leading-relaxed">{q.answer}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{linkText && (
|
|
<div className="mt-12">
|
|
<Link href="/faq" className="inline-block text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
|
|
{linkText}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|