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:
@@ -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>
|
||||
Reference in New Issue
Block a user