[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":112,"_113":114},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","pikachu","name","Quickstart-Full-Stack","path","frontend/pages/home.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/pikachu/Quickstart-Full-Stack/code/frontend/pages/home.tsx","extension","id","b7c4b118-9edc-4d67-aaae-57c47b64b56e","home.tsx","fileId","09604c7e-4c96-11f1-b531-ee650bb23af1","parentId","08e43bac-4c96-11f1-9b18-ee650bb23af1","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","branchVersion",384,"latest",true,"createdAt",["D",1788223570216],"version",16,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// home.tsx — Landing page for a new category: Personal & Family Apps. Order\n// is deliberately demo-first — hero, the category pitch, the five live\n// features, then a short \"why no ops\" close. Code/architecture talk lives\n// entirely in /docs; this page never shows a file path or a snippet.\n\nimport {\n Badge,\n Banner,\n Button,\n Card,\n ClickableCard,\n Grid,\n Heading,\n HStack,\n Text,\n VStack,\n} from \"../astryx/components.ts\";\nimport { ForkButton, PageShell } from \"./kit.tsx\";\nimport type { AppProps } from \"../types.ts\";\n\nconst STACK_BADGES = [\"Val Town\", \"Astryx\", \"React 19 SSR\", \"SQLite\", \"Zero build step\"];\n\n// Illustrative, not exhaustive — the point is the shape of the category, not\n// a roadmap. Grocery & Chores is the one actually built below; the rest are\n// \"you could build this too\" prompts for whoever forks this App.\nconst EXAMPLE_APPS: { title: string; desc: string; built?: boolean }[] = [\n {\n title: \"Grocery & Chores\",\n desc: 'A running list everyone in the house can check off — no more \"did we buy milk?\" texts.',\n built: true,\n },\n {\n title: \"Movie Night Queue\",\n desc: \"A shared watchlist with votes, so nobody's stuck watching the in-laws' pick again.\",\n },\n {\n title: \"Family Recipe Box\",\n desc: \"Grandma's lasagna, searchable, before it's lost to a stained index card.\",\n },\n {\n title: \"Trip Packing List\",\n desc: \"One list, shared with everyone coming — updated the moment someone remembers sunscreen.\",\n },\n {\n title: \"Pet Care Schedule\",\n desc: \"Who fed the dog, who's walking her Tuesday — one page, no group-chat archaeology.\",\n },\n {\n title: \"Book Club Tracker\",\n desc: \"Whose turn to pick, what everyone thought, and when you're meeting next.\",\n },\n];\n\nconst FEATURES: {\n href: string;\n title: string;\n tag: string;\n tagVariant: \"teal\" | \"orange\" | \"cyan\" | \"purple\" | \"pink\";\n desc: string;\n}[] = [\n {\n href: \"/reminders\",\n title: \"Shared Reminders\",\n tag: \"SQLite\",\n tagVariant: \"teal\",\n desc:\n \"A household list every signed-in visitor can add to and check off together — the Grocery & Chores app from above, actually running.\",\n },\n {\n href: \"/email\",\n title: \"AI Email Triage\",\n tag: \"GPT-mini\",\n tagVariant: \"orange\",\n desc:\n \"Send a real email to this App's live address — a free GPT-mini model flags spam and summarises the rest, automatically.\",\n },\n {\n href: \"/blob\",\n title: \"Per-user Blob Storage\",\n tag: \"Blob\",\n tagVariant: \"cyan\",\n desc: \"Write, read, and list JSON values in a key-value store namespaced to your username.\",\n },\n {\n href: \"/admin\",\n title: \"Admin Dashboard\",\n tag: \"3-tier auth\",\n tagVariant: \"purple\",\n desc: \"A real super-admin panel, locked to nobody until you fork this App and claim it.\",\n },\n {\n href: \"/ui\",\n title: \"Astryx Design System\",\n tag: \"astryx\",\n tagVariant: \"pink\",\n desc: \"Every component on this page — tokens and theming, not hand-rolled CSS.\",\n },\n];\n\nconst WHY_ZERO_OPS: { title: string; desc: string }[] = [\n {\n title: \"No server to patch\",\n desc:\n \"Val Town hosts the SQLite database, file storage, scheduled jobs, and inbound email — you write functions, not infrastructure.\",\n },\n {\n title: \"No traffic-spike anxiety\",\n desc:\n \"Built for a household, not a userbase. There's no autoscaling problem to solve, because there's no scale to plan for.\",\n },\n {\n title: \"No hand-rolled UI\",\n desc:\n \"Astryx — Meta's open-source design system — provides every button, table, and badge here.\",\n },\n];\n\nfunction Hero({ appName, valTownUsername }: Pick) {\n return (\n \n \n \n \n \n \n {appName}\n \n Software for the ten people who matter — not the ten million who don't. No ops team on\n call, no infra bill creeping up while you sleep, no dashboard to babysit. Just a shared\n reminders list, a smart inbox, and a few other real, working apps, ready to fork.\n \n \n \n