[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_538":539,"_540":541},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":61,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",384,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/pages/home.tsx","latestPath","fileId","09604c7e-4c96-11f1-b531-ee650bb23af1","name","home.tsx","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\nexport function HomePage({ appName, valTownUsername, user }: AppProps) {\n return (\n \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\n shared reminders list, a smart inbox, and a few other real, working apps, ready to\n fork.\n \n \n \n

Diff · v384