Locksmith Website Template
Demo brand: TORWICK LOCK & SAFE · Locksmith / master keying · 21 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this locksmith website template
A complete website for a locksmith that turns a panicked search into a phone call. A big tap-to-call button and a live "average arrival right now" line sit in the hero, and a call-out estimator lets the customer pick the job, the time of day and their postcode and see a fixed price, an arrival window and what is included before they ring. Twenty-one built pages, all driven by data and content files.
It looks like a dependable local trade, not a call centre. Warm grey pages with white blocks, one dark ink-blue band, close-up photography of cylinders, keys, safes and front doors at dusk, and a single key-brass accent. Chivo for headings, Radio Canada for everything else.
Every section answers what someone on the wrong side of their door wants to know: how much, how soon, will you damage the door, and can I trust you. Prices are published by job, time band and zone, reviews carry the job, when they rang and how long the engineer took, and the FAQ sits beside a sticky "locked out right now?" card.
The 21 pages you get
- Home
/ - Tap-to-call hero with an emergency/booked toggle, promises, the call-out estimator, six services, the team band, how a call-out works, the lock-upgrade finder, a comparison table, reviews, guides, FAQ with an emergency card, and a closing call band.
- Services
/services/ - All six services with from-prices, a price table and the comparison.
- Service pages
/services/…/ - Emergency lockout, lock change, break-in repair, uPVC door repair, safe opening, security upgrades. Price, time on site, what is included, a photo gallery, a matching review and three or four questions each.
- Prices
/prices/ - The full estimator, how the price is built (job, time, distance), a "never on the invoice" list, every service price and the upgrade finder.
- Areas
/areas/ - Three postcode zones with districts, towns, travel charge and daytime arrival window, each linking to its prices.
- About
/about/ - The firm, what it holds itself to, the team as initials and roles, reviews and the company line.
- Guides
/journal/ - A lead guide and a list with minutes to read. Add a Markdown file and it appears here and on the home page.
- Guides
/journal/…/ - Four guides: locked out, anti-snap cylinders, a snapped key, a forgotten safe code.
- FAQ
/faq/ - Eight questions on price, damage, ID, payment and insurance, beside the sticky emergency card.
- Contact
/contact/ - Phone first, then a booking form that pre-selects job, time, area and door type from the link that sent the visitor there.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout, with placeholders for the details only the owner can fill in.
- 404
/404 - Designed, with the phone number and a way home.
What is in the build
- A call-out estimator: job, time of day and postcode (typed or picked) give a fixed price, line items, arrival window, time on site and what is included, then a "Book this" link that pre-fills the contact form
- A lock-upgrade finder: door type and number of doors give the recommended lock, fitted price and time on site
- A hero arrival line that switches between the current average arrival time and the next bookable two-hour slot
- Every price, time band, postcode zone and door type in one data file, with the maths in one tested file
- A comparison table against a national call centre and DIY that stacks row by row on phones
- Reviews tagged with the job, the time they rang and minutes to arrive, and an FAQ beside a sticky emergency card
- Close-up lock and door photography with maker marks and house names removed, served as responsive WebP by Astro
- Vitest and Playwright suites included, with tests for the estimator maths, the postcode lookup, the finder and the form prefill
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- A trusted local locksmith: warm grey pages with white blocks and one dark ink-blue band, close-up photography of locks, keys, safes and front doors at dusk, and one key-brass accent.
- The mechanic
- A trade site built to make the phone ring: a hero tap-to-call button with a live average-arrival line, a call-out estimator that turns job, time of day and postcode into a fixed price and arrival window and pre-fills the booking form, a lock-upgrade finder by door type, a comparison against national call centres and DIY, and reviews tagged with the job and minutes to arrive. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Lock, key and doorway close-ups
- Type & palette
- Chivo · Radio Canada
-
#f5f4f1#15171c#a16207
Who it is for
Built for locksmiths and safe engineers who take emergency calls and want customers to see a fixed price and an arrival time before they ring. It also fits other call-out trades that charge by job, time of day and distance. A plumber or heating engineer who wants customers to book slots online should look at the plumber template, and a firm selling new doors as well as repairs at garage-door-repair.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
How do I change the prices and the areas I cover?
Edit one file, src/data/callout.ts. Job prices, evening and overnight charges, postcode districts, travel charges and arrival windows all live there, and the estimator, the prices page, the areas page and the footer follow.
Does the estimator know where my engineers actually are?
No. The arrival times are the windows you set per zone and time band, and the hero line works them out from the time of day in the visitor's browser. There is no live tracking or dispatch connection.
Where do booking requests go?
The contact form is static and arrives pre-filled from the estimator and finder links. Point its action at your form backend, such as Formspree, Basin or your own endpoint, and add that host to the security headers. The phone number stays the main call to action on every page.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Imagery
KANWICK STEELWORKS
Steel fabrication
Loud
Imagery
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Imagery
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Imagery
HOLLICK & VANE
HVAC contractor
Loud
Imagery