The Challenge
Smart Electrics Tech Ltd is a Preston-based electrician offering everything from EICR testing to EV charger installations. They needed a website that:
- Ranks well for local searches ("electrician Preston", "EV charger installation Lancashire")
- Loads fast on any device
- Clearly communicates their services and expertise
- Generates enquiries through a reliable contact form
Previous template-based attempts weren't cutting it for search visibility or professional appearance.
The Approach
We built the site using Astro 5 — a framework that excels at content-focused websites. The architecture uses static HTML for speed with React "islands" for interactive components.
Performance-first architecture
Static pages (Astro) ├── Near-instant load times ├── Minimal JavaScript shipped └── Excellent Lighthouse scores Interactive islands (React) ├── Contact form ├── Mobile navigation └── Only loaded when needed
The key insight: an electrician's website doesn't need a JavaScript framework for the whole page. Most content is static — the contact form is the only truly interactive element.
Design System
The visual identity balances professionalism with approachability:
- Electric amber/gold primary colour — energetic but trustworthy
- Stone gray palette for backgrounds and text
- Outfit font for headings — modern and clean
- Geist Sans for body text — highly readable
Custom utilities create consistency:
.btn-electric— Primary CTA style with glow effect.section-container— Consistent spacing and max-widths.glow-electric— Subtle brand colour highlights
Local SEO Implementation
Structured Data
Every page includes comprehensive schema markup:
{
"@type": "LocalBusiness",
"@type": "Electrician",
"areaServed": "Preston, Lancashire",
"serviceArea": {...},
"hasOfferCatalog": {...}
}
This tells Google exactly what the business does and where it operates.
Content Strategy
Service pages target specific search intents:
/services/eicr-testing— Electrical safety certificates/services/ev-chargers— EV charger installation (OZEV approved)/services/consumer-units— Fuse box upgrades/services/solar-pv— Solar panel installation/services/smart-homes— Home automation
Each page has unique, detailed content rather than thin doorway pages.
Technical SEO
- Semantic HTML structure
- Proper heading hierarchy
- Image alt text and lazy loading
- Sitemap generation
- Mobile-first responsive design
Contact Form
The contact form uses React with spam protection:
- Honeypot field — Invisible to users, catches basic bots
- Time-based validation — Submissions too fast are flagged
- Server-side processing — Form handled by Node adapter
- HTML email templates — Professional confirmation emails
Service Pages
Each service has a dedicated page with:
- Clear explanation of the service
- Benefits for the customer
- Relevant certifications (OZEV, etc.)
- Call-to-action to get in touch
The content focuses on answering customer questions rather than keyword stuffing.
The Result
Smart Electrics Tech now has a website that works as a genuine business tool. It loads fast, ranks for relevant local searches, and converts visitors into enquiries.
The Astro architecture means the site is also easy to maintain and extend — new service pages can be added without rebuilding the whole thing.
Tech Stack
- Framework: Astro 5 with React islands
- Styling: Tailwind CSS v4
- Components: ShadCN UI (React)
- Server: @astrojs/node adapter
- Icons: Lucide React
- Deployment: Cloudflare Workers
