Picket

Picket is a site for a fence and gate builder: wood privacy fences, horizontal and modern slat fences, vinyl and composite, ornamental aluminum and iron, farm and ranch fencing, and gates with openers. It is warm, calm and crafted, like a heritage outdoor catalogue: the home page opens on a photo of a long new cedar fence running into the distance at golden hour, edge to edge on every screen, slowly moving along the fence, with the headline standing on a gate with a pointed top and the phone number and a free estimate right under it. Cards, photos and buttons are dog-eared like fence boards, the soft shadow of a board fence falls across every page, and the colours are walnut stain, field blue and meadow green on a cedar cream. The demo is a fictional business, Bramwell Fence & Gate.

Picket 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, projects, guides, 404	Pages → the page’s own entry
Prices (the price per foot, packages, a fence going in step by step, booking, deposits and tune-ups, questions)	Pages → Prices page
Contact (estimate form, towns, map, hours, details, questions)	Pages → Contact page
Services (icon, colour, price from, how long, what’s included, typical jobs, questions, photo)	Content → Services
Projects (where, when, what we did, the run, time, cost, the cut list, photo, story)	Content → Projects
Guides (one can be for members only)	Content → Guides
Name, phone, address, insurance, navigation, header button, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms, warranty	Pages → Legal

In headlines, words wrapped in *stars* get a little fence run built under them as they scroll into view: a rail is drawn from the left and a row of pickets rises along it, as in “Built this year, *cut list and all*”.

The opening photo

The home page’s first section is the photo. Its texts are yours: the status line on a meadow chip (“Booking spring builds”), 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 post caps under the gate (wide screens).

• Photo: 16:9 and at least 1920 pixels wide, with a quiet middle (sky or field), because the gate stands there. It shows at once and is the page’s largest image. Set Photo focus to the part that should stay in view on a narrow screen (e.g. 30% 60%).

The copy stands on the gate, an opaque panel (cream by day, field blue at night) with a pointed top and a cedar cap rail, so it reads the same over any photo. On load its latch drops into place, a string line is pulled taut along the foot of the screen and a row of backlit pickets goes up along it board by board; the photo slowly moves in along the fence and back. With reduced motion nothing moves.

Services and projects

Each service card shows its photo through the boards: it appears through narrow vertical gaps that widen until the boards are gone as the card scrolls into view, then a band in one of the three colours with its number and its drawing. Projects carry a cut list, written on the kraft tag that hangs off a bundle of lumber: up to eight lines such as “Run: 248 ft, 4 corners”, “Post depth: 36 in, belled” or “Concrete: 64 bags”. Cards show the first three lines; the project’s page shows them all beside the story.

Prices, booking and payments

The prices page holds the price per foot on one big picket with its small print (tear-out, a gate, the smallest job, the estimate), up to four packages (mark one as the popular one; prices can be ranges like “$6,500–$9,500”), a fence going in step by step beside a fence in elevation that is built stage by stage as you scroll (also on the home page), booking a free estimate with Cal.com, and deposits and tune-ups 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 yard 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 yard’s coordinates in map.config.json and run pnpm map -- fetch. detail: "area" (the default in Picket) 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 estimate	Prices page, loads on click; a preview of the calendar until connected	Cal.com
Deposits and tune-ups	Prices page (one-time prices)	Stripe or Lemon Squeezy
Care 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
Estimate form	Contact page; messages go to the email in Site settings	Resend
AI chat	On every page, answers about services, prices, projects and areas; gives prices only as ranges or “from”, never settles property lines or permits for anyone	Claude or OpenAI
Search	⌘K or the search button: services, projects, guides, prices, 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 the gate), Services (cards seen through the boards), How a fence goes in (a fence in elevation, built stage by stage), Projects (with their cut lists), Numbers (on fence posts that rise as they scroll in), The area on a map, Guides, Care notes by email and Closing call (a field-blue fence at dusk with a photo in a cedar frame). With reduced motion nothing moves.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (walnut stain: buttons, links, marked words and their pickets by day), the second (field blue: the deep bands, the plates and dark fills, and the night theme) and the third (meadow: chips, the status line, light fills and the pickets by night). The accent and field blue are darkened until white text on them is readable and the meadow is lightened until dark text on it is; a color that can’t get there stops the build with a message. Brand also sets the fonts and the corners (dog-eared, the two top corners clipped like a fence board, or square). The site opens on the cedar-cream day theme even when the visitor’s system is dark; the toggle switches to late dusk over the pasture, and the browser remembers the choice. The header strip, the tab bar and the deep bands look the same in both.

Languages

Picket is ready for more languages: see Languages.

The 404 page

A small game, Deer fence: a paddock from above with young saplings and rock outcrops on some corners. Set posts on corners (tap, or the arrow keys and Enter) and close the fence on the first post so every sapling is inside, with as little fence as you can. A square is an 8 ft bay; no post can stand on a rock, and the fence can’t cross itself or run through a tree. A sapling left outside lets a deer in: undo and go round. Each paddock scores 100 × the shortest fence ÷ yours; the shortest is worked out exactly, and a paddock is only dealt when a rectangle round the saplings is clearly longer. Three paddocks, each bigger; U undoes a post and R starts the paddock over. 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, projects and guides for AI assistants, in every language.
• Pages carry JSON-LD: the business as a HomeAndConstructionBusiness with the areas it serves and its packages (price ranges as a minimum and a maximum), services as Services with their price, projects as CreativeWorks, a fence going in step by step 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).