43 lines
2.5 KiB
TypeScript
43 lines
2.5 KiB
TypeScript
import Image from "next/image"
|
|
import { CalendarDays, Clock3, MapPin } from "lucide-react"
|
|
|
|
import { Monogram } from "@/components/invite/monogram"
|
|
import { WeddingContainer } from "@/components/invite/wedding-container"
|
|
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
|
|
|
const icons = [CalendarDays, MapPin, Clock3]
|
|
|
|
export function IntroductionSection({ content }: { content: InvitePageContent["introduction"] }) {
|
|
return (
|
|
<section id="introduction" className="bg-wedding-ivory pt-wedding-section">
|
|
<WeddingContainer>
|
|
<Monogram />
|
|
<div className="mt-10 grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
|
|
<div>
|
|
<h2 className="wedding-display-heading text-wedding-page text-wedding-ink">{content.heading}</h2>
|
|
<div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
|
|
{content.paragraphs.map((paragraph) => <p className="mt-6 font-wedding-ui text-wedding-body leading-wedding-body" key={paragraph}>{paragraph}</p>)}
|
|
<p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
|
|
</div>
|
|
<div className="relative mx-auto min-h-96 w-full max-w-md shadow-lg">
|
|
<Image src="/images/schedule.png" alt="A candlelit wedding reception" fill className="object-cover" sizes="(min-width: 900px) 40vw, 90vw" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-14 grid border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:border-y-0">
|
|
{content.facts.map((fact, index) => {
|
|
const Icon = icons[index]
|
|
return <div className={`flex gap-4 px-0 py-4 wedding-md:px-6 wedding-md:py-0 ${index < content.facts.length - 1 ? "wedding-md:border-r wedding-md:border-wedding-line" : ""}`} key={fact.label}>
|
|
<Icon className="mt-1 size-5 text-wedding-terracotta" aria-hidden="true" />
|
|
<div className="flex flex-col" >
|
|
<p className="wedding-section-label">{fact.label}</p>
|
|
<p className="mt-2 wedding-md:h-24 flex items-center justify-center wedding-md:text-center wedding-lg:text-left font-wedding-display text-wedding-medium">{fact.value}</p>
|
|
{fact.description ? <p className="mt-1 font-wedding-ui wedding-md:text-center wedding-lg:text-left text-sm mt-auto">{fact.description}</p> : null}
|
|
</div>
|
|
</div>
|
|
})}
|
|
</div>
|
|
</WeddingContainer>
|
|
</section>
|
|
)
|
|
}
|