More visual updates

src/components/RegistryList.tsx

@@ -13,6 +13,14 @@ const RegistryList = () => {
 		fetchRegistryItems();
 	}, []);
 
+	useEffect(() => {
+		// Dispatch event if registry is empty
+		if (!loading && registryItems.length === 0) {
+			const event = new CustomEvent("registry-empty");
+			document.dispatchEvent(event);
+		}
+	}, [loading, registryItems]);
+
 	const fetchRegistryItems = async () => {
 		setLoading(true);
 		setError(null);

src/pages/index.astro

@@ -4,6 +4,7 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout title="Welcome">
 	<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
+		<img src="/hero.jpeg" 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;">❤️ Natasha + Ixabat ❤️</div>
@@ -55,9 +56,17 @@ import Layout from "../layouts/Layout.astro";
 		<!-- 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>
 </Layout>

src/pages/registry/index.astro

@@ -10,7 +10,12 @@ import SignOut from "../../components/SignOut.tsx";
 			View and Claim Items from the Registry:
 		</div>
 
+		<div id="registry-container">
 			<RegistryList client:load />
+			<div id="empty-registry-message" class="text-center p-8 hidden">
+				<p class="text-xl">Nothing here yet! Please check back in a week!</p>
+			</div>
+		</div>
 
 		<div class="flex flex-row gap-2 justify-center items-center">
 			<a class="btn btn-primary" href="/">Back to Home</a>
@@ -36,4 +41,9 @@ import SignOut from "../../components/SignOut.tsx";
 			.getElementById("registry-container")
 			?.classList.remove("hidden");
 	});
+
+	// Check for empty registry
+	document.addEventListener("registry-empty", () => {
+		document.getElementById("empty-registry-message")?.classList.remove("hidden");
+	});
 </script>

src/styles/global.css

@@ -5,36 +5,36 @@
 }
 
 @plugin "daisyui/theme" {
-	name: "bumblebee";
+	name: "autumn";
 	default: true;
 	prefersdark: false;
 	color-scheme: "light";
-	--color-base-100: oklch(100% 0 0);
-	--color-base-200: oklch(97% 0 0);
-	--color-base-300: oklch(92% 0 0);
-	--color-base-content: oklch(20% 0 0);
-	--color-primary: oklch(85% 0.199 91.936);
-	--color-primary-content: oklch(42% 0.095 57.708);
-	--color-secondary: oklch(75% 0.183 55.934);
-	--color-secondary-content: oklch(40% 0.123 38.172);
-	--color-accent: oklch(0% 0 0);
-	--color-accent-content: oklch(100% 0 0);
-	--color-neutral: oklch(37% 0.01 67.558);
-	--color-neutral-content: oklch(92% 0.003 48.717);
-	--color-info: oklch(74% 0.16 232.661);
-	--color-info-content: oklch(39% 0.09 240.876);
-	--color-success: oklch(76% 0.177 163.223);
-	--color-success-content: oklch(37% 0.077 168.94);
-	--color-warning: oklch(82% 0.189 84.429);
-	--color-warning-content: oklch(41% 0.112 45.904);
-	--color-error: oklch(70% 0.191 22.216);
-	--color-error-content: oklch(39% 0.141 25.723);
+	--color-base-100: oklch(95.814% 0 0);
+	--color-base-200: oklch(89.107% 0 0);
+	--color-base-300: oklch(82.4% 0 0);
+	--color-base-content: oklch(19.162% 0 0);
+	--color-primary: oklch(40.723% 0.161 17.53);
+	--color-primary-content: oklch(88.144% 0.032 17.53);
+	--color-secondary: oklch(61.676% 0.169 23.865);
+	--color-secondary-content: oklch(12.335% 0.033 23.865);
+	--color-accent: oklch(73.425% 0.094 60.729);
+	--color-accent-content: oklch(14.685% 0.018 60.729);
+	--color-neutral: oklch(54.367% 0.037 51.902);
+	--color-neutral-content: oklch(90.873% 0.007 51.902);
+	--color-info: oklch(69.224% 0.097 207.284);
+	--color-info-content: oklch(13.844% 0.019 207.284);
+	--color-success: oklch(60.995% 0.08 174.616);
+	--color-success-content: oklch(12.199% 0.016 174.616);
+	--color-warning: oklch(70.081% 0.164 56.844);
+	--color-warning-content: oklch(14.016% 0.032 56.844);
+	--color-error: oklch(53.07% 0.241 24.16);
+	--color-error-content: oklch(90.614% 0.048 24.16);
 	--radius-selector: 1rem;
 	--radius-field: 0.5rem;
-	--radius-box: 2rem;
+	--radius-box: 1rem;
 	--size-selector: 0.25rem;
 	--size-field: 0.25rem;
 	--border: 1px;
 	--depth: 1;
 	--noise: 0;
-  }
+}