WebsiteTrades & ServicesLocal SEONext.jsPerthLocal Business2026
Aqua-Safe Plumbing & Maintenance
A maintenance plumbing and gas fitting business given a site built around how people actually search for a plumber — by problem, and by suburb.
ClientAqua-Safe Plumbing & Maintenance
LocationPerth, WA
Timeline2 weeks
Budget$1.5k – $2.5k
RoleSolo (design, development, deployment)
01
Overview
Aqua-Safe are a family-owned team of licensed plumbers and gas fitters covering the Perth metro — blocked drains, hot water, gas fitting, water filtration and commercial maintenance. Nobody browses a plumber's website; they arrive mid-problem, usually on a phone, wanting to know that someone competent will turn up. So the site is organised around the two things people actually search for: the problem they have, and the suburb they're in. Eighteen individual service pages cover the work, and thirty-seven service-area pages cover the ground, each written around the plumbing that area genuinely throws up rather than the same page with the suburb name swapped in. A three-panel hero, an interactive walkthrough of the whole-home filtration system, and the company's real Google reviews carry the credibility, while every route keeps a call button and an online booking link within reach.
02
Screenshots
03
What I Delivered
- Complete website — design, build, content structuring and deployment
- Eighteen service pages, nine residential and nine commercial, from a single content model
- Thirty-seven service-area pages plus an index covering 167 Perth suburbs
- Three-panel rotating hero that yields to the visitor once they choose a panel
- Interactive whole-home filtration walkthrough across all three filter stages
- Hot water comparison covering gas instantaneous, heat pump and storage
- Enquiry form with server-side validation, per-field errors and spam honeypot
- Service pages deep-linked to the contact form with the service preselected
- Google reviews carousel wired to the real business listing
- Persistent mobile call-and-book bar
- Local SEO structure — metadata, sitemap and structured data
04
Key Features
- Three-panel rotating hero that pauses on hover and stops once the visitor picks a panel themselves
- Eighteen individual service pages — nine residential, nine commercial — generated from a single content model
- Thirty-seven service-area pages, each combining that region's real plumbing characteristics with its own set of neighbouring-suburb links
- Service-area index covering 167 Perth suburbs across five expandable regions
- Interactive whole-home filtration walkthrough stepping through all three filter stages
- Enquiry form with server-side validation, per-field error messaging and a spam honeypot
- Service pages deep-link to the contact form with the relevant service preselected
- Google reviews carousel drawing on the company's real listing
- Persistent mobile call-and-book bar fixed to the bottom of the viewport
- Hot water comparison covering gas instantaneous, heat pump and storage options
- Expandable FAQ covering charging structure, licensing, warranty and coverage
05
Stack & Tooling
- Next.js 14 (App Router)
- React 18
- TypeScript 5.5
- Hand-written CSS in cascade layers (Tailwind configured but design system is custom)
- next/font with self-hosted Clash Display + Hanken Grotesk
- Vercel Serverless Functions
- Resend (transactional email)
- GSAP (footer credit animation only)
- Vercel (hosting)
06
Integrations & Backend
- ServiceM8 online booking as the primary booking route
- Resend transactional email delivering enquiries to the business inbox, with reply-to set to the customer
- Google Business Profile review link for collecting new reviews
- Facebook and Instagram profile links
- Click-to-call and click-to-email throughout, phone number in E.164 format for reliable dialling
07
Performance / SEO / Accessibility
- Server-rendered static HTML across all 64 routes — no client-side data fetching on first paint
- Measured on the live site: 47ms server response, DOM ready at 270ms, fully loaded at 383ms
- Self-hosted fonts via next/font, removing third-party font requests entirely
- One crawlable H1 per page, with the rotating hero panels rendered as headings rather than competing H1s
- Breadcrumb and Service structured data across every page, all referencing a single business entity
- Sitemap and robots.txt generated from the same launch flag so they cannot drift apart
- Per-page canonical URLs and trailing-slash consistency
- Scroll-reveal animations with a failsafe so content can never be left invisible
08
Challenges & Constraints
- Building service-area pages that are genuinely different from one another — a page per suburb that only swaps the name is a doorway page, and Google penalises the whole domain for it
- Finding real local differentiation at scale: the hills run bore water and septic systems, the older eastern and Fremantle suburbs have clay sewer under mature trees, the northern corridor is new-estate construction
- Explaining a three-stage filtration system to a homeowner without turning it into a spec sheet
- Presenting a charging structure honestly on a site that deliberately carries no pricing
- Migrating hosting and DNS off a platform that blocked nameserver changes and subdomain MX records
- Keeping every route within one tap of a phone number, since most visitors arrive mid-problem on a phone
09
What I'd Improve Next
- Expand the per-suburb notes with the client's own local knowledge — the areas he genuinely gets called to most
- Move email sending onto a verified domain so enquiries send from a branded address
- Add a headless CMS so the team can publish service updates without a deploy
- Add privacy-respecting analytics to see which service and suburb pages actually convert
- Extend the service-area pages beyond the current curated tier as they earn traffic