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

<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"),
    },
  ];

  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.)",
      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"),
    },
  ];
</script>

<section class="flex flex-1 items-center justify-center px-4 py-16">
  <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="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 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>
      <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>