103 lines
3.3 KiB
Plaintext
103 lines
3.3 KiB
Plaintext
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
import SignIn from "../components/SignIn.tsx";
|
|
---
|
|
|
|
<Layout title="Welcome">
|
|
<div id="auth-container">
|
|
<SignIn client:load onSuccess={() => {}} requiredRole="guest" />
|
|
</div>
|
|
|
|
<div id="content-container" class="hidden">
|
|
<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
|
|
<img src="/logo.jpg" alt="" height="250" width="250" class="rounded-full mx-auto">
|
|
<!-- Header -->
|
|
<div class="text-center space-y-4">
|
|
<div class="text-5xl font-normal" style="font-family: 'Great Vibes', cursive;"><span class="text-2xl">❤️</span> Natasha + Ixabat <span class="text-3xl">❤️</span></div>
|
|
<p class="text-xl text-gray-600">We hope you can join us in celebration on</p>
|
|
<p class="text-2xl font-semibold">Saturday, June 7, 2025</p>
|
|
</div>
|
|
|
|
<!-- Event Details Cards -->
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<!-- Ceremony Card -->
|
|
<div class="card bg-base-100 shadow-xl flex-1 border-2 border-primary">
|
|
<div class="card-body">
|
|
<h2 class="card-title text-2xl justify-center">Ceremony</h2>
|
|
<div class="text-center space-y-2">
|
|
<p class="text-xl">1:00 PM</p>
|
|
<p>Preston Avenue Community Church</p>
|
|
<p class="text-gray-600">2216 Preston Avenue, Saskatoon, SK</p>
|
|
<a
|
|
href="https://maps.google.com/?q=2216+Preston+Avenue+Saskatoon+SK"
|
|
target="_blank"
|
|
class="btn btn-outline btn-sm mt-2"
|
|
>
|
|
View on Map
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reception Card -->
|
|
<div class="card bg-base-100 shadow-xl flex-1 border-2 border-primary">
|
|
<div class="card-body">
|
|
<h2 class="card-title text-2xl justify-center">Reception</h2>
|
|
<div class="text-center space-y-2">
|
|
<p class="text-xl">5:00 PM</p>
|
|
<p>Saskatoon Christian School</p>
|
|
<p class="text-gray-600">55 Glazier Road, Corman Park, SK</p>
|
|
<a
|
|
href="https://maps.google.com/?q=55+Glazier+Road+Corman+Park+SK"
|
|
target="_blank"
|
|
class="btn btn-outline btn-sm mt-2"
|
|
>
|
|
View on Map
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RSVP Section -->
|
|
<div class="text-center space-y-4">
|
|
<p class="text-lg">Please RSVP whether you're able to come or not by <span class="font-semibold">April 1</span></p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/rsvp" class="btn btn-primary btn-lg">
|
|
RSVP Now
|
|
</a>
|
|
<a href="/registry" class="btn btn-secondary btn-lg">
|
|
Wedding Registry
|
|
</a>
|
|
<a href="/faq" class="btn btn-accent btn-lg">
|
|
FAQ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
|
|
<script>
|
|
import { hasRole, isAuthenticated } from "../utils/auth-client";
|
|
|
|
function updateVisibility() {
|
|
const authContainer = document.getElementById("auth-container");
|
|
const contentContainer = document.getElementById("content-container");
|
|
|
|
if (isAuthenticated() && hasRole("guest")) {
|
|
authContainer?.classList.add("hidden");
|
|
contentContainer?.classList.remove("hidden");
|
|
} else {
|
|
authContainer?.classList.remove("hidden");
|
|
contentContainer?.classList.add("hidden");
|
|
}
|
|
}
|
|
|
|
// Check auth state on page load
|
|
updateVisibility();
|
|
|
|
// Add event listener for custom event from SignIn component
|
|
document.addEventListener("auth-success", updateVisibility);
|
|
</script>
|