raul/wedding-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial draft and components creation

Browse Source
This commit is contained in:
Raul Lugo
2026-09-06 12:49:29 +02:00
parent 7a45111420
commit 64fb24d87c
44 changed files with 1922 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/invite/details-section.tsx
+30
View File
@@ -0,0 +1,30 @@
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>
)
}