JK Plumbing Solutions
A concept site for a licensed Campbelltown plumber, set as a letterpress trade poster: wood type for the problems, the phone number on a full-width red band.
Overview
JK Plumbing Solutions is a self-initiated C4 concept for a licensed plumber based in Campbelltown, NSW, working across south-west Sydney. The October 2026 redesign, chosen from four code-built previews, sets the site as a letterpress trade poster. The problems a customer arrives with are set in wood type big enough to fill the measure, and the phone number sits on a full-width red band you can tap. The business’s own job photos are printed as one-ink duotones that turn to colour on hover. A tabbed board answers “What’s playing up?” with what to do right now and what the plumber will do, and cites Sydney Water where the fault is theirs. Planned jobs go through a yellow letterbox handbill with tear-off phone tabs. The copy is in the business’s own voice, every claim traces to its flyers, its details or Sydney Water, and the concept is hidden from search and no longer claims the business’s domain.
In motion
Screenshots
What I Delivered
- A single-page concept site redesigned as a letterpress trade poster, the direction chosen from four code-built previews
- Wood-type headlines fitted to the full measure with CSS fit ratios
- A tabbed problem board with what to do right now, what the plumber will do, and sourced advice
- The business’s job photos printed as one-ink duotones, in full colour on hover
- A letterbox handbill form for planned jobs, with tear-off phone tabs
- Noindex on every page, with the canonical, sitemap and metadata no longer pointing at the business’s domain
- A 404 page, an app icon and a share image
Key Features
- Headlines in League Gothic and Holtwood One SC, sized to fill the line, with Zilla Slab for reading
- One tap-to-call band, full width, and a sticky call bar on phones that never covers the footer
- Problem tabs that work by keyboard, arrow keys included
- Duotone job photos that turn to full colour on hover
- Handbill form with field errors and a success message
- Copy in the business’s voice; every claim traces to its own flyers, its details or Sydney Water
Stack & Tooling
- Next.js 16.2.6 (App Router)
- React 19.2.4
- TypeScript
- Tailwind CSS v4
- League Gothic, Holtwood One SC and Zilla Slab via next/font
- GSAP only in the C4 footer credit
- Vercel hosting
Integrations & Backend
- Mailto handbill form (no server backend in the concept build)
- Schema.org LocalBusiness data with the business’s facts and no URL claim
- C4 Studios footer credit
Performance / SEO / Accessibility
- The old intro animation is gone; it put a black screen in front of the phone number
- Animation library, motion library and icon set removed from the page itself
- 69 MB of phone video and a design export moved out of the public folder, so none of it ships
- Reduced motion turns the animation off
- Every page ships noindex in both the page and the response header
Challenges & Constraints
- Making a page of wood type still read like a working site: one tap to call, a board that answers the problem, and a form for planned jobs
- Writing in the business’s voice without inventing anything: every line traces to its flyers, its details or Sydney Water
- Removing every claim on the real business’s domain, so the concept can never compete with it in search
What I'd Improve Next
- A real form backend in place of mailto
- Per-service and per-suburb pages, if it ever becomes the live site