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

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>