feat(ui): add thank you page and update wedding party section
* Introduce a new thank you page with a list of acknowledgments. * Enhance the wedding party section with photos and improved layout. * Update welcome messages for clarity and consistency.
This commit is contained in:
@@ -1,24 +1,40 @@
|
||||
<script lang="ts">
|
||||
function photo(file: string) {
|
||||
return `/people/${encodeURIComponent(file)}`;
|
||||
}
|
||||
|
||||
function initials(name: string) {
|
||||
return name
|
||||
.split(" ")
|
||||
.map((word) => word[0])
|
||||
.slice(0, 2)
|
||||
.join("");
|
||||
}
|
||||
|
||||
const bride = [
|
||||
{
|
||||
role: "Maid of Honour",
|
||||
name: "Mart-Marie Neethling",
|
||||
note: "Keeper of the bride's sanity and secrets.",
|
||||
photo: photo("Mart-Marie.jpeg"),
|
||||
},
|
||||
{
|
||||
role: "Bridesmaid",
|
||||
name: "Bronwin Williams",
|
||||
note: "Childhood friend and the leader of the ultimate hype squad.",
|
||||
photo: photo("Bronwin.jpeg"),
|
||||
},
|
||||
{
|
||||
role: "Bridesmaid",
|
||||
name: "Noel Du Toit",
|
||||
note: '"The life of every party" — Cousin.',
|
||||
photo: photo("Noel Du Toit.jpeg"),
|
||||
},
|
||||
{
|
||||
role: "Flower Girl",
|
||||
name: "Echo",
|
||||
note: "The cutest little Flower Girl ever seen.",
|
||||
photo: photo("echo.jpg"),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -27,101 +43,109 @@
|
||||
role: "Best Man",
|
||||
name: "Justin Pieterse",
|
||||
note: "Tasked with keeping the speech short and the groom sane. (Not that the groom has ever been sane.)",
|
||||
photo: photo("Justin.jpeg"),
|
||||
},
|
||||
{
|
||||
role: "Groomsman",
|
||||
name: "Harold Harding",
|
||||
note: "Childhood friend, and always has the groom's back.",
|
||||
photo: photo("Harold.jpeg"),
|
||||
},
|
||||
{
|
||||
role: "Groomsman",
|
||||
name: "Dehan Kruger",
|
||||
note: "Chilled, laid back, and the life of every party!",
|
||||
photo: photo("Dehan.jpeg"),
|
||||
},
|
||||
{
|
||||
role: "Groomsman",
|
||||
name: "Karabo Makhubo",
|
||||
note: "Sharp dresser, always with a joke to share.",
|
||||
photo: photo("Karabo.jpeg"),
|
||||
},
|
||||
];
|
||||
|
||||
const thanks = [
|
||||
{ name: "Gayle Muller-Lombard", role: "Mother of the Bride" },
|
||||
{ name: "Jan Lombard", role: "Stepdad of the Bride" },
|
||||
{ name: "Vera Muller", role: "Grandmother of the Bride" },
|
||||
{ name: "Christian Els", role: "Cousin of the Bride" },
|
||||
{ name: "Divan Swart", role: "Father of the Bride" },
|
||||
{ name: "Louis Pietser", role: "Father of the Groom" },
|
||||
{ name: "Dezelle Ras", role: "Friend" },
|
||||
{ name: "Cindy Bierman", role: "Friend" },
|
||||
{ name: "Ronel Gous", role: "Ronel Events and Designs & Friend" },
|
||||
{ name: "Monica", role: "Rivier Plaas Wedding Venue" },
|
||||
];
|
||||
</script>
|
||||
|
||||
<section class="flex flex-1 items-center justify-center px-4 py-16">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="w-full max-w-4xl">
|
||||
<h1 class="font-serif text-4xl">The I-Do Crew</h1>
|
||||
<p class="text-surface-600-400 mt-2 text-2xl">
|
||||
Meet the legendary lineup helping us make it down the aisle at Rivier
|
||||
Plaas!
|
||||
</p>
|
||||
|
||||
<div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
|
||||
<h2 class="font-serif text-3xl">Behind the Bride</h2>
|
||||
<ul class="mt-4 flex flex-col gap-4">
|
||||
{#each bride as person (person.name)}
|
||||
<li>
|
||||
<p class="text-2xl">
|
||||
<span class="font-medium">{person.role}:</span>
|
||||
{person.name}
|
||||
</p>
|
||||
<p class="text-surface-600-400 text-xl">{person.note}</p>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-10 grid grid-cols-1 gap-x-10 gap-y-10 md:grid-cols-2">
|
||||
<div class="border-surface-300 dark:border-surface-700 border-t pt-6">
|
||||
<h2 class="font-serif text-3xl">Behind the Bride</h2>
|
||||
<ul class="mt-4 flex flex-col gap-5">
|
||||
{#each bride as person (person.name)}
|
||||
<li class="flex items-center gap-4">
|
||||
{#if person.photo}
|
||||
<img
|
||||
src={person.photo}
|
||||
alt={person.name}
|
||||
class="border-surface-300 dark:border-surface-700 size-20 shrink-0 rounded-full border object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="border-surface-300 dark:border-surface-700 bg-surface-100 dark:bg-surface-800 text-surface-600-400 flex size-20 shrink-0 items-center justify-center rounded-full border font-serif text-2xl"
|
||||
>
|
||||
{initials(person.name)}
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<p class="text-2xl">
|
||||
<span class="font-medium">{person.role}:</span>
|
||||
{person.name}
|
||||
</p>
|
||||
<p class="text-surface-600-400 text-xl">{person.note}</p>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
|
||||
<h2 class="font-serif text-3xl">Behind the Groom</h2>
|
||||
<ul class="mt-4 flex flex-col gap-4">
|
||||
{#each groom as person (person.name)}
|
||||
<li>
|
||||
<p class="text-2xl">
|
||||
<span class="font-medium">{person.role}:</span>
|
||||
{person.name}
|
||||
</p>
|
||||
<p class="text-surface-600-400 text-xl">{person.note}</p>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="border-surface-300 dark:border-surface-700 border-t pt-6">
|
||||
<h2 class="font-serif text-3xl">Behind the Groom</h2>
|
||||
<ul class="mt-4 flex flex-col gap-5">
|
||||
{#each groom as person (person.name)}
|
||||
<li class="flex items-center gap-4">
|
||||
{#if person.photo}
|
||||
<img
|
||||
src={person.photo}
|
||||
alt={person.name}
|
||||
class="border-surface-300 dark:border-surface-700 size-20 shrink-0 rounded-full border object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="border-surface-300 dark:border-surface-700 bg-surface-100 dark:bg-surface-800 text-surface-600-400 flex size-20 shrink-0 items-center justify-center rounded-full border font-serif text-2xl"
|
||||
>
|
||||
{initials(person.name)}
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<p class="text-2xl">
|
||||
<span class="font-medium">{person.role}:</span>
|
||||
{person.name}
|
||||
</p>
|
||||
<p class="text-surface-600-400 text-xl">{person.note}</p>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
|
||||
<h2 class="font-serif text-3xl">The Dog-bearers</h2>
|
||||
<p class="mt-2 text-2xl">Roxi & Chloe Muller</p>
|
||||
</div>
|
||||
|
||||
<div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
|
||||
<h2 class="font-serif text-3xl">A Special Note of Thanks</h2>
|
||||
<p class="text-surface-600-400 mt-2 text-2xl">
|
||||
To some very special people in our lives who have helped us make our
|
||||
day magical:
|
||||
</p>
|
||||
<ul class="mt-4 flex flex-col gap-2">
|
||||
{#each thanks as person (person.name)}
|
||||
<li
|
||||
class="border-surface-300 dark:border-surface-700 flex items-center justify-between border-b py-2"
|
||||
>
|
||||
<span class="text-2xl">{person.name}</span>
|
||||
<span class="text-surface-600-400 text-lg">{person.role}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<p class="text-surface-600-400 mt-6 text-xl">
|
||||
If there is anyone we have forgotten about, please know that you are
|
||||
all special to us!
|
||||
</p>
|
||||
<div class="mt-4 flex items-center gap-4">
|
||||
<img
|
||||
src={photo("ringpups.jpg")}
|
||||
alt="Roxi & Chloe Muller"
|
||||
class="border-surface-300 dark:border-surface-700 size-20 shrink-0 rounded-full border object-cover"
|
||||
/>
|
||||
<p class="text-2xl">Roxi & Chloe Muller</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user