Better skeleton use, live services in booking
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user