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:
@@ -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é & 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>
|
||||
Reference in New Issue
Block a user