Templates/ Roofer
Roofer 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? Roofer website components for React.
Install
npx shadcn@latest add @facade/hero-local-business @facade/before-after-slider @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-bigcomponents/facade; you assemble them in a page file in the order below. 4 of the blocks are Pro and need a license key in components.json. Pro setup.Section by section.
What each block does on a roofer 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.
Change first:rotatingWordsphoneratingreviewCounttrustItemsprimaryCta - 02
A draggable comparison of two photos. The proof block for any trade that changes how something looks.
Shoot before and after from the same spot. The slider only works when the two frames line up.
Change first:beforeSrcafterSrcbeforeAltafterAltbeforeLabelafterLabel - 03
Stats band
FreeFour numbers that count up once when they enter the viewport. Proof in a glance.
Change first:statseyebrowinverted - 04
Process steps
FreeExplains what happens after the first contact. A line draws between the steps as the visitor scrolls.
Change first:stepstitlecta - 05
Service area
ProA zone map with city and ZIP lists and a ZIP checker that answers the coverage question before the call.
Change first:zoneshqLabelsuccessMessagefailureMessagectaHref - 06
A masonry wall of reviews with an aggregate rating header and one featured quote. Depth over density.
Change first:testimonialsratingreviewCountfeatured - 07
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.
Answer the insurance question honestly. Include what you cannot promise.
Change first:itemsheadingphoneemailctaHref - 08
A three step quote request with option cards instead of a blank textarea. Each step validates before the next.
Change first:titleoptionstimelinesonSubmitsuccessMessage - 09
CTA section
FreeThe closing panel. High contrast, two actions, one reassurance line.
Change first:titledescriptionprimaryCtasecondaryCtareassurance - 10
Footer, big
FreeName, address and phone for local search, hours, link columns, a newsletter form and a wordmark.
Change first:businessNameaddressphoneemailhourscolumnssocialslegal
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 roofer 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.