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.

ui/src/routes/+page.svelte

@@ -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

@@ -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

@@ -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

@@ -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>