ChronoCraft/zoe-shaldon
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add thank you page and update wedding party section

Browse Source 
* 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:
warkanum
2026-08-23 14:42:45 +02:00
parent 143b2361f6
commit 9ecfd44248
13 changed files with 154 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/routes/+page.svelte
+5 -6
View File
@@ -40,13 +40,13 @@
<div class="flex flex-col gap-4 text-center">
<p class="text-surface-100 text-xl">
Welcome to our wedding website! We are so excited to celebrate our
love with our favourite people. As our forever begins, we want to
Welcome to our wedding website! &nbsp; We are so excited to celebrate
our love with our favourite people. As our forever begins, we want to
thank you for your love and support.
</p>
<p class="text-surface-100 text-xl">
Browse the menu above to find venue directions, dress code details,
and RSVP information.
Browse the menu above to find venue directions, dress code details, and
RSVP information.
</p>
<p class="text-surface-100 text-xl">
We can't wait to see you on {formatFullDate(wedding.date)}, {wedding.ceremonyTime}!
@@ -63,8 +63,7 @@
<a href="/photos" class="btn preset-filled-primary-500 text-2xl"
>Share photos</a
>
<a href="/details" class="btn preset-tonal-secondary text-2xl">Details</a
>
<a href="/details" class="btn preset-tonal-secondary text-2xl">Details</a>
</div>
<p class="text-surface-200 font-serif text-2xl">
ui/src/routes/details/+page.svelte
+6
View File
@@ -95,5 +95,11 @@
{/each}
</ul>
</div>
<div class="border-surface-50/30 mt-10 border-t pt-6 text-center">
<a href="/thanks" class="btn preset-tonal-secondary text-2xl"
>A Special Note of Thanks</a
>
</div>
</div>
</section>
ui/src/routes/thanks/+page.svelte
+49
View File
@@ -0,0 +1,49 @@
<script lang="ts">
import PhotoBackground from "$lib/components/PhotoBackground.svelte";
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 Berriman-Puth", role: "Friend" },
{ name: "Hein Puth (Warky Devs)", role: "Website & Friend" },
{ name: "Ronel Gous", role: "Ronel Events and Designs & Friend" },
{ name: "Monica", role: "Rivier Plaas Wedding Venue" },
];
</script>
<section
class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16 z-10"
>
<PhotoBackground />
<div
class="border-surface-50/70 text-shadow-sm text-shadow-black/60 relative z-10 w-full max-w-md border px-6 py-12 sm:px-14 sm:py-16"
>
<h1 class="text-surface-50 font-serif text-4xl">
A Special Note of Thanks
</h1>
<p class="text-surface-100 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-50/30 flex items-center justify-between border-b py-2"
>
<span class="text-surface-50 text-2xl">{person.name}</span>
<span class="text-secondary-300 text-lg">{person.role}</span>
</li>
{/each}
</ul>
<p class="text-surface-100 mt-6 text-xl">
If there is anyone we have forgotten about, please know that you are all
special to us!
</p>
</div>
</section>
ui/src/routes/wedding-party/+page.svelte
+88 -64
View File
@@ -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 &amp; 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 &amp; Chloe Muller"
class="border-surface-300 dark:border-surface-700 size-20 shrink-0 rounded-full border object-cover"
/>
<p class="text-2xl">Roxi &amp; Chloe Muller</p>
</div>
</div>
</div>
</section>
ui/static/people/Bronwin.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

ui/static/people/Dehan.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

ui/static/people/Harold.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

ui/static/people/Justin.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

ui/static/people/Karabo.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

ui/static/people/Mart-Marie.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

ui/static/people/Noel Du Toit.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

ui/static/people/echo.jpg
LFS
BIN
View File
Binary file not shown.
ui/static/people/ringpups.jpg
LFS
BIN
View File
Binary file not shown.