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

refactor: token layout names

Browse Source
This commit is contained in:
Raul Lugo
2026-09-06 13:02:03 +02:00
parent 64fb24d87c
commit fc16acea61
16 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/invite/details-section.tsx
+6 -6
View File
@@ -10,18 +10,18 @@ export function DetailsSection({ content }: { content: InvitePageContent["detail
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">
<div className="grid gap-10 wedding-lg:grid-cols-2 wedding-lg: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 className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:divide-x wedding-md:divide-y-0 wedding-md:border-y-0">
{content.facts.map((fact, index) => <article className="py-7 wedding-md:px-6 wedding-md: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">
<div className="mt-16 grid gap-8 wedding-md: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">
<div className="mt-16 bg-wedding-cream p-8 wedding-md: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-md:grid-cols-2 wedding-lg: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>