add some sugar to homepage

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;

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>

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;

frontend/src/routes/+page.svelte

@@ -36,8 +36,19 @@
 	{/if}
 	<!-- HERO -->
 	<section class="hero">
-		<div class="hero-inner">
+		<div class="hero-content">
-			<div class="hero-copy">
+			<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">
+	<!-- <section class="explainer">
-		<h2>How it works</h2>
 		<div class="steps">
 			<article class="step">
 				<span class="step-num">1</span>
@@ -102,30 +140,37 @@
 				</p>
 			</article>
 		</div>
-	</section>
+	</section> -->
 
 	<!-- FEATURES -->
 	<section class="features">
+		<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>
+					<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
+						Realtime sync across the whole family — see points and progress update the moment a
-					is done.
+						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>
+					<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>
+					<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>
@@ -151,6 +196,7 @@
 					>
 				</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,
+	.explainer {
-	.features {
 		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;
+		background: linear-gradient(170deg, #8fb6ee 0%, #dfe9fb 45%, #f5f6fa 100%);
-		border-radius: 0;
+	}
+	.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,

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;