Templates/ Brokerage
Brokerage 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? Brokerage website components for React.
Install
npx shadcn@latest add @facade/hero-real-estate @facade/listing-filters @facade/property-listing-grid @facade/stats-band @facade/team-grid @facade/logo-cloud @facade/testimonials-wall @facade/valuation-funnel @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 brokerage site and what to change first.
- 01
Opens with a Buy, Rent, Sell search panel over a slow moving architecture image and animated sales stats.
Change first:headlinepropertyTypespriceRangesstatsonSearch - 02
Listing filters
FreeLocation search, type chips, beds and baths and a dual price slider. Feeds the grid.
Set priceMin, priceMax and priceStep to your market. The result count prop should reflect the filtered grid.
Change first:propertyTypespriceMinpriceMaxpriceStepresultCountonChange - 03
Filterable, sortable listings with saved homes and load more. The inventory block.
Change first:listingsheadingpageSizedefaultSortonToggleSave - 04
Stats band
FreeFour numbers that count up once when they enter the viewport. Proof in a glance.
Change first:statseyebrowinverted - 05
Team grid
FreeThe people behind the business, with bios on hover and an optional hiring card.
Add languages to the bio. Buyers filter agents by language more than by title.
Change first:membersheadingshowHiringCard - 06
Logo cloud
FreeA trusted-by grid of wordmarks with a hover reveal line per logo, or a two row marquee.
Change first:logostitlevariant - 07
A masonry wall of reviews with an aggregate rating header and one featured quote. Depth over density.
Change first:testimonialsratingreviewCountfeatured - 08
The What's my home worth funnel. Address first, then details, then an estimate range and the lead.
Change first:basePricePerSqftmarketLabelonLeadbookHrefdisclaimer - 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 brokerage 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.