From f6caaab8a355c909fea5f8b3d8b3ab950f06a36e Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Thu, 30 Jul 2026 20:49:11 +0100
Subject: [PATCH] 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.
---
 .../layout/PortfolioCarousel.svelte           |  2 +-
 frontend/src/routes/+layout.svelte            | 49 ++++++++++++-------
 frontend/src/routes/+page.svelte              | 44 +++++++----------
 3 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/layout/PortfolioCarousel.svelte b/frontend/src/lib/components/layout/PortfolioCarousel.svelte
index a9f0986..6ec473e 100644
--- a/frontend/src/lib/components/layout/PortfolioCarousel.svelte
+++ b/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">
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 964ac40..11ad8af 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/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,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">
+			&copy; {new Date().getFullYear()} Crussell Nails. All rights reserved.
+		</footer>
 	{/if}
-	{@render children?.()}
-</main>
+</div>
 
 <style>
 	@media print {
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 683c6b5..456a1ee 100644
--- a/frontend/src/routes/+page.svelte
+++ b/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">
-	<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>
+
+