48 lines
2.5 KiB
TypeScript
48 lines
2.5 KiB
TypeScript
import Image from "next/image"
|
|
|
|
import { FeatureSplit } from "@/components/invite/feature-split"
|
|
import { HeartQuote } from "@/components/invite/heart-quote"
|
|
import { SectionHeading } from "@/components/invite/section-heading"
|
|
import { WeddingContainer } from "@/components/invite/wedding-container"
|
|
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
|
|
|
const journeyImages = [
|
|
"/images/story_journey_1.png",
|
|
"/images/story_journey_2.png",
|
|
"/images/story_journey_3.png",
|
|
]
|
|
|
|
export function StorySection({ content }: { content: InvitePageContent["story"] }) {
|
|
return (
|
|
<section id="story" className="bg-wedding-ivory wedding-md:pt-wedding-section">
|
|
<FeatureSplit image="/images/our_story.png" alt="Nicole, Raul and their dog in the countryside">
|
|
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} />
|
|
{content.paragraphs.map((paragraph) => (
|
|
<p className="mt-6 font-wedding-ui text-wedding-body leading-wedding-body text-wedding-ink" key={paragraph}>{paragraph}</p>
|
|
))}
|
|
<p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
|
|
</FeatureSplit>
|
|
<WeddingContainer className="pt-wedding-section">
|
|
<p className="wedding-section-label">Our journey</p>
|
|
<div className="mt-12 grid gap-10 wedding-lg:grid-cols-3">
|
|
{content.timeline.map((item, index) => (
|
|
<article className="border-l border-wedding-line pl-6 wedding-lg:border-l-0 wedding-lg:pl-0" key={item.year}>
|
|
<div className="mb-5 flex items-center gap-4 wedding-lg:flex-col wedding-lg:items-start">
|
|
<span className="size-3 rounded-full bg-wedding-terracotta" />
|
|
<p className="wedding-section-label">{item.year}</p>
|
|
</div>
|
|
<div className="relative aspect-square overflow-hidden">
|
|
<Image src={journeyImages[index]} alt={item.title} fill className="object-cover" sizes="(min-width: 900px) 30vw, 85vw" />
|
|
</div>
|
|
<h3 className="mt-5 font-wedding-display text-wedding-medium text-wedding-ink">{item.title}</h3>
|
|
{item.place ? <p className="mt-1 wedding-section-label">{item.place}</p> : null}
|
|
<p className="mt-4 font-wedding-ui text-sm leading-wedding-body text-wedding-ink">{item.description}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</WeddingContainer>
|
|
<HeartQuote quote={content.quote} />
|
|
</section>
|
|
)
|
|
}
|