feat(ui): add wedding theme styles and layout components

* Introduced wedding-themed CSS variables for styling.
* Created layout component for the wedding site with navigation and countdown.
* Added RSVP and photo upload pages with form handling.
* Implemented QR code page for wedding site access.
* Configured TypeScript and Vite for the project.
* Added robots.txt for search engine crawling.
This commit is contained in:
2026-08-11 23:31:35 +02:00
commit 39f5b8d5cc
89 changed files with 6829 additions and 0 deletions
+49
View File
@@ -0,0 +1,49 @@
<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"
>
<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"
>
<h1 class="text-surface-50 font-malibu text-6xl sm:text-8xl">
Zoé &amp; 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="mt-6 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
>
</div>
</div>
</section>