Industries/ Home services
Landscaper website components for React
Landscaping sells with pictures and a clear split between design, build and maintenance. These blocks pair a before and after slider with a lightbox gallery and a process section that explains what happens after the first visit.
One command for the whole set
npx shadcn@latest add @facade/hero-local-business @facade/before-after-slider @facade/image-gallery-lightbox @facade/process-steps @facade/service-area @facade/review-marquee @facade/faq-section @facade/contact-section @facade/cta-section @facade/footer-big5 of these 10 blocks are Pro and install with a license key; the other 5 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 landscapers. Each one answers the question the visitor actually has.
Headline
What could my yard look like?
Why it works
A before and after slider for the hero project and a lightbox gallery for the rest of the portfolio.
Headline
Do you do maintenance too?
Why it works
Process steps that split design, build and ongoing care, so the visitor sees the whole relationship.
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.
- Image gallery lightboxProListing photo grid that opens a shared layout lightbox with arrows, keyboard control and thumbnails.
- 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.
- Review marqueeProTwo rows of customer review cards scrolling in opposite directions with soft faded edges.
- FAQ sectionFreeTwo-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results.
- Contact sectionProContact form with floating labels and inline validation, plus NAP details, live open-now hours and a map card.
- 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 landscaper sites
Something else? Email hello@facadeui.com.
How does the lightbox gallery handle many photos?
It shows a grid of the images you pass, with an optional total count badge for the rest. Clicking opens a shared layout lightbox with arrows, keyboard control and thumbnails.
Can I show seasonal services?
Yes. Use the process steps for the yearly cycle, for example spring cleanup, summer care, fall planting, winter prep, or use the contact form service list to let visitors pick one.
Is the service area block useful for a landscaper?
Yes. Maintenance routes are tight. Name the zones after your route days and the ZIP checker tells a visitor whether you can add them.
Does the review marquee pause for reading?
Yes. It pauses on hover by default and respects the reduced motion setting, in which case the two rows stand still.
Related industries
- Roofer10 blocks: local business hero, before / after slider, stats band
- Cleaning service10 blocks: local business hero, pricing section, process steps
- Plumber10 blocks: local business hero, stats band, process steps
Read the landscaper template, section by section or see all industries.