popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign homepage, add global footer, fix carousel font

Browse Source 
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:
popertots
2026-08-22 00:34:49 +01:00
parent 51d29e6bd4
commit f6caaab8a3
3 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+19 -25
View File
@@ -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>