From b13de60b52b80df064dfc59cd7fb6571ff3d9847 Mon Sep 17 00:00:00 2001
From: JCEEE <0xjceee@proton.me>
Date: Thu, 3 Sep 2026 12:16:50 +0100
Subject: [PATCH] add some sugar to homepage

---
 frontend/src/lib/components/FamDone.svelte |   2 +-
 frontend/src/lib/components/Footer.svelte  |  19 +-
 frontend/src/lib/components/TopNav.svelte  |   2 +-
 frontend/src/routes/+page.svelte           | 273 +++++++++++++++++----
 frontend/src/routes/[fam]/+layout.svelte   |   2 +-
 5 files changed, 238 insertions(+), 60 deletions(-)

diff --git a/frontend/src/lib/components/FamDone.svelte b/frontend/src/lib/components/FamDone.svelte
index 97d803f..35bd9a2 100644
--- a/frontend/src/lib/components/FamDone.svelte
+++ b/frontend/src/lib/components/FamDone.svelte
@@ -24,7 +24,7 @@
 		color: inherit;
 	}
 	.fam-done-check {
-		font-size: x-small;
+		font-size: 0.6em;
 		vertical-align: super;
 		position: relative;
 		display: inline-block;
diff --git a/frontend/src/lib/components/Footer.svelte b/frontend/src/lib/components/Footer.svelte
index f8666ed..816cbac 100644
--- a/frontend/src/lib/components/Footer.svelte
+++ b/frontend/src/lib/components/Footer.svelte
@@ -7,15 +7,15 @@
 	let { sidebar = false } = $props();
 </script>
 
-<footer class="bg-slate-100 text-[#4c1d95]">
+<footer class="bg-slate-100 text-[#4c1d95] border-t border-[#4338ca]">
 	<div class="footer-inner px-8 py-16" class:sidebar>
-		<div class="flex items-center justify-between gap-2">
+		<div class="footer-row flex items-center justify-between gap-2">
 			<span class="footer-star">✦</span>
 			<span class="footer-copy"
 				>&copy; {new Date().getFullYear()}
 				<span class="footer-text font-bold text-xl"><FamDone /></span> All rights reserved.</span
 			>
-			<aside class="text-text-200 text-wash-300 flex flex-col justify-end text-right text-sm">
+			<aside class="footer-aside text-text-200 text-wash-300 flex flex-col justify-end text-right text-sm">
 				<span>Built by humans</span>
 				<a href="https://threejjjs.xyz">
 					<h5 class="m-0 text-right font-tertiary text-xl md:text-3xl">
@@ -45,18 +45,31 @@
 		line-height: 1;
 		color: #4c1d95;
 		flex-shrink: 0;
+		position: absolute;
+		left: 2rem;
 	}
 	.footer-copy {
 		flex: 1;
 		text-align: center;
 		padding: 0 1rem;
 	}
+	.footer-row {
+		position: relative;
+	}
+	.footer-aside {
+		position: absolute;
+		right: 2rem;
+	}
 	@media (max-width: 639px) {
 		.footer-star {
 			font-size: 1.75rem;
+			left: 1rem;
 		}
 		.footer-copy {
 			padding: 0 0.5rem;
 		}
+		.footer-aside {
+			right: 1rem;
+		}
 	}
 </style>
diff --git a/frontend/src/lib/components/TopNav.svelte b/frontend/src/lib/components/TopNav.svelte
index 42c20b4..cc01ce9 100644
--- a/frontend/src/lib/components/TopNav.svelte
+++ b/frontend/src/lib/components/TopNav.svelte
@@ -39,7 +39,7 @@
 	.topnav {
 		position: fixed;
 		top: 0; left: 220px; right: 0;
-		height: 48px;
+		height: 52px;
 		background: #fff;
 		border-bottom: 1px solid #e5e7eb;
 		display: flex;
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index ab87dd5..060308f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -36,8 +36,19 @@
 	{/if}
 	<!-- HERO -->
 	<section class="hero">
-		<div class="hero-inner">
-			<div class="hero-copy">
+		<div class="hero-content">
+			<span class="hero-kicker">The family chore app</span>
+			<h1 class="hero-title"><FamDone /></h1>
+			<p class="hero-sub">Every chore checked. Every allowance earned — on autopilot.</p>
+			<div class="hero-actions">
+				<a class="hero-cta" href="/signup">Create my family</a>
+				<a class="hero-cta-ghost" href="/pricing">See pricing</a>
+			</div>
+		</div>
+	</section>
+	<section class="intro">
+		<div class="intro-inner">
+			<div class="intro-copy">
 				<span class="pill">For busy families</span>
 				<h1>Chores done. <span class="accent">Allowance earned.</span></h1>
 				<p class="lede">
@@ -71,11 +82,38 @@
 				</p>
 			</div>
 		</div>
+		<div class="explainer">
+			<div class="steps">
+				<article class="step">
+					<span class="step-num">1</span>
+					<h3>Create your family</h3>
+					<p>
+						Set up chores and how much each one is worth. Your kids join in seconds with an invite
+						code.
+					</p>
+				</article>
+				<article class="step">
+					<span class="step-num">2</span>
+					<h3>Kids do the work</h3>
+					<p>
+						They see today's chores as a simple card board and tick them off as they go — points are
+						added instantly.
+					</p>
+				</article>
+				<article class="step">
+					<span class="step-num">3</span>
+					<h3>Allowance pays out</h3>
+					<p>
+						Points add up, then turn into pocket money on payday. Rewards and monthly bonuses keep
+						it fun.
+					</p>
+				</article>
+			</div>
+		</div>
 	</section>
 
 	<!-- EXPLAINER -->
-	<section class="explainer">
-		<h2>How it works</h2>
+	<!-- <section class="explainer">
 		<div class="steps">
 			<article class="step">
 				<span class="step-num">1</span>
@@ -102,54 +140,62 @@
 				</p>
 			</article>
 		</div>
-	</section>
+	</section> -->
 
 	<!-- FEATURES -->
 	<section class="features">
-		<h2>Everything a family needs</h2>
-		<div class="feature-grid">
-			<article class="feature">
-				<h3>Chore board</h3>
-				<p>Reusable chore templates and a simple assignment grid. Build once, reuse every week.</p>
-			</article>
-			<article class="feature">
-				<h3>Live progress</h3>
-				<p>
-					Realtime sync across the whole family — see points and progress update the moment a chore
-					is done.
+		<div class="features-inner">
+			<h2>Everything a family needs</h2>
+			<div class="feature-grid">
+				<article class="feature">
+					<h3>Chore board</h3>
+					<p>
+						Reusable chore templates and a simple assignment grid. Build once, reuse every week.
+					</p>
+				</article>
+				<article class="feature">
+					<h3>Live progress</h3>
+					<p>
+						Realtime sync across the whole family — see points and progress update the moment a
+						chore is done.
+					</p>
+				</article>
+				<article class="feature">
+					<h3>Automatic allowance</h3>
+					<p>
+						Points convert to money using your family's own rules. No mental maths, no arguments.
+					</p>
+				</article>
+				<article class="feature">
+					<h3>Rewards &amp; bonuses</h3>
+					<p>
+						Kids can spend points on rewards, and you can run a monthly bonus for the top earner.
+					</p>
+				</article>
+				<article class="feature">
+					<h3>Kid-friendly</h3>
+					<p>
+						A simple, colourful interface kids love — big buttons, clear feedback, their own space.
+					</p>
+				</article>
+				<article class="feature">
+					<h3>Private by design</h3>
+					<p>
+						Everything is scoped to your family. Kids join with an invite code and stay in your
+						family.
+					</p>
+				</article>
+			</div>
+			<div class="cta">
+				<p>Ready to make chores painless?</p>
+				<a class="cta-btn" href="/signup">Create your family</a>
+				<p class="card-alt">
+					<a
+						class="hover:underline self-center items-center justify-center flex gap-2"
+						href="/pricing">or see pricing {@html chevronRightIcon}</a
+					>
 				</p>
-			</article>
-			<article class="feature">
-				<h3>Automatic allowance</h3>
-				<p>Points convert to money using your family's own rules. No mental maths, no arguments.</p>
-			</article>
-			<article class="feature">
-				<h3>Rewards &amp; bonuses</h3>
-				<p>Kids can spend points on rewards, and you can run a monthly bonus for the top earner.</p>
-			</article>
-			<article class="feature">
-				<h3>Kid-friendly</h3>
-				<p>
-					A simple, colourful interface kids love — big buttons, clear feedback, their own space.
-				</p>
-			</article>
-			<article class="feature">
-				<h3>Private by design</h3>
-				<p>
-					Everything is scoped to your family. Kids join with an invite code and stay in your
-					family.
-				</p>
-			</article>
-		</div>
-		<div class="cta">
-			<p>Ready to make chores painless?</p>
-			<a class="cta-btn" href="/signup">Create your family</a>
-			<p class="card-alt">
-				<a
-					class="hover:underline self-center items-center justify-center flex gap-2"
-					href="/pricing">or see pricing {@html chevronRightIcon}</a
-				>
-			</p>
+			</div>
 		</div>
 	</section>
 </main>
@@ -221,10 +267,120 @@
 
 	/* HERO */
 	.hero {
+		position: relative;
+		overflow: hidden;
+		background: #1e1b4b;
+		color: #eef2ff;
+		padding: 6rem 1.5rem;
+		text-align: center;
+	}
+	.hero::before,
+	.hero::after {
+		content: '';
+		position: absolute;
+		border-radius: 50%;
+		filter: blur(60px);
+		z-index: 0;
+	}
+	.hero::before {
+		width: 480px;
+		height: 480px;
+		top: -180px;
+		left: -120px;
+		background: rgba(67, 56, 202, 0.55);
+	}
+	.hero::after {
+		width: 420px;
+		height: 420px;
+		bottom: -160px;
+		right: -120px;
+		background: rgba(245, 158, 11, 0.25);
+	}
+	.hero-content {
+		position: relative;
+		z-index: 1;
+		max-width: 48rem;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+	}
+	.hero-kicker {
+		display: inline-block;
+		background: rgba(224, 231, 255, 0.12);
+		border: 1px solid rgba(224, 231, 255, 0.25);
+		color: #c7d2fe;
+		font-size: 0.78rem;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		padding: 0.4rem 0.95rem;
+		border-radius: 999px;
+	}
+	.hero-title {
+		margin: 0;
+		font-size: clamp(3rem, 8vw, 5.5rem);
+		line-height: 1;
+		font-weight: 800;
+		letter-spacing: -0.02em;
+	}
+	.hero-sub {
+		margin: 0;
+		max-width: 34rem;
+		font-size: 1.2rem;
+		line-height: 1.6;
+		color: #c7d2fe;
+	}
+	.hero-actions {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 0.75rem;
+		margin-top: 0.75rem;
+	}
+	.hero-cta {
+		display: inline-block;
+		background: #f59e0b;
+		color: #1e1b4b;
+		text-decoration: none;
+		font-weight: 700;
+		font-size: 1rem;
+		padding: 0.8rem 1.75rem;
+		border-radius: 999px;
+		box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
+		transition:
+			transform 0.15s,
+			box-shadow 0.15s;
+	}
+	.hero-cta:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 10px 28px rgba(245, 158, 11, 0.45);
+	}
+	.hero-cta-ghost {
+		display: inline-block;
+		color: #eef2ff;
+		text-decoration: none;
+		font-weight: 600;
+		font-size: 1rem;
+		padding: 0.8rem 1.5rem;
+		border-radius: 999px;
+		border: 1px solid rgba(224, 231, 255, 0.35);
+		transition:
+			background 0.15s,
+			border-color 0.15s;
+	}
+	.hero-cta-ghost:hover {
+		background: rgba(224, 231, 255, 0.1);
+		border-color: rgba(224, 231, 255, 0.6);
+	}
+
+	/* INTRO (was the original hero) */
+	.intro {
 		background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
 		padding: 4.5rem 1.5rem;
 	}
-	.hero-inner {
+	.intro-inner {
 		max-width: 1100px;
 		margin: 0 auto;
 		display: grid;
@@ -370,11 +526,18 @@
 	}
 
 	/* EXPLAINER */
-	.explainer,
-	.features {
+	.explainer {
 		max-width: 1100px;
 		margin: 0 auto;
 		padding: 4rem 1.5rem;
+		padding-top: 6em;
+	}
+	.features {
+		padding: 4rem 1.5rem;
+	}
+	.features-inner {
+		max-width: 1100px;
+		margin: 0 auto;
 	}
 	.explainer h2,
 	.features h2 {
@@ -418,8 +581,10 @@
 
 	/* FEATURES */
 	.features {
-		background: #f5f6fa;
-		border-radius: 0;
+		background: linear-gradient(170deg, #8fb6ee 0%, #dfe9fb 45%, #f5f6fa 100%);
+	}
+	.features h2 {
+		color: #4338ca;
 	}
 	.feature-grid {
 		display: grid;
@@ -467,7 +632,7 @@
 
 	/* RESPONSIVE */
 	@media (max-width: 860px) {
-		.hero-inner {
+		.intro-inner {
 			grid-template-columns: 1fr;
 		}
 		.steps,
diff --git a/frontend/src/routes/[fam]/+layout.svelte b/frontend/src/routes/[fam]/+layout.svelte
index 21d85fb..47e4f7c 100644
--- a/frontend/src/routes/[fam]/+layout.svelte
+++ b/frontend/src/routes/[fam]/+layout.svelte
@@ -270,7 +270,7 @@
 	}
 	.app-main {
 		margin-left: 220px;
-		margin-top: 48px;
+		margin-top: 52px;
 		padding: 1.5rem 2rem;
 		flex: 1;
 		transition: margin-left 0.2s;