Small UI changes

src/pages/index.astro

@@ -1,16 +1,63 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import SignOut from "../components/SignOut.tsx";
 ---
 
 <Layout title="Welcome">
-	<div class="flex flex-col gap-4">
-		<div class="text-center">❤️ Natasha + Ixabat ❤️</div>
+	<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
+		<!-- Header -->
+		<div class="text-center space-y-4">
+			<div class="text-5xl font-normal" style="font-family: 'Great Vibes', cursive;">❤️ Natasha + Ixabat ❤️</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>
 
-		<div class="flex flex-row gap-2 justify-center items-center">
-			<a class="btn btn-primary" href="/rsvp">RSVP</a>
-			<a class="btn btn-primary" href="/registry">View Registry</a>
-			<SignOut client:load />
+		<!-- 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">
+				<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">
+				<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>
+			<a href="/rsvp" class="btn btn-primary btn-lg">
+				RSVP Now
+			</a>
 		</div>
 	</div>
 </Layout>