Better skeleton use, live services in booking

This commit is contained in:
2025-10-18 21:39:57 +01:00
parent fad47df642
commit 68cf27541a
6 changed files with 408 additions and 212 deletions
+26 -5
View File
@@ -1,14 +1,35 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import PortfolioCarousel from '$lib/components/layout/PortfolioCarousel.svelte';
import { authStore } from '$lib/stores/auth.svelte';
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<section class="py-20 text-center">
<h1 class="m-2 mb-4 text-4xl font-bold">Welcome to Crussell Nails</h1>
<p class="mb-8 text-lg text-gray-600">
Professional beauty treatments in a calm and friendly environment.
</p>
<Button href="/book" class="px-6 py-3 text-lg">Book an Appointment</Button>
{#if authStore.isLoading}
<!-- Skeleton loading state -->
<div class="m-2 mb-4">
<Skeleton class="mx-auto h-10 w-80 max-w-full" />
</div>
<div class="mb-8">
<Skeleton class="mx-auto h-6 w-96 max-w-full" />
</div>
<Skeleton class="mx-auto h-12 w-48" />
{:else}
<h1 class="m-2 mb-4 text-4xl font-bold">
{#if !authStore.isAuthenticated}
Welcome to Crussell Nails
{:else if authStore.currentUser?.role === 'unverified_email'}
Welcome {authStore.currentUser?.firstName}
{:else}
Welcome back {authStore.currentUser?.firstName}
{/if}
</h1>
<p class="mb-8 text-lg text-gray-600">
Professional beauty treatments in a calm and friendly environment.
</p>
<Button href="/book" class="px-6 py-3 text-lg">Book an Appointment</Button>
{/if}
</section>
<section class="mx-auto max-w-4xl px-6 py-16">