Garage Door Website Template
Demo brand: KELMER OVERHEAD DOOR · Garage door repair · 16 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this garage door website template
A complete lead-generating site for a garage door repair trade: sixteen built routes, including five individual service pages with prices, a coverage area page, a pricing page, a wired advice blog, and the privacy and terms routes a real trading business needs.
The ground is deep steel-blue drafting negative — the door’s counterbalance system drawn in bright light lines on a dark field, with one warm daylight amber as the only warm colour. Type, palette and imagery are all held quiet so the drawing can carry the page.
The signature move is the counterbalance. Scroll is door travel: a persistent sectional drawing of the torsion spring, cable drums and panels holds the physical invariant — spring torque equals cable force times drum radius equals suspended weight — at every scroll position. The spring unwinds and the door lifts, recomputed from geometry rather than keyframed. The control case sits beside it: one snapped coil, and the door stays dead closed at every position.
The 16 pages you get
- Home
/ - Same-day positioning, the counterbalance set-piece, the services, prices and the call close.
- Services index
/services/ - All five repair services with headline prices — the page that answers "do you do this and what does it cost".
- Five service pages
/services/… - Spring repair, cable & drum, off-track rollers, opener repair, tune-up & balance. Each is a full route with its own price, so each can rank for its own search.
- Pricing
/pricing/ - Fixed prices quoted on site. Publishing them is the conversion decision most trade sites get wrong.
- Service area
/service-area/ - Coverage by district, rendered from a typed areas array — the local-intent page.
- Contact
/contact/ - A working enquiry form plus a live tel: path for the emergency call.
- Advice
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/blog/… - The 30-second balance test, and why a snapped spring stops the door lifting. Written as the answers customers search for.
- Privacy & terms
/privacy/ · /terms/ - Real legal routes, not placeholders — because a trading business that takes enquiries needs them.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- Scroll-driven counterbalance cutaway that recomputes the spring/cable/door geometry at every position rather than replaying keyframes
- A drawn control case — the snapped coil that never lifts — shown beside the working system, not labelled in text
- Five separate service routes with individual prices, which is what lets a trade site rank for five searches instead of one
- Service area page driven by a typed districts array
- Site-wide FAQ data, promises and services all as typed objects in
src/data - A working enquiry form plus live tel: for the emergency call, and privacy and terms routes already written
- Vitest and Playwright suites included in the repository
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 62 different worlds reading as one design system in different paint.
- The world
- Deep steel-blue drafting negative — the door's counterbalance system drawn in bright light lines on a dark field, one warm daylight amber the only warm colour. The set-piece is loud; type, palette and imagery held quiet.
- The mechanic
- "The Spring Carries the Door": scroll is door travel. A persistent sectional drawing of the torsion spring, cable drums and panels holds the counterbalance invariant τ_spring = F_cable × r_drum = W_suspended at every position — the spring unwinds and the door lifts, recomputed from geometry, not keyframed.
- Loud channel
- Moving set-piece
- Imagery. Cold steel, warm daylight
- Type & palette
- Cabinet Grotesk · Fira Mono
-
#1e2a4a#e7edf3#f0a63a - The control case
- The snapped spring — a fractured coil holds the door dead closed at every scroll position while the balanced door floats at every one. Drawn, not labelled.
Who it is for
Built for garage door repair and installation companies, overhead door contractors, and the agencies that build lead-generation sites for trades. It suits an operator competing on same-day response and published prices. The structure — service pages, prices, coverage, advice — transfers directly to any emergency trade.
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
Can I use this for a different trade?
The structure yes, the set-piece no. Service pages with prices, coverage areas and an advice blog is the right shape for any emergency trade. But the counterbalance drawing is specific to a garage door — if you are a plumber, an electrician or an HVAC contractor, buy the build made for that trade, which carries its own drawn mechanic.
The prices are in pounds. Can I change the currency?
Yes — prices are strings in the services array, so the symbol and the numbers are yours. Nothing formats currency behind your back.
Do I have to publish prices?
No, but the template is built on the assumption that you will, because it is the single biggest conversion lever on a trade site. Remove the price field and the layout still holds; you will just be competing on response time alone.
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
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Moving set-piece
KANWICK STEELWORKS
Steel fabrication
Loud
Texture
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Moving set-piece
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Palette
HOLLICK & VANE
HVAC contractor
Loud
Moving set-piece