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.
Caleb did an awesome job building our new website for Aqua-Safe Plumbing & Maintenance. From start to finish, he was easy to deal with, responsive and took the time to understand our business and what we wanted to achieve.
He made the whole process straightforward, communicated well throughout and was always happy to make changes and offer advice when needed. The finished website looks professional, is easy to navigate and represents our business exactly how we wanted.
Really happy with the end result and would definitely recommend Caleb to anyone looking for a reliable and professional website designer.
Aaron Williams
Aqua-Safe Plumbing & Maintenance
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.
In motion
Screenshots
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
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
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)
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
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
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
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