Templates/ Plumber
Plumber website template for Next.js
A complete home page composed from 10 Facade blocks, in the order a visitor reads them. This page explains each section: which block, why it is there and which props to change.
Looking at the blocks themselves? Plumber website components for React.
Install
npx shadcn@latest add @facade/hero-local-business @facade/stats-band @facade/process-steps @facade/service-area @facade/testimonials-wall @facade/faq-section @facade/multi-step-lead-form @facade/cta-section @facade/footer-big @facade/sticky-contact-barcomponents/facade; you assemble them in a page file in the order below. 3 of the blocks are Pro and need a license key in components.json. Pro setup.Section by section.
What each block does on a plumber site and what to change first.
- 01
Opens the page with the service, a live rating and a phone number. The rotating words name the jobs you want more of.
Rotate words like leaks, water heaters and drain cleaning. Put the dispatch number in the phone prop so the button is a tel: link.
Change first:rotatingWordsphoneratingreviewCounttrustItemsprimaryCta - 02
Stats band
FreeFour numbers that count up once when they enter the viewport. Proof in a glance.
Change first:statseyebrowinverted - 03
Process steps
FreeExplains what happens after the first contact. A line draws between the steps as the visitor scrolls.
Change first:stepstitlecta - 04
Service area
ProA zone map with city and ZIP lists and a ZIP checker that answers the coverage question before the call.
Name the zones after the towns you actually drive to and paste the ZIP list per zone. The checker only needs those arrays.
Change first:zoneshqLabelsuccessMessagefailureMessagectaHref - 05
A masonry wall of reviews with an aggregate rating header and one featured quote. Depth over density.
Change first:testimonialsratingreviewCountfeatured - 06
FAQ section
FreeAnswers the questions that stop a call, and emits FAQPage JSON-LD from the same array so the answers can show in search.
Change first:itemsheadingphoneemailctaHref - 07
A three step quote request with option cards instead of a blank textarea. Each step validates before the next.
Change first:titleoptionstimelinesonSubmitsuccessMessage - 08
CTA section
FreeThe closing panel. High contrast, two actions, one reassurance line.
Change first:titledescriptionprimaryCtasecondaryCtareassurance - 09
Footer, big
FreeName, address and phone for local search, hours, link columns, a newsletter form and a wordmark.
Change first:businessNameaddressphoneemailhourscolumnssocialslegal - 10
A mobile only bottom bar with Call, Text, Directions and Book. It hides on scroll down and returns on scroll up.
Keep Call first. Plumbing visitors on a phone are often standing in water.
Change first:phoneaddressbookingUrlactions
The full page.
All 10 blocks stacked in order, live, at desktop width. Numbers match the sections above.
Build it in four steps
Step 1
Install the blocks
Run the shadcn command on this page once. Every block of the plumber page lands in components/facade as editable TypeScript.
Step 2
Configure site data
Create one data file with the business name, address, phone, hours, time zone and services, and pass it to the footer, contact, hours and hero blocks.
Step 3
Replace the copy
Work through the sections below. Each one names the props to change first. Keep one claim per line and no stock phrases.
Step 4
Deploy
Build with next build and deploy to Vercel or any Node host. The blocks are static React, so no extra services are needed.