01
Global navigation
Fixed header with scroll-aware opaque treatment, desktop links, accessible skip link, branded transparent PNG mark, phone link, schedule CTA, and full-height mobile sheet.
Home, Design & Construction
BRASSLINE — Architectural Plumbing London
BRASSLINE is a complete, responsive marketing and enquiry website for a fictional high-end plumbing practice serving London homes.
Home, design, and construction websitearchitecthomeplumbing
Visit live website ↗high-end-plumbing-london.vercel.app
Project type
Home, design, and construction website
Industry
Home, Design & Construction
Experience
Responsive web experience
Availability
Live deployment
Project overview
Inside the BRASSLINE — Architectural Plumbing London experience
BRASSLINE is a complete, responsive marketing and enquiry website for a fictional high-end plumbing practice serving London homes. It positions plumbing as an architectural system rather than a commodity repair: visitors can identify a relevant service, understand price anchors and working standards, explore project logic, and send a structured service note.
The site is intentionally built as a light-mode-only experience. Its visual system, Calibrated Domesticity, combines warm mineral paper, ink-navy engineering lines, calibrated brass and quiet domestic photography to make the hidden water systems of a home legible and reassuring.
The primary conversion is Schedule service / get quote. This frontend demonstration collects a validated service note and routes the user to an explicit confirmation page; it does not transmit enquiries or take payments.
Experience details
Key features and interaction highlights
02
Service discovery
Eight locally modelled service records with names, slugs, price anchors, categories, specifications and related imagery.
03
Service detail
Dynamic /services/:slug page with hero media, price anchor, included scope, case-study narrative, process, accessible native FAQ disclosure controls, and an enquiry CTA carrying the selected service into the form URL.
04
Signature interaction
A GSAP-powered, selectable water-system plan maps Pressure, Hot Water, Leaks, and Drainage through an SVG home plan. Routes draw on entry and brass pulses respond to the active layer.
05
Conversion flow
Service selection, required name/postcode/contact/details fields, contact preference radios, disabled submitting state, and a dedicated confirmation page.
06
Motion
GSAP hero reveal, SVG route-drawing, controlled route pulses and responsive ScrollTrigger pinning. CSS handles micro-interactions, card lifts, navigation, image zooms and clear focus/active states.
Visual gallery
Desktop details and mobile experience
Three genuine captures from the live deployment show the opening view, an interior content section, and the responsive mobile composition.
Build characteristics
Technology and delivery signals
Labels come from project documentation where available; conservative delivery characteristics are used when a repository does not specify its stack.
ReactTypeScriptViteTailwind CSSGSAPWoutershadcn/uiNode.js
Project FAQ
Questions about BRASSLINE — Architectural Plumbing London
What is BRASSLINE — Architectural Plumbing London?
BRASSLINE is a complete, responsive marketing and enquiry website for a fictional high-end plumbing practice serving London homes.
Who is the BRASSLINE — Architectural Plumbing London website designed for?
Homeowners and project stakeholders comparing services, materials, capabilities, and outcomes.
What does the BRASSLINE — Architectural Plumbing London experience include?
The documented experience includes global navigation, service discovery, service detail, signature interaction. The live website shows the complete interface and interaction flow.
Can I view BRASSLINE — Architectural Plumbing London online?
Yes. Use the “Visit live website” link on this page to open the current public deployment.
