Electrician Website Template
Demo brand: REDVERS ELECTRICAL · Electrical contractor · 14 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this electrician website template
A complete lead-generating site for an electrical contractor: fourteen built routes including five individual service pages, published pricing, an about page, contact and a two-post journal.
A discharge-violet ground with one incandescent amber signal, and a heavy industrial grotesque carrying the masthead at editorial scale — Big Shoulders Display against Public Sans. Type is the loud channel; palette, set-piece and texture are all held quiet.
The signature move is the sine. The hero wordmark and the section heads sit on a 50 Hz mains sinusoid, each glyph’s baseline displaced by the waveform, and on scroll a phase travels left to right through the glyphs — current propagating through the word. The control case is a section: solar, battery and EV, which renders its heading dead flat at amplitude 0, because DC does not oscillate.
The 14 pages you get
- Home
/ - The sine masthead, the registered-electrician positioning, the services and the call close.
- Services
/services/ - Everything offered, with headline prices — the page that answers "do you do this and what does it cost".
- Five service pages
/services/… - Rewires, consumer unit upgrades, EV chargers, solar & battery, testing & inspection. Each a full route, so the business ranks for five searches rather than one. Solar & battery is the DC control case.
- Pricing
/pricing/ - Published figures. The strongest conversion lever a domestic trade has.
- About
/about/ - Registration, qualifications and who turns up. In electrical work, registration is the trust page.
- Contact
/contact/ - A working quote form with a pre-filled mailto: fallback and a live tel:.
- Journal
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/blog/… - Do I actually need a new consumer unit, and what an EICR actually tells you. Exactly what customers search before calling.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A masthead set on a 50 Hz mains sinusoid, with each glyph’s baseline displaced by the waveform and a phase travelling through the word on scroll
- A declared control section: solar, battery and EV renders dead flat at amplitude 0, because DC does not oscillate
- Five individually routed services with prices — how a trade site earns five searches instead of one
- Published pricing and an about page carrying registration, which is what a domestic customer actually checks
- A working quote form with a pre-filled mailto: fallback and a live tel: on every route
- Big Shoulders Display with Public Sans, both self-hosted
- 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
- Discharge-violet ground with one incandescent amber signal. A heavy industrial grotesque carries the masthead at editorial scale — type is loud; palette, set-piece and texture held quiet.
- The mechanic
- "On The Sine": the hero wordmark and section heads sit on a 50 Hz mains sinusoid, each glyph's baseline displaced by the waveform; on scroll a phase travels left-to-right through the glyphs, current propagating through the word.
- Loud channel
- Display type
- Imagery. Duotone toward the field
- Type & palette
- Big Shoulders Display · Public Sans
-
#402447#f4eef6#ff9e4d - The control case
- The DC-supply section — solar, battery, EV — renders its heading dead flat at amplitude 0, because DC does not oscillate. Drawn, not labelled.
Who it is for
Built for electrical contractors, EV charge-point installers and solar and battery firms working domestic and light commercial — and the agencies that build lead-generation sites for trades. It suits a registered electrician competing locally on published prices and clear service pages. The plumber, HVAC and garage-door builds are the siblings for neighbouring trades.
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
Is the sine actually 50 Hz?
The waveform is drawn at mains frequency and the phase travels through the glyphs on scroll. The point is not that you can measure it — it is that the DC section, where the heading goes flat, only makes sense if the rest of the page is genuinely oscillating.
Mains is 60 Hz where I am.
It is a parameter. Change it and the waveform changes with it — which, in a template about being technically correct, felt like the minimum.
Do I need all five service pages?
Keep the ones you do. Each is a data-driven route with its own price and copy, so deleting one removes its page and every link to it. What you should not do is merge them into a single services list — that is one page competing for five different searches.
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
Moving set-piece
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