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

feat: improve spacing overall
Deploy On Server / Prepare Repository Remotely (push) Successful in 15s
Details
Deploy On Server / Docker Compose Up (push) Successful in 19s
Details
Deploy On Server / Prune Images (push) Successful in 2s
Details
Deploy On Server / Remove .env File (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Raul Lugo
2026-09-06 13:58:05 +02:00
parent fc16acea61
commit 726b8a1258
8 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/invite/introduction-section.tsx
+7 -3
View File
@@ -9,7 +9,7 @@ const icons = [CalendarDays, MapPin, Clock3]
export function IntroductionSection({ content }: { content: InvitePageContent["introduction"] }) {
return (
<section id="introduction" className="bg-wedding-ivory py-wedding-section">
<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">
@@ -26,9 +26,13 @@ export function IntroductionSection({ content }: { content: InvitePageContent["i
<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-7 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}>
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><p className="wedding-section-label">{fact.label}</p><p className="mt-2 font-wedding-display text-wedding-medium">{fact.value}</p>{fact.description ? <p className="mt-1 font-wedding-ui text-sm">{fact.description}</p> : null}</div>
<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>