Safer Electric
Client: 30+ year licensed contractor · ESA Licence #7008996 · WSIB Insured · ESA Connection Authorization Holder
Safer Electric had three decades of credibility offline and almost no presence online. The brief: a multi-page, SEO-optimized, conversion-focused site that should feel like a $50K agency build. Audience: 20–40-year-old homeowners, property managers, and GC decision-makers who appreciate quality.
Brand positioning: the credibility of a 50-year-old firm, the design sensibility of a premium tech company. Premium, but never stuffy.
Built on Next.js 15 + RSC
App Router, React Server Components, TypeScript strict mode (zero any). Static generation via generateStaticParams for service and city pages — every route pre-rendered at build for the fastest possible TTFB. Bun as the package manager and dev runtime.
Glassmorphism Design System
Tailwind v4 with a custom design-token layer in CSS variables. shadcn/ui (New York style) as the primitive base, customized end-to-end. Backdrop-blur cards over deep navy surfaces. Gold accent borders that warm on hover. Hand-tuned, not template-stamped.
Three-Typeface Hierarchy
Cormorant Garamond (display serif, used sparingly for headlines, italic for emphasis), Plus Jakarta Sans (body and UI), JetBrains Mono (numbers, licence numbers, technical metadata). Same trio shared with Safer Lighting and Safer Inventory — one brand DNA, three properties.
Motion That Feels Expensive
Framer Motion for scroll-triggered fades and staggered card entrances. Spring config tuned to damping 20, stiffness 180 — never bouncy, never mechanical. A hand-rolled canvas particle system in the hero (30–40 gold particles drifting upward at low opacity, no library dependency).
AI Chatbot — Streamed
Anthropic Claude Sonnet integrated via the Anthropic API. Streams responses in real-time. System prompt embeds the Safer brand voice, ESA licensing context, and routing rules for emergencies versus quotes versus general questions. Triages off-hours leads when the human team is asleep.
SEO Architecture That Actually Ranks
Per-page generateMetadata, JSON-LD on every route (LocalBusiness site-wide, Service schemas on service pages, BlogPosting on articles, FAQPage on service detail pages). Auto-generated sitemap.ts and robots.ts. Recently trimmed from 85 city pages to 25 hand-curated ones — sophistication move to dodge Google's thin-content penalty.
- ✓React Hook Form + Zod schemas (centralized in src/lib/validations.ts) — fully typed end-to-end, no runtime surprises
- ✓Multi-step booking form with progress indicator and Server Actions — no exposed API keys, no client-side surface
- ✓Resend API for transactional email delivered to info@saferelectric.ca
- ✓Buttondown API for newsletter list management
- ✓Custom cursor (desktop only) — gold dot plus trailing ring lerping with requestAnimationFrame, scales on hover, hidden on touch
- ✓2px gold scroll progress indicator pinned to the top of the viewport
- ✓IntersectionObserver-based section reveals — GPU-composited and memoized
- ✓next/image with proper width/height attributes everywhere — zero CLS
- ✓next/font for subset and preload optimization
- ✓Vercel hosting with edge functions, automatic preview deploys on every PR
- ✓Vercel Analytics + Google Analytics (GA4 G-R35LZSXXH5) for traffic and Core Web Vitals
- ✓Lighthouse target: 95+ across Performance, Accessibility, Best Practices, SEO
// Why this build is portfolio-worthy
This is a real production site, not a concept. Live, indexed, generating leads for a 30-year-old business. The CNIB Pedestrian Bridge and GO Transit bus depots featured on it are real Safer projects — not stock photography.
Editorial magazine meets premium electrical contracting. Glassmorphism with restrained gold accents on warm navy. Animation that feels expensive — springs, not bounces. Cream over navy, never pure white on black. The work is done by typography, spacing, and motion — not by visual noise.