fix(ui): update wedding details and add new pages

* change RSVP deadline and venue details
* add venue and wedding party pages with relevant information
* enhance layout with additional meta descriptions and links

config.example.yaml

@@ -12,9 +12,9 @@ site:
 wedding:
   date: "2026-11-07T16:00:00+02:00" # RFC3339, guest arrival time; drives countdown + photo upload gate
   ceremony_time: "16:00 for 16:30" # display text
-  rsvp_by: "2026-09-01T00:00:00+02:00" # RFC3339, RSVP deadline; drives the RSVP countdown
-  venue_name: "Rivier Plaas"
-  venue_address: "Langenhoven Rd, Sherman Park AH, Meyerton, 1961"
+  rsvp_by: "2026-10-17T00:00:00+02:00" # RFC3339, RSVP deadline; drives the RSVP countdown
+  venue_name: "Rivier Plaas Wedding Venue"
+  venue_address: "Langenhoven Street, Riversdale, Meyerton, 1961"
   rsvp_phone: "076 925 1718"
 
 storage:

ui/src/lib/config.ts

@@ -3,8 +3,8 @@
 export const FALLBACK_SITE_URL = "https://zoeshaldon.warky.info";
 export const FALLBACK_WEDDING_DATE = "2026-11-07T16:00:00+02:00";
 export const FALLBACK_CEREMONY_TIME = "16:00 for 16:30";
-export const FALLBACK_RSVP_BY_DATE = "2026-09-01T00:00:00+02:00";
-export const FALLBACK_VENUE_NAME = "Rivier Plaas";
+export const FALLBACK_RSVP_BY_DATE = "2026-10-17T00:00:00+02:00";
+export const FALLBACK_VENUE_NAME = "Rivier Plaas Wedding Venue";
 export const FALLBACK_VENUE_ADDRESS =
-  "Langenhoven Rd, Sherman Park AH, Meyerton, 1961";
+  "Langenhoven Street, Riversdale, Meyerton, 1961";
 export const FALLBACK_RSVP_PHONE = "076 925 1718";

ui/src/routes/+layout.svelte

@@ -3,16 +3,26 @@
   import favicon from "$lib/assets/favicon.svg";
   import { page } from "$app/state";
   import Countdown from "$lib/components/Countdown.svelte";
-  import { createWeddingInfo } from "$lib/wedding-info.svelte";
+  import { createWeddingInfo, formatFullDate } from "$lib/wedding-info.svelte";
 
   let { children } = $props();
 
   const wedding = createWeddingInfo();
 
+  const metaDescription = $derived(
+    `Zoé & Shaldon are getting married on ${formatFullDate(wedding.date)} at ${wedding.venueName}, ${wedding.venueAddress}. Find venue directions, dress code, the order of events, and RSVP here.`,
+  );
+  const shareDescription = $derived(
+    `${formatFullDate(wedding.date)} at ${wedding.venueName}, ${wedding.venueAddress}. Directions, dress code, the schedule, and RSVP.`,
+  );
+
   const links = [
     { href: "/", label: "Home" },
     { href: "/rsvp", label: "RSVP" },
     { href: "/photos", label: "Photos" },
+    { href: "/venue", label: "Venue" },
+    { href: "/details", label: "Details" },
+    { href: "/wedding-party", label: "Wedding Party" },
   ];
 
   let menuOpen = $state(false);
@@ -26,6 +36,19 @@
 <svelte:head>
   <title>Zoé &amp; Shaldon are getting married</title>
   <link rel="icon" href={favicon} />
+
+  <meta name="description" content={metaDescription} />
+
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Zoé &amp; Shaldon are getting married" />
+  <meta property="og:description" content={shareDescription} />
+  <meta property="og:url" content={wedding.siteUrl} />
+  <meta property="og:image" content="{wedding.siteUrl}/photos/IMG_0528.JPG" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Zoé &amp; Shaldon are getting married" />
+  <meta name="twitter:description" content={shareDescription} />
+  <meta name="twitter:image" content="{wedding.siteUrl}/photos/IMG_0528.JPG" />
 </svelte:head>
 
 <div
@@ -104,7 +127,9 @@
       </div>
     {/if}
   </div>
-  <main class="flex flex-1 flex-col">
+  <main
+    class="text-shadow-sm text-shadow-white/80 dark:text-shadow-black/70 flex flex-1 flex-col"
+  >
     {@render children()}
   </main>
 </div>

ui/src/routes/+page.svelte

@@ -13,8 +13,12 @@
   <PhotoBackground />
 
   <div
-    class="border-surface-50/70 relative z-10 flex max-w-xl flex-col items-center gap-6 border px-6 py-12 sm:px-14 sm:py-16"
+    class="border-surface-50/70 text-shadow-sm text-shadow-black/60 relative z-10 flex max-w-xl flex-col items-center gap-6 border px-6 py-12 sm:px-14 sm:py-16"
   >
+    <p class="text-secondary-300 font-serif text-2xl italic">
+      "Every love story is beautiful, but ours is my favourite."
+    </p>
+
     <h1 class="text-surface-50 font-malibu text-6xl sm:text-8xl">
       Zoé &amp; Shaldon
     </h1>
@@ -34,7 +38,22 @@
       <p class="text-surface-100 text-2xl">{wedding.venueAddress}</p>
     </div>
 
-    <div class="mt-6 flex flex-wrap items-center justify-center gap-4">
+    <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
+        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.
+      </p>
+      <p class="text-surface-100 text-xl">
+        We can't wait to see you on {formatFullDate(wedding.date)}, {wedding.ceremonyTime}!
+      </p>
+    </div>
+
+    <div class="mt-2 flex flex-wrap items-center justify-center gap-4">
       {#if !rsvpStatus.submitted}
         <a href="/rsvp" class="btn preset-filled-secondary-500 text-2xl">RSVP</a
         >
@@ -44,6 +63,12 @@
       <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
+      >
     </div>
+
+    <p class="text-surface-200 font-serif text-2xl">
+      With love,<br />Zoé &amp; Shaldon
+    </p>
   </div>
 </section>

ui/src/routes/details/+page.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { createWeddingInfo, formatFullDate } from "$lib/wedding-info.svelte";
+
+  const wedding = createWeddingInfo();
+
+  const events = [
+    { time: "16:00", label: "Guest Arrival" },
+    { time: "16:30", label: "Wedding Ceremony Begins" },
+    { time: "17:00", label: "The New Mr. & Mrs. (Ceremony Concludes)" },
+    { time: "17:15", label: "Canapés, Drinks & Family Photos" },
+    { time: "18:15", label: "Reception Hall Doors Open" },
+    { time: "18:30", label: "Grand Entrance & Welcoming" },
+    { time: "19:00", label: "Speeches and Toasting" },
+    { time: "19:30", label: "Dinner is Served" },
+    { time: "20:30", label: "Cutting of the Cake & First Dance" },
+    { time: "20:40", label: "Dance Floor Opens" },
+    { time: "23:30", label: "Last Dance & Farewell" },
+  ];
+</script>
+
+<section class="flex flex-1 items-center justify-center px-4 py-16">
+  <div class="w-full max-w-md">
+    <h1 class="font-serif text-4xl">Important Information</h1>
+    <p class="text-secondary-600-400 mt-2 text-2xl">
+      Please <a href="/rsvp" class="underline hover:text-secondary-500">RSVP</a> by {formatFullDate(wedding.rsvpByDate)}.
+    </p>
+
+    <div class="mt-6 flex flex-col gap-1">
+      <h2 class="font-serif text-3xl">Dress Code: Formal</h2>
+      <p class="text-surface-600-400 text-2xl">
+        We ask that our guests dress in formal attire. Think elegant dresses
+        and sharp suits.
+      </p>
+    </div>
+
+    <div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
+      <h2 class="font-serif text-3xl">Food &amp; Drinks</h2>
+      <p class="text-surface-600-400 mt-2 text-2xl">
+        A delicious dinner will be served. Please note that a cash bar is
+        available for the evening. Card facilities will be available, but we
+        suggest bringing cash just in case.
+      </p>
+    </div>
+
+    <div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
+      <h2 class="font-serif text-3xl">Honeymoon Fund</h2>
+      <p class="text-surface-600-400 mt-2 text-2xl">
+        Your presence on our special day is the greatest gift we could ask
+        for. However, if you would like to honour us with a gift, a
+        contribution toward our future home or honeymoon would be warmly
+        appreciated.
+      </p>
+    </div>
+
+    <div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
+      <h2 class="font-serif text-3xl">Order of Events</h2>
+      <p class="text-surface-600-400 mt-2 text-2xl">
+        Zoé &amp; Shaldon — Saturday, 7 November 2026
+      </p>
+      <ul class="mt-4 flex flex-col gap-2">
+        {#each events as event (event.time)}
+          <li
+            class="border-surface-300 dark:border-surface-700 flex items-baseline gap-4 border-b py-2"
+          >
+            <span class="text-secondary-600-400 w-16 shrink-0 text-2xl"
+              >{event.time}</span
+            >
+            <span class="text-2xl">{event.label}</span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+</section>

ui/src/routes/venue/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createWeddingInfo } from "$lib/wedding-info.svelte";
+
+  const wedding = createWeddingInfo();
+
+  const directionsUrl = $derived(
+    `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
+      `${wedding.venueName}, ${wedding.venueAddress}`,
+    )}`,
+  );
+</script>
+
+<section class="flex flex-1 items-center justify-center px-4 py-16">
+  <div class="w-full max-w-md">
+    <h1 class="font-serif text-4xl">The Venue</h1>
+
+    <div class="mt-6 flex flex-col gap-1">
+      <p class="text-2xl">{wedding.venueName}</p>
+      <p class="text-surface-600-400 text-2xl">{wedding.venueAddress}</p>
+    </div>
+
+    <a
+      href={directionsUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="btn preset-filled-secondary-500 mt-4 text-2xl"
+    >
+      Get directions
+    </a>
+
+    <div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
+      <h2 class="font-serif text-3xl">Parking</h2>
+      <p class="text-surface-600-400 mt-2 text-2xl">
+        Secure parking is available on-site at the venue.
+      </p>
+    </div>
+
+    <div class="border-surface-300 dark:border-surface-700 mt-10 border-t pt-6">
+      <h2 class="font-serif text-3xl">Accommodation</h2>
+      <p class="mt-2 text-2xl">Plaaskombuis Meyerton</p>
+      <div class="text-surface-600-400 mt-1 flex flex-col text-2xl">
+        <a href="tel:0163644144" class="hover:text-secondary-400">016 364 4144</a>
+        <a href="mailto:marisel@plaaskombuis.co.za" class="hover:text-secondary-400"
+          >marisel@plaaskombuis.co.za</a
+        >
+        <a
+          href="https://www.plaaskombuis.co.za"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hover:text-secondary-400"
+        >
+          www.plaaskombuis.co.za
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

ui/src/routes/wedding-party/+page.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  const bride = [
+    {
+      role: "Maid of Honour",
+      name: "Mart-Marie Neethling",
+      note: "Keeper of the bride's sanity and secrets.",
+    },
+    {
+      role: "Bridesmaid",
+      name: "Bronwin Williams",
+      note: "Childhood friend and the leader of the ultimate hype squad.",
+    },
+    {
+      role: "Bridesmaid",
+      name: "Noel Du Toit",
+      note: '"The life of every party" — Cousin.',
+    },
+    {
+      role: "Flower Girl",
+      name: "Echo",
+      note: "The cutest little Flower Girl ever seen.",
+    },
+  ];
+
+  const groom = [
+    {
+      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.)",
+    },
+    {
+      role: "Groomsman",
+      name: "Harold Harding",
+      note: "Childhood friend, and always has the groom's back.",
+    },
+    {
+      role: "Groomsman",
+      name: "Dehan Kruger",
+      note: "Chilled, laid back, and the life of every party!",
+    },
+    {
+      role: "Groomsman",
+      name: "Karabo Makhubo",
+      note: "Sharp dresser, always with a joke to share.",
+    },
+  ];
+
+  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">
+    <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="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>
+
+    <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>
+  </div>
+</section>