[{"_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",{"_102":101,"_32":46,"_111":92,"_27":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":-5,"_124":-5,"_125":25,"_126":127,"_128":61,"_129":-5,"_130":-5,"_131":132},"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",381,"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: demo first, code second. Five feature cards, each\n// its own live, working mini-app — the full request-routing and source-map\n// walkthrough lives in /docs for whoever wants it after trying the demos.\n\nimport {\n Badge,\n Banner,\n Button,\n Card,\n ClickableCard,\n Grid,\n Heading,\n HStack,\n Section,\n Text,\n VStack,\n} from \"../astryx/components.ts\";\nimport { ForkButton } from \"./kit.tsx\";\nimport type { AppProps } from \"../types.ts\";\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 tiny, real app this Quickstart is sized for.\",\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\nexport function HomePage({ appName, valTownUsername, user }: AppProps) {\n return (\n \n \n \n \n \n \n \n {appName}\n \n A full-stack Val Town starter kit, disguised as five working apps. Try them below,\n then fork this App and swap in your own idea — built for solo projects and small teams\n (<10 people), not enterprise platforms.\n \n \n \n

Diff · v381