ConceptWebsiteConceptTrades & ServicesLocal SEOGSAP AnimationNext.js2026
JK Plumbing Solutions
A concept lead-gen site for a licensed Campbelltown plumber — built to show what C4 ships before a brief exists.
ClientConcept — licensed residential, commercial & gas plumbing trade
LocationCampbelltown & Greater Sydney, NSW
RoleSolo (concept, design, development, deployment)
01
Overview
JK Plumbing Solutions is a self-initiated C4 Studios concept: a conversion-focused, single-page website for a licensed Campbelltown plumber servicing greater Sydney. It is built to demonstrate how C4 turns a generic trade vertical into a credible, founder-led local brand — pairing a calm navy/blue/orange design system with a cinematic, physics-driven brand intro (a wrench tightens a pipe, a droplet forms, falls, and becomes the logo, then hands off into the site header). The build covers the full funnel a plumbing customer travels: urgent-problem framing, grouped services, a plain-English "how the call works" flow, founder/licence trust, recent-work gallery, service-area coverage, and a phone-first contact path with a quote form. Everything is engineered for trust and speed — structured data for local search, reduced-motion accessibility throughout, fully static prerendering, and optimised imagery. It is available to license or commission as a starting point for any trades or local-service business.
02
Screenshots
03
What I Delivered
- Complete visual design and brand system: navy/charcoal base, plumbing-blue + orange accents, Geist type pairing, blueprint grid and gradient motifs
- Single-page responsive marketing site with eight sections: Hero, Common Problems, Services, How the Call Works, About, Gallery, Service Area and Contact
- Cinematic GSAP brand intro animation (wrench → pipe leak → droplet fall → logo formation → header hand-off) with a replay control
- Sticky mobile "tap to call" bar and a sticky site header with mobile call icon
- Quote-request form with name/phone/email/suburb/service/message and service dropdown
- Scroll/entrance reveal animations across content sections
- LocalBusiness + Plumber JSON-LD structured data, full metadata, OpenGraph/Twitter, robots.txt and sitemap.xml
- Centralised content/data layer (src/lib/site.ts) driving copy, services, areas and business details
- Animated "Designed by C4 Studios" footer credit, centred site-wide
04
Key Features
- Physics-driven cinematic intro: gravity acceleration into a constant-velocity camera-tracking fall, surface-tension wobble, and a logo hand-off measured live to the header position
- Intro is session-gated (plays once), skippable (button + Escape) and fully reduced-motion aware
- Replay-intro button to re-trigger the brand moment on demand
- 3-stage hover-animated C4 Studios badge with auto light/dark colour sampling
- Sticky mobile tap-to-call linking straight to the business number
- Phone-first contact design with a secondary mailto quote form
- Trust chips surfacing licence number, ABN and local base
- Grouped, scannable services and a plain-English call-to-completion flow
- Structured data tuned for local "plumber near me" search
05
Stack & Tooling
- Next.js 16.2.6 (App Router, Turbopack build)
- React 19.2.4 / React DOM 19.2.4
- TypeScript 5 (strict)
- Tailwind CSS v4 (@tailwindcss/postcss)
- GSAP 3.15 + @gsap/react (cinematic intro + footer badge)
- Framer Motion 12 (scroll/entrance reveals)
- lucide-react 1.14 (icons)
- next/font (Geist + Geist Mono, self-hosted)
- next/image (image optimisation)
- ESLint 9 + eslint-config-next
06
Integrations & Backend
- Mailto form submission (no server backend in the concept build)
- Self-hosted Google Fonts via next/font (Geist / Geist Mono) — no runtime font request
- Schema.org JSON-LD (LocalBusiness + Plumber) for rich local results
- Instagram and Facebook social references
- Fully static output — deployable to Vercel or any static/Node host
07
Performance / SEO / Accessibility
- Fully static prerender — every route ships as static content
- next/image with explicit sizes and hero/logo preloading
- Self-hosted Geist via next/font to avoid layout shift and third-party font requests
- Pre-hydration inline script gates the intro overlay so first paint never flashes the page or the overlay
- Intro holds first frame until scene images decode (capped) so assets never pop in mid-animation
- Reduced-motion honoured across the intro, reveals and the C4 badge
- Intro accessibility: role="dialog"/aria-modal, scroll lock, inert background, Escape-to-skip, focus management and a failsafe release timeout so a visitor is never trapped
- Hydration-resilient quote form (useSyncExternalStore gate) that tolerates password-manager / form-filler DOM injection
- JSON-LD output is escaped to prevent script-context breakout
- Semantic headings, real <a>/<button> controls and aria-labels throughout
08
Challenges & Constraints
- Choreographing a believable droplet fall: deriving the acceleration duration from the tracking duration so velocity is continuous at the gravity→camera-tracking handover (no mid-air stall), plus decaying surface-tension oscillation
- Handing the intro logo off to its exact resting position in the live header by measuring both with getBoundingClientRect at runtime, across viewport sizes
- Building an intro that is impressive yet never blocks the visitor — pre-hydration paint, decode gating, session + reduced-motion gating, and a hard failsafe timeout
- Writing legally-careful trades copy (no fake reviews, guarantees, 24/7 or same-day claims) while still creating urgency to call
- Guarding hydration against browser-extension DOM mutation on the contact form
- Integrating the portable C4 badge cleanly across the Next 16 server/client boundary without modifying the shared component
09
What I'd Improve Next
- Swap the placeholder gallery for the real job/equipment photography already in /public/images (per the internal audit)
- Sharpen the hero for stronger urgency and a more founder-led voice
- Add a real quote/contact backend (serverless + transactional email) to replace the mailto form
- Add analytics and conversion tracking for call clicks and form sends
- Generate per-service and per-suburb landing routes to deepen local SEO
- Add generated OpenGraph share images (currently a summary card)