feat: redesign homepage, add global footer, fix carousel font
Homepage: restored original v0 design, replaced lorem ipsum with real service descriptions, added BusinessHours (Opening Hours) section, alternating bg-gray-50 section backgrounds. Layout: added global sticky footer (hidden on /admin/schedule, /account, and ?format=pdf pages), wrapped content in min-h-screen flex layout. PortfolioCarousel: set heading to Playfair Display.
This commit is contained in:
@@ -38,7 +38,7 @@
|
||||
|
||||
<section class="w-full overflow-hidden py-16">
|
||||
<div class="mx-auto max-w-6xl px-6">
|
||||
<h2 class="mb-12 text-center text-2xl font-semibold">Our Portfolio</h2>
|
||||
<h2 class="mb-12 text-center font-['Playfair_Display'] text-2xl font-semibold">Our Portfolio</h2>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full overflow-hidden">
|
||||
|
||||
@@ -6,9 +6,16 @@
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { authStore } from '$lib/stores/auth.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
const { children } = $props();
|
||||
|
||||
let hideFooter = $derived(
|
||||
$page.url.pathname === '/admin/schedule' ||
|
||||
$page.url.pathname === '/account' ||
|
||||
$page.url.searchParams.get('format') === 'pdf'
|
||||
);
|
||||
|
||||
// Default to 'top-center' (mobile-first approach)
|
||||
let toasterPosition = $state<'top-center' | 'bottom-center'>('top-center');
|
||||
|
||||
@@ -59,25 +66,33 @@
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<NavBar />
|
||||
<Toaster position={toasterPosition} />
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<NavBar />
|
||||
<Toaster position={toasterPosition} />
|
||||
|
||||
<main class="pt-16">
|
||||
{#if authStore.currentUser?.role === 'unverified_email'}
|
||||
<div class="w-full bg-red-600 py-2 pr-8 pl-8 text-center text-sm font-medium text-white">
|
||||
Please verify your email address to continue. Didn't recieve the email? Check your spam
|
||||
folder, or <button
|
||||
type="button"
|
||||
onclick={verify_email}
|
||||
class="cursor-pointer border-0 bg-transparent p-0 text-white underline"
|
||||
>
|
||||
click here
|
||||
</button>
|
||||
to resend it.
|
||||
</div>
|
||||
<main class="flex-1 pt-16">
|
||||
{#if authStore.currentUser?.role === 'unverified_email'}
|
||||
<div class="w-full bg-red-600 py-2 pr-8 pl-8 text-center text-sm font-medium text-white">
|
||||
Please verify your email address to continue. Didn't recieve the email? Check your spam
|
||||
folder, or <button
|
||||
type="button"
|
||||
onclick={verify_email}
|
||||
class="cursor-pointer border-0 bg-transparent p-0 text-white underline"
|
||||
>
|
||||
click here
|
||||
</button>
|
||||
to resend it.
|
||||
</div>
|
||||
{/if}
|
||||
{@render children?.()}
|
||||
</main>
|
||||
|
||||
{#if !hideFooter}
|
||||
<footer class="border-t py-3 text-center text-xs text-gray-500 md:py-4 md:text-sm">
|
||||
© {new Date().getFullYear()} Crussell Nails. All rights reserved.
|
||||
</footer>
|
||||
{/if}
|
||||
{@render children?.()}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media print {
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { resolve } from '$app/paths';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import PortfolioCarousel from '$lib/components/layout/PortfolioCarousel.svelte';
|
||||
import BusinessHours from '$lib/components/layout/BusinessHours.svelte';
|
||||
import { authStore } from '$lib/stores/auth.svelte';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
|
||||
@@ -103,7 +104,6 @@
|
||||
|
||||
<section class="py-20 text-center">
|
||||
{#if authStore.isLoading}
|
||||
<!-- Skeleton loading state -->
|
||||
<div class="m-2 mb-4">
|
||||
<Skeleton class="mx-auto h-10 w-80 max-w-full" />
|
||||
</div>
|
||||
@@ -133,56 +133,50 @@
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-4xl px-6 py-16">
|
||||
<h2 class="mb-8 text-center text-2xl font-semibold">Our Services</h2>
|
||||
<section class="bg-gray-50">
|
||||
<div class="mx-auto max-w-4xl px-6 py-16">
|
||||
<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Our Services</h2>
|
||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
|
||||
<div class="rounded-lg border p-6">
|
||||
<h3 class="mb-2 text-lg font-semibold">Hands</h3>
|
||||
<p class="text-gray-600">
|
||||
Lorem hand ipsum nail dolor art sit paint amet, skin consectetur cuticle adipiscing file
|
||||
elit.
|
||||
Gel polish, nail art, and natural nail care — finished with a soothing hand massage.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-6">
|
||||
<h3 class="mb-2 text-lg font-semibold">Feet</h3>
|
||||
<p class="text-gray-600">
|
||||
Lorem foot ipsum nail dolor art sit paint amet, skin consectetur cuticle adipiscing file
|
||||
elit.
|
||||
Luxurious pedicures with exfoliation, cuticle care, and a long-lasting polish finish.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-6">
|
||||
<h3 class="mb-2 text-lg font-semibold">Brows</h3>
|
||||
<p class="text-gray-600">
|
||||
Lorem brow ipsum eye dolor art sit shape amet, tint consectetur colour adipiscing tweaze
|
||||
elit.
|
||||
Expert shaping, tinting, and lamination for brows that frame your face perfectly.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg border p-6">
|
||||
<h3 class="mb-2 text-lg font-semibold">Wax</h3>
|
||||
<p class="text-gray-600">
|
||||
Lorem wax ipsum leg dolor body sit sticky amet, back consectetur sack adipiscing crack elit.
|
||||
Gentle waxing for face, body, and brows — smooth results with minimal discomfort.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PortfolioCarousel />
|
||||
|
||||
{#if !authStore.isAuthenticated}
|
||||
<section class="bg-gray-50 py-16">
|
||||
<div class="mx-auto max-w-3xl px-6 text-center">
|
||||
<h2 class="mb-4 text-2xl font-semibold">Why Choose Us?</h2>
|
||||
<p class="leading-relaxed text-gray-600">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
|
||||
tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
|
||||
diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
|
||||
nec nonummy molestie,
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
<section class="bg-gray-50">
|
||||
<div class="mx-auto max-w-4xl px-6 py-16">
|
||||
<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Opening Hours</h2>
|
||||
<BusinessHours />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 text-center">
|
||||
<h2 class="mb-4 text-2xl font-semibold">Ready to Treat Yourself?</h2>
|
||||
<Button class="px-6 py-3 text-lg" href="prices">View Price List</Button>
|
||||
<h2 class="mb-4 font-['Playfair_Display'] text-2xl font-semibold">Ready to Treat Yourself?</h2>
|
||||
<Button href={resolve('/prices')} class="px-6 py-3 text-lg">View Price List</Button>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user