More visual updates

This commit is contained in:
2025-02-24 23:36:34 -06:00
parent 6cc77a39ae
commit 0be45ac39b
5 changed files with 54 additions and 27 deletions

BIN
public/hero.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 473 KiB

View File

@ -13,6 +13,14 @@ const RegistryList = () => {
fetchRegistryItems(); 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 () => { const fetchRegistryItems = async () => {
setLoading(true); setLoading(true);
setError(null); setError(null);

View File

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

View File

@ -10,7 +10,12 @@ import SignOut from "../../components/SignOut.tsx";
View and Claim Items from the Registry: View and Claim Items from the Registry:
</div> </div>
<RegistryList client:load /> <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"> <div class="flex flex-row gap-2 justify-center items-center">
<a class="btn btn-primary" href="/">Back to Home</a> <a class="btn btn-primary" href="/">Back to Home</a>
@ -36,4 +41,9 @@ import SignOut from "../../components/SignOut.tsx";
.getElementById("registry-container") .getElementById("registry-container")
?.classList.remove("hidden"); ?.classList.remove("hidden");
}); });
// Check for empty registry
document.addEventListener("registry-empty", () => {
document.getElementById("empty-registry-message")?.classList.remove("hidden");
});
</script> </script>

View File

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