Templates/ Landscaper
Landscaper 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? Landscaper website components for React.
Install
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-bigcomponents/facade; you assemble them in a page file in the order below. 5 of the blocks are Pro and need a license key in components.json. Pro setup.Section by section.
What each block does on a landscaper 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.
Change first:beforeSrcafterSrcbeforeAltafterAltbeforeLabelafterLabel - 03
A photo grid that opens a lightbox with arrows, keyboard control and thumbnails.
Eight to twelve photos is the sweet spot. Pass totalCount if you have more.
Change first:imagestotalCount - 04
Process steps
FreeExplains what happens after the first contact. A line draws between the steps as the visitor scrolls.
Three steps: design, build, care. Name the care step after your maintenance plan.
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
Two rows of review cards scrolling in opposite directions. Density over depth, good above a form.
Change first:reviewsdurationrows - 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.
Change first:itemsheadingphoneemailctaHref - 08
The contact form next to the address, phone, live hours and a map link. Everything a visitor needs to reach you in one block.
Change first:servicesaddressphoneemailhourstimeZoneonSubmit - 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 landscaper 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.