Tuck

Tuck is a site for a babysitting agency, a nanny or a childminder, an after-school or holiday club: anyone who looks after other people’s children. It’s made like a family fridge door: the page is the door itself, full width, scribbled with faint crayon doodles, with the light of the day falling on it (afternoon at the top, night by the footer). Headlines spell a word in alphabet magnets, photos and children’s crayon drawings are held on with magnets, and handover notes, sticky notes and vouchers are pinned between them. On the home page a crayon window turns from afternoon to night as the evening scrolls past, while the handover note ticks itself off. Sitters with their own pages, prices, a page for new sitters, a journal and a contact page complete it.

Tuck comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Sitters, prices, join, journal, contact, 404	Pages → the page’s own entry
Sitters (role, ages, experience, languages, good at, checks, free days, favourite game, portrait)	Content → Sitters
Journal posts	Content → Journal
Name, description, area you cover, email, phone, address, navigation, header button, profiles, social picture	Pages → Site settings
Buttons, labels, chat, search, emails, game texts	Content → Interface texts
Privacy, terms	Pages → Legal

In headlines, a word wrapped in *stars* is spelled in alphabet magnets, as in “Grown-ups’ night out, *sorted*”.

The evening

The evening section keeps a crayon window on screen while its chapters (three to six) scroll past, each one a line of the handover note with its time. The sky in the window turns from afternoon to sunset to night, the sun sinks, the moon and stars come out, the neighbours’ lights go on at dusk and off one by one, and the kitchen clock moves on to bedtime; each line ticks itself off as it passes. It is all drawn in code (src/components/EveningWindow.astro) in the brand’s colours, so it follows any palette. Visitors who prefer reduced motion see the night with every line ticked.

Sitters, prices and vouchers

• A sitter has a role, a tagline, a summary, who they look after, their experience, languages, what they’re good at, their checks and training, the days they’re free (Monday first), a favourite game, a portrait (4:5, a photo or a drawing) and a colour. Keep the checks true: the sitter’s page and the AI chat repeat them.
• The star chart on the home page has a row for each check and a column for each sitter.
• Prices: rates on sticky notes, how booking works, and packs and vouchers: turn on “Sell with Stripe Checkout” on a pack and put a one-time Price id there; the button then works. Buyers come back to the prices page, and the Stripe webhook (/api/stripe/webhook) emails them, where you can add your own steps.
• Meet-and-greet: a free call on Cal.com, on the prices page.
• Quotes on the home page: only real quotes with their source.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Packs and vouchers	Prices page	Stripe
Meet-and-greet calls	Prices page; a preview of the calendar until it’s connected	Cal.com
Newsletter and the sitter list	Home, journal and join pages, with a welcome email	Supabase
Contact form	Contact page; messages go to the email in Site settings	Resend
AI chat	On every page, answers from your sitters, services, prices, the area you cover, questions and journal	Claude
Search	⌘K or the search button: sitters, journal, prices, join, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics

Sections

The home page is built from these sections, in any order: The opening, The evening, What we do, Sitters, The star chart, Feature (a photo and a text, e.g. pick-ups or holidays), Numbers, Quotes, From the journal, Newsletter sign-up and Closing call.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (buttons, links and the first magnet colour), the second and the third (sticky notes, magnets and fills). A fourth magnet colour is added for you (tomato red, or violet when your accent is red). Buttons are darkened until their white text is readable, the fills are lightened until dark text on them is, and the magnet letters are kept readable as large text; a color that can’t get there stops the build with a message. The site opens in the day theme whatever the visitor’s system is set to; the night theme, the kitchen with the night light on, comes on with the toggle (paper stays white). Brand also sets the fonts (a round, chunky face for headings, the text font and the handwriting for notes) and the corners.

Languages

Tuck is ready for more languages: see Languages.

The 404 page

A small game, Lights out: it is bedtime, but windows of the house are still lit. Tap a window to switch its light and its neighbours’ (above, below, left and right) until the whole house is dark; arrow keys and Enter work too. Three houses, each a size bigger; every house can be put to sleep, and points compare your taps with the fewest possible. Lit and dark windows also differ in what’s drawn in them, so colour is never the only clue. The best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, sitters and journal for AI assistants, in every language.
• Pages carry JSON-LD: the business as a ChildCare, sitters as Persons, prices as a Service, the join page as a JobPosting, the contact questions as a FAQPage, and each post.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm cms sanity schema|seed  # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).