23 lines
1.7 KiB
TypeScript
23 lines
1.7 KiB
TypeScript
import Link from "next/link"
|
|
|
|
import { SectionHeading } from "@/components/invite/section-heading"
|
|
import { WeddingContainer } from "@/components/invite/wedding-container"
|
|
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
|
|
|
export function FaqSection({ content }: { content: InvitePageContent["faq"] }) {
|
|
return (
|
|
<section id="faq" className="bg-wedding-ivory pt-wedding-section">
|
|
<WeddingContainer>
|
|
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
|
|
<div className="mt-14 grid gap-x-12 wedding-lg:grid-cols-2">
|
|
{content.questions.map((item) => <details className="group border-b border-wedding-line py-6" key={item.question}><summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-wedding-display text-wedding-medium"><span>{item.question}</span><span className="font-wedding-ui text-wedding-label text-wedding-terracotta transition-transform group-open:rotate-45">+</span></summary><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{item.answer}</p></details>)}
|
|
</div>
|
|
<aside className="mt-16 flex flex-col gap-5 bg-wedding-cream p-8 wedding-md:flex-row wedding-md:items-center wedding-md:justify-between wedding-md:p-12">
|
|
<div><h3 className="font-wedding-display text-wedding-medium">{content.contact.heading}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{content.contact.description}</p></div>
|
|
<Link className="wedding-text-link" href="mailto:hello@example.com">{content.contact.action} →</Link>
|
|
</aside>
|
|
</WeddingContainer>
|
|
</section>
|
|
)
|
|
}
|