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.

frontend/src/lib/components/layout/PortfolioCarousel.svelte

@@ -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">

frontend/src/routes/+layout.svelte

@@ -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,10 +66,11 @@
 	/>
 </svelte:head>
 
+<div class="flex min-h-screen flex-col">
 	<NavBar />
 	<Toaster position={toasterPosition} />
 
-<main class="pt-16">
+	<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
@@ -79,6 +87,13 @@
 		{@render children?.()}
 	</main>
 
+	{#if !hideFooter}
+		<footer class="border-t py-3 text-center text-xs text-gray-500 md:py-4 md:text-sm">
+			&copy; {new Date().getFullYear()} Crussell Nails. All rights reserved.
+		</footer>
+	{/if}
+</div>
+
 <style>
 	@media print {
 		:global(nav) {

frontend/src/routes/+page.svelte

@@ -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">
+<section class="bg-gray-50">
-	<h2 class="mb-8 text-center text-2xl font-semibold">Our Services</h2>
+	<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
+				Gel polish, nail art, and natural nail care — finished with a soothing hand massage.
-				elit.
 			</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
+				Luxurious pedicures with exfoliation, cuticle care, and a long-lasting polish finish.
-				elit.
 			</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
+				Expert shaping, tinting, and lamination for brows that frame your face perfectly.
-				elit.
 			</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">
-	<section class="bg-gray-50 py-16">
+	<div class="mx-auto max-w-4xl px-6 py-16">
-		<div class="mx-auto max-w-3xl px-6 text-center">
+	<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Opening Hours</h2>
-			<h2 class="mb-4 text-2xl font-semibold">Why Choose Us?</h2>
+	<BusinessHours />
-			<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="py-20 text-center">
-	<h2 class="mb-4 text-2xl font-semibold">Ready to Treat Yourself?</h2>
+	<h2 class="mb-4 font-['Playfair_Display'] text-2xl font-semibold">Ready to Treat Yourself?</h2>
-	<Button class="px-6 py-3 text-lg" href="prices">View Price List</Button>
+	<Button href={resolve('/prices')} class="px-6 py-3 text-lg">View Price List</Button>
 </section>
+
+