Auto Repair Website Template
Demo brand: FERNLEY GARAGE · Independent garage / auto repair · 22 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this auto repair website template
A complete website for an independent garage, auto repair shop or tyre centre: a fixed-price service quote that books the next free bay, a "today in the workshop" bay board in the hero, a tyre finder, seven service pages, a prices page, the workshop story, four guides, an FAQ and a booking form that arrives pre-filled. Twenty-two built pages, all driven by content and data files.
It looks like a serious, well-run workshop. Dark asphalt pages with one off-white pricing band, real workshop photography of brakes, engines, gearboxes and tyre stacks, and one coolant-green accent. Saira Semi Condensed for headings and Heebo for everything else.
Every section answers what a driver worries about before booking: what will it cost, will it keep my warranty, can I wait, when can you fit me in and why not just go to the dealer. The quote gives a fixed price and hours in the workshop, the comparison table sets the garage against a main dealer and a fast-fit chain, and reviews show the car, the job and the time it took. Motion is one quiet reveal.
The 22 pages you get
- Home
/ - Headline, quote and services buttons and a trust line over a workshop photo, beside a bay board with each bay’s next free time. Then promises, eight priced service cards, the instant quote, the workshop band, how a visit works, garage vs dealer vs chain, a review wall, guides, FAQ tabs and a closing call to action.
- Services
/services/ - All seven services with price from and hours.
- Service pages
/services/…/ - Interim, full and major service, brake repair, clutch replacement, diagnostics and the annual roadworthiness test: price, time, what is checked and a book button that pre-selects the job.
- Tyres
/tyres/ - A tyre finder by width, profile and rim that prices budget, mid-range and premium tyres fitted, a tread check and tyre questions.
- Prices
/prices/ - The full price list, smaller jobs and where the money goes at a main dealer.
- About
/about/ - The workshop story, what an independent does that a chain won’t, the technicians and customer reviews.
- Guides
/journal/ - A list of guides. Add a Markdown file and it appears here and in the sitemap.
- Guides
/journal/…/ - Four written guides: which service your car needs, what the annual test checks, reading a tyre size and the signs your brakes need attention.
- FAQ
/faq/ - Questions in tabs: Servicing, Repairs and Tyres.
- Book your car in
/contact/ - Booking request with service, vehicle size, fuel, wait or drop-off, courtesy car, tyre choice, date and time, filled in from the quote, the tyre finder or any book button.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to home and to booking.
What is in the build
- A service and repair quote: job, vehicle size, fuel and wait-or-drop-off give a fixed price, the hours in the workshop and the next free slot, then carry everything to the booking form
- A hero bay board showing each bay’s work, next free time and wait or drop-off, linking straight to booking
- A tyre finder that prices budget, mid-range and premium tyres fitted for any size, with no tyre brand names
- Every service, price, hour and bay rule in src/data/workshop.ts, with the pricing maths in src/lib/quote.ts and tested
- Services and guides as content collections, and every business fact, opening hour and area in one file
- Real workshop photography, every image credited in LICENSING.md; one accent colour and two fonts rebrand the whole site; Vitest and Playwright suites included
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 71 different worlds reading as one design system in different paint.
- The world
- Dark asphalt ground with one off-white pricing band, Saira Semi Condensed over Heebo, real workshop photos of brakes, engines, gearboxes and tyre stacks, and one coolant-green accent.
- The mechanic
- A quote turns the job, vehicle size, fuel and wait-or-drop-off into a fixed price, hours in the workshop and the next free bay, then pre-fills the booking; a hero bay board shows each bay's next slot, and a tyre finder prices budget, mid-range and premium tyres fitted. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Workshop close-ups of brakes, engines, gearboxes and tyres
- Type & palette
- Saira Semi Condensed · Heebo
-
#15171a#f3f4f2#14b885
Who it is for
Built for independent garages, auto repair shops, servicing centres and tyre shops that service, repair and test cars and vans. It suits a garage that wants drivers to see a fixed price and book a bay online, and it works with any currency or price list by editing one data file.
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 services, prices and bays?
Edit src/data/workshop.ts. Services, prices by vehicle size and fuel, hours, bays and tyre tiers all live there, and the quote, bay board, service pages, tyre finder and prices page update together.
Is this template really free?
Yes. You get the full source in a private GitHub repo: every page, the quote, the bay board, the tyre finder, the photos and the tests. Paid templates also ship Claude Code skills for editing; this one does not.
Can I name the official vehicle test in my country?
Yes. The template calls it the annual roadworthiness test so it works anywhere; rename it in src/data/workshop.ts and the service page. The company number, VAT number and trade association are placeholders in src/data/site.ts, to fill in before launch.
What exactly do I get for free?
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
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Imagery
KANWICK STEELWORKS
Steel fabrication
Loud
Imagery
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Imagery
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Imagery