add hero component

frontend/src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import FamDone from '$lib/components/FamDone.svelte';
 	import { homeIcon, checkCircleIcon, chevronRightIcon } from '$lib/components/icons';
 	import { readShortcut, shortcutTarget, type Shortcut } from '$lib/shortcut';
+	import CheckboxGrid from '$lib/components/CheckboxGrid.svelte';
 
 	let shortcut = $state<(Shortcut & { target: string }) | null>(null);
 
@@ -30,12 +31,13 @@
 			</span>
 			<span class="return-text">
 				<span class="return-fam">{shortcut.famName}</span>
-				<span class="return-sub">Jump back in {@html chevronRightIcon}</span>
+				<span class="return-sub">Jump back in</span>
 			</span>
 		</a>
 	{/if}
 	<!-- HERO -->
 	<section class="hero">
+		<CheckboxGrid />
 		<div class="hero-content">
 			<span class="hero-kicker">The family chore app</span>
 			<h1 class="hero-title"><FamDone /></h1>
@@ -273,6 +275,7 @@
 		color: #eef2ff;
 		padding: 6rem 1.5rem;
 		text-align: center;
+		clip-path: inset(0);
 	}
 	.hero::before,
 	.hero::after {
@@ -287,7 +290,7 @@
 		height: 480px;
 		top: -180px;
 		left: -120px;
-		background: rgba(67, 56, 202, 0.55);
+		background: midnightblue;
 	}
 	.hero::after {
 		width: 420px;
@@ -341,21 +344,19 @@
 	}
 	.hero-cta {
 		display: inline-block;
-		background: #f59e0b;
+		background: springgreen;
 		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;