Industries/ Home services
Roofer website components for React
Roofing is a high ticket, low trust purchase. Real before and after photos, an insurance FAQ and a quote funnel that asks about storm damage do more than any stock image gallery.
One command for the whole set
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-big4 of these 10 blocks are Pro and install with a license key; the other 6 are free and MIT licensed. The @facade registry is set up once in components.json. Setup guide.
The page, block by block.
Every preview is the real block running at desktop width. Click a name to open its docs, props and source.
Two ways to open the page.
Example hero copy for roofers. Each one answers the question the visitor actually has.
Headline
Show me your work.
Why it works
Before and after sliders of real roofs, draggable and keyboard accessible, instead of a stock photo gallery.
Headline
Will insurance cover it?
Why it works
A FAQ section with FAQPage schema that answers storm damage, claims and inspection questions in plain words.
Blocks on this page
- Hero, local businessFreeHome services hero with live rating, rotating service words and floating appointment, review and ETA cards.
- Before / after sliderProDraggable, keyboard accessible comparison slider for renovations, staging and remodel photos.
- Stats bandFreeBand of four big animated numbers with labels, trends and hairlines that draw in on view.
- Process stepsFreeHow it works section with a line that draws on scroll and steps that light up as you pass them.
- Service areaProZone map with numbered service areas, city and ZIP lists, and a ZIP code checker with arrival windows.
- Testimonials wallProMasonry wall of Google and Yelp style reviews with a featured quote and aggregate rating header.
- FAQ sectionFreeTwo-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results.
- Multi-step lead formProThree step quote request with option cards, validation, progress bar and direction-aware transitions.
- CTA sectionFreeClosing CTA panel with headline, two actions and a reassurance line. Dark on light pages, light on dark.
- Footer, bigFreeLarge local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark.
Questions about roofer sites
Something else? Email hello@facadeui.com.
How many before and after sliders should a roofing page have?
One in the main flow is enough. Put the strongest project there and link to a projects page for the rest. Each slider takes two image sources, alt text and labels.
Can I use the lead form for storm damage inspections?
Yes. Make the first step the job type with options such as storm damage, leak repair and full replacement, then ask for timeline, then contact details. The form reports which option the visitor picked.
Where do warranty details go?
Short version in the stats band, for example 25 year workmanship warranty. Long version as a FAQ item. Both come from the same data you edit in one place.
Are the images optimized?
The slider renders standard img elements with the sources you pass. Use next/image or a CDN for sizing. The block does not fetch or resize images itself.
Related industries
- Plumber10 blocks: local business hero, stats band, process steps
- HVAC contractor10 blocks: local business hero, announcement bar, stats band
- Landscaper10 blocks: local business hero, before / after slider, image gallery lightbox
Read the roofer template, section by section or see all industries.