Torque

Torque is a site for an independent car repair garage or mechanic: servicing, MOTs or inspections, brakes and tyres, diagnostics, EV and hybrid care, clutches and timing belts. It is set edge to edge on a workshop bay floor: a faint chequer-plate tread with painted bay lines, racing red, gauge amber and chrome, steel plates with rivets and condensed technical headings. On the home page a car on a two-post lift is drawn as a technical side elevation: as you scroll, the lift raises it, the body turns into a wireframe, the wheels, brakes, suspension, engine, exhaust and hybrid battery fan out with what you check on each, then it all goes back together, the lift lowers and a “ready for collection” ticket prints. The demo is a fictional garage, Kelbridge Motor Works.

Torque 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, jobs, notes, 404	Pages → the page’s own entry
Prices (labour rate, service levels, price list, how booking in works, booking, vouchers and deposits, questions)	Pages → Prices page
Visit (booking form, collection and delivery, map, opening hours, details, questions)	Pages → Visit page
Services (icon, part number, price from, how long, what’s checked, typical jobs, questions, photo)	Content → Services
Jobs (the car, when, time in the bay, cost, before and after photos, story)	Content → Jobs
Notes	Content → Notes
Name, phone, address, approvals, 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 pair of racing stripes underneath, as in “Every part *checked*, nothing guessed”.

The lift

The home page’s opening (Pages → Home page → The lift) has the headline, the buttons, five stage names for the rev counter beside the drawing (the car goes up, comes apart, is checked, goes back together, is ready), six checks and the ticket’s texts. The checks are labels on the drawing’s parts, so keep them in this order: wheels and tyres, brakes, suspension, engine and timing belt, exhaust, hybrid battery. The car is painted in your accent. On phones one caption under the stage follows the story instead of the labels. With reduced motion (or in a browser without scroll-driven animations) the drawing stands still in its exploded view with every label.

Jobs: before and after

Each job has a before and an after photo of the same view. On the cards (home page, jobs page, a service’s page) the after photo wipes in as the card scrolls past; on the job’s own page a slider lets visitors compare them (drag, or the arrow keys). Take both photos from the same spot, and leave makes and number plates out.

Prices, booking and payments

The prices page holds your labour rate on a black plate with its small print (parts, warranty, courtesy car), up to four service levels (mark one as the popular one), the price list in groups (each line a name, a price and an optional note), how booking in works along a dimension line (also on the home page), booking a car in with Cal.com, and vouchers and deposits you take with Stripe or Lemon Squeezy: each one gets a one-time Price id or variant id. Without keys, the booking shows a preview of the calendar and the payment buttons explain how to switch them on.

The map

The visit page (and the home page’s “Find the workshop”) draws the streets and buildings round your garage from OpenStreetMap in your colors, with a pin and “Get directions” links. It is part of the page (no embed, no cookies), shows no street names and follows the theme and your accent. To draw your own, put your garage’s coordinates in map.config.json and run pnpm map -- fetch. A ring round the pin (for example, where you collect cars from) is optional: Visit page → Map → Radius, in km (0 hides it).

Integrations

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

Feature	Where	Service
Book your car in	Prices page, loads on click; a preview of the calendar until connected	Cal.com
Vouchers and deposits	Prices page (one-time prices)	Stripe or Lemon Squeezy
MOT and service reminders	Home and notes pages, with a welcome email	Supabase or Mailchimp
Booking form	Visit page; messages go to the email in Site settings	Resend
AI chat	On every page, answers about services, prices, jobs and hours; tells anyone with a safety problem not to drive and to call	Claude or OpenAI
Members-only notes	A note marked “Members only” shows its text to signed-in members	Clerk
Search	⌘K or the search button: services, jobs, notes, prices, visit	built in, or Algolia
Photos	Delivered by Cloudinary when its cloud name is set	Cloudinary
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, PostHog, Google Analytics

Sections

The home page is built from these sections, in any order: The lift (the opening), Services (spec sheets), From the bay (before and after), How booking in works (along a dimension line on a black band), Numbers (on gauges whose needles sweep in; needle sets how far, from 0 to 1), Find the workshop (the map), Notes, Reminders by email and Closing call (a brushed chrome band with racing stripes). With reduced motion nothing moves.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (racing red: buttons, marks, the car’s paint), the second (gauge amber: needles, ticks, the lift’s arms) and the third (chrome: metal parts, the closing band). Buttons are darkened until their white text is readable, the second and third are lightened until ink 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 (nearly square or softly rounded). The site opens in the day theme (a pale concrete bay) even when the visitor’s system is dark; the toggle switches to the night, motor-oil black, and the browser remembers the choice.

Languages

Torque is ready for more languages: see Languages.

The 404 page

A small game, Back it in: reverse a car into a workshop bay between two parked cars, rear first, the way the garage parks every finished car. The car steers like a real one: it turns about its rear axle, can’t move sideways, and the steering wheel stays where you leave it. Hold the arrow keys (or the buttons) to turn the wheel, reverse and creep forward; a dashed guide shows where the rear corners will go. Park it once the car is inside the lines and facing out. Touching a car or the wall scrapes it. Each bay scores up to 100, less for an angle, for being off centre and for extra shuffles; three bays, each narrower, 45 seconds each. 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, jobs and notes for AI assistants, in every language.
• Pages carry JSON-LD: the garage as an AutoRepair with its service levels, services as Services with their price, jobs as CreativeWorks, how booking in works as a HowTo, questions as a FAQPage, and each note 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).