31 lines
2.9 KiB
TypeScript
31 lines
2.9 KiB
TypeScript
import Image from "next/image"
|
|
|
|
import { SectionHeading } from "@/components/invite/section-heading"
|
|
import { WeddingContainer } from "@/components/invite/wedding-container"
|
|
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
|
|
|
const expectationImages = ["/images/details_ceremony.png", "/images/details_dinner.png"]
|
|
|
|
export function DetailsSection({ content }: { content: InvitePageContent["details"] }) {
|
|
return (
|
|
<section id="details" className="bg-wedding-ivory">
|
|
<WeddingContainer className="py-wedding-section">
|
|
<div className="grid gap-10 wedding-layout:grid-cols-2 wedding-layout:items-center">
|
|
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
|
|
<div className="relative aspect-video overflow-hidden"><Image src="/images/details_main.png" alt="Luttelforster Muhle venue" fill className="object-cover" sizes="(min-width: 900px) 55vw, 90vw" /></div>
|
|
</div>
|
|
<div className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-phone:grid-cols-3 wedding-phone:divide-x wedding-phone:divide-y-0 wedding-phone:border-y-0">
|
|
{content.facts.map((fact, index) => <article className="py-7 wedding-phone:px-6 wedding-phone:py-0" key={fact.label}><p className="wedding-section-label">0{index + 1} · {fact.label}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{fact.value}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{fact.description}</p></article>)}
|
|
</div>
|
|
<div className="mt-16 grid gap-8 wedding-phone:grid-cols-2">
|
|
{content.expectations.map((item, index) => <article key={item.label}><div className="relative aspect-video overflow-hidden"><Image src={expectationImages[index]} alt={item.label} fill className="object-cover" sizes="(min-width: 600px) 45vw, 90vw" /></div><h3 className="mt-5 font-wedding-display text-wedding-medium">{item.label}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{item.value}</p><p className="mt-1 font-wedding-ui text-sm">{item.description}</p></article>)}
|
|
</div>
|
|
<div className="mt-16 bg-wedding-cream p-8 wedding-phone:p-12"><p className="wedding-section-label">{content.dressCode.label}</p><h3 className="mt-4 font-wedding-display text-wedding-section">{content.dressCode.value}</h3><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{content.dressCode.description}</p></div>
|
|
<div className="mt-16 grid gap-8 wedding-phone:grid-cols-2 wedding-layout:grid-cols-5">
|
|
{content.policies.map((policy) => <article className="border-l border-wedding-line pl-5" key={policy.title}><h3 className="font-wedding-display text-wedding-medium">{policy.title}</h3><p className="mt-3 font-wedding-ui text-sm leading-wedding-body">{policy.description}</p></article>)}
|
|
</div>
|
|
</WeddingContainer>
|
|
</section>
|
|
)
|
|
}
|