Warden

Warden is a site for a pest control company: seasonal home protection plans, termite inspections and treatment, rodent exclusion, bed bug heat treatment, mosquito and tick yard care and real-estate inspections. It is calm, clean and protective, built from one picture: a white farmhouse at blue hour, its windows and lantern lit, an inspection lamp on the porch steps throwing a warm pool of light along the foundation. The home page opens on that house across the whole screen in a short film, with the phone number and an inspection button in a lit doorway right on it. Behind every page a fine dashed perimeter line runs down both edges with small bait stations on it, and pools of lamplight sit along the edges; the colours are spruce, lamplight and dusk rose on a cool porch white. Nothing on the site shows a pest. The demo is a fictional business, Fenwick Pest & Termite.

Warden 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)
Services, cases, guides, 404	Pages → the page’s own entry
Plans (free inspection, protection plans, how a visit works, booking, online payments, questions)	Pages → Plans page
Contact (inspection form, towns, map, hours, details, questions)	Pages → Contact page
Services (icon, badge colour, price from, how often, what’s included, who it’s good for, questions, photo)	Content → Services
Cases (where, the all-clear date, what was found and done, visits, cost, two photos, the visit log, story)	Content → Cases
Guides (one can be for members only)	Content → Guides
Name, phone, address, licence, navigation, header button, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms, re-service promise	Pages → Legal

In headlines, words wrapped in *stars* are set in the accent and sealed: a thin ring sweeps round them as they scroll into view, as in “Sleep *sound* tonight.” Keep marked words short (one to three words).

The opening

The home page’s first section fills the whole screen on every device. Its texts are yours: the small line, the headline, the lead, two buttons (make the first one your phone number as a tel: link and it gets a phone icon) and up to three facts on the perimeter line at its foot (wider screens). The picture is one or two files:

Photo: 16:9 and at least 1920 pixels wide, a home in the evening light. It shows at once and is what search engines and slow phones see. Set Photo focus to the part that should stay in view on a narrow screen (e.g. 50% 62%).
Film (optional): a short silent MP4 loop of the same view in public/media/ (1–2 MB, 1280 wide), e.g. /media/hero.mp4. It starts loading only after the page has, fades in over the photo and pauses when you scroll past. Leave it empty to show the photo only. Visitors who prefer reduced motion or save data see the photo.

The text stands in a lit doorway: an arch-topped panel of frosted dusk that keeps the white text readable even over a white frame, so the opening looks the same in both themes. On load a fine line of lamplight walks once round the whole screen and closes where it began.

Cases and their visit logs

Each case has a photo of the home, a photo of the work, what was found and what was done, the visits and the cost, and its visit log: every visit with when it was, a note, and the activity found (0 to 5, 0 being the all clear). On the case’s page the log runs down a dashed perimeter line, each visit a station whose lamp comes on; on the cards it is a small chart of bars falling to the all clear. The newest case is shown large on the home page with its whole log.

Services

Each service is a lit window: its photo stands in a tall arch that comes out of the blue dusk into lamplight as it scrolls into view, with a round badge holding the service’s drawing in one of the three colours (spruce, lamplight or rose). The drawings are calm line drawings of homes and tools, never of pests.

Plans, booking and payments

The plans page holds your free inspection in a lamplit arch with its small print (distance, re-service, contract, payment), up to four protection plans, each with its seasonal ring (the twelve months as a dial, a lamp for each visit of the year; mark one as the one most people choose), how a visit works beside a site plan that is walked and sealed as you scroll (also on the home page), booking a free inspection with Cal.com, and real-estate inspections and deposits you take with Stripe or Lemon Squeezy: each one gets a one-time price id. Without keys, the booking shows a preview of the calendar and the payment buttons explain how to switch them on.

The map of the area

The map is drawn from OpenStreetMap in your colours, with a pin on your office and a ring for the area you cover. It is part of the page (no embed, no cookies) and follows the theme and your accent. To draw your own, put your office’s coordinates in map.config.json and run pnpm map -- fetch. detail: "area" (the default in Warden) draws the main roads, railways, water and woods of a whole district, and Contact page → Map → Radius sets the ring; detail: "streets" draws the streets and buildings round one address instead.

Integrations

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

Feature	Where	Service
Book a free inspection	Plans page, loads on click; a preview of the calendar until connected	Cal.com
Real-estate inspections and deposits	Plans page (one-time prices)	Stripe or Lemon Squeezy
Seasonal notes by email	Home and guides pages, with a welcome email	Supabase or Mailchimp
Members-only guides	A guide marked members only shows its text after signing in	Clerk
Inspection form	Contact page; messages go to the email in Site settings	Resend
AI chat	On every page, answers about services, plans, cases and areas; never tells a visitor how to apply a pesticide or diagnoses a bite	Claude or OpenAI
Search	⌘K or the search button: services, cases, guides, plans, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, PostHog, Google Analytics
Photos	Served from your Cloudinary account when it is set	Cloudinary

Sections

The home page is built from these sections, in any order: Opening (the photo and film), Services (lit windows), Cases (the newest large with its visit log, then cards), How a visit works (beside a site plan walked and sealed as you scroll), Numbers (stations along the perimeter, on an evening band), The area on a map, Guides, Seasonal notes by email (an evening panel) and Closing call (an evening band with a porch light and a photo in an arch). With reduced motion nothing moves: the plan is complete, every ring sealed, every lamp lit.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (spruce: buttons, links, marked words, the perimeter by day and the evening bands), the second (lamplight: the call button over the photo, the lamps on the seasonal ring and the stations, the perimeter by night, fills with dark text) and the third (dusk rose: chips, small fills with dark text, the activity in the visit logs). The accent is darkened until white text on it is readable, the lamplight and rose are lightened until dark text on them is; a color that can’t get there stops the build with a message. Brand also sets the fonts and the corners (arched, like doorways and windows, or softly rounded). The site opens on the porch-white day theme even when the visitor’s system is dark; the toggle switches to evening, and the browser remembers the choice. The opening and the evening bands look the same in both.

Languages

Warden is ready for more languages: see Languages.

The 404 page

A small game, Seal it up: a house from above, with gaps in the siding where a mouse could get in and the pantry inside. Seal open squares with steel wool (tap a square, or the arrow keys and Enter) so that no way through the open squares leads from any gap to the pantry, then turn the lights out (the button or L): a way still open shows as a faint line of pawprints and you keep going. Fewer seals score more: 100 points times the fewest possible over yours. Three houses, bigger each time; 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, services, cases and guides for AI assistants, in every language.
Pages carry JSON-LD: the business as a HomeAndConstructionBusiness with the areas it serves and its plans as offers, services as Services with the price they start from, cases as CreativeWorks, how a visit works as a HowTo, questions as a FAQPage, and each guide as a BlogPosting.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm map -- fetch            # draw the map round map.config.json from OpenStreetMap
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).