warkanum
4eddecea8e
* change RSVP deadline and venue details * add venue and wedding party pages with relevant information * enhance layout with additional meta descriptions and links
75 lines
2.6 KiB
Svelte
75 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import PhotoBackground from "$lib/components/PhotoBackground.svelte";
|
|
import { createWeddingInfo, formatFullDate } from "$lib/wedding-info.svelte";
|
|
import { createRsvpStatus } from "$lib/rsvp-status.svelte";
|
|
|
|
const wedding = createWeddingInfo();
|
|
const rsvpStatus = createRsvpStatus();
|
|
</script>
|
|
|
|
<section
|
|
class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16 text-center z-10"
|
|
>
|
|
<PhotoBackground />
|
|
|
|
<div
|
|
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é & Shaldon
|
|
</h1>
|
|
<p class="text-surface-100 text-2xl">are getting married</p>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<p class="text-surface-50 text-2xl font-medium sm:text-3xl">
|
|
{formatFullDate(wedding.date)}
|
|
</p>
|
|
<p class="text-surface-200 text-2xl tracking-wide">
|
|
{wedding.ceremonyTime}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-0.5">
|
|
<p class="text-surface-50 text-2xl">{wedding.venueName}</p>
|
|
<p class="text-surface-100 text-2xl">{wedding.venueAddress}</p>
|
|
</div>
|
|
|
|
<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
|
|
>
|
|
{:else}
|
|
<p class="text-secondary-300 text-2xl">✓ You've RSVP'd — thank you!</p>
|
|
{/if}
|
|
<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é & Shaldon
|
|
</p>
|
|
</div>
|
|
</section>
|