Templates/ Real estate agent
Real estate agent 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? Real estate agent website components for React.
Install
npx shadcn@latest add @facade/hero-real-estate @facade/agent-card @facade/property-listing-grid @facade/stats-band @facade/testimonials-wall @facade/valuation-funnel @facade/mortgage-calculator @facade/faq-section @facade/contact-section @facade/footer-bigcomponents/facade; you assemble them in a page file in the order below. 6 of the blocks are Pro and need a license key in components.json. Pro setup.Section by section.
What each block does on a real estate agent 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.
Set propertyTypes and priceRanges to your market. The stats under the hero are your sales numbers.
Change first:headlinepropertyTypespriceRangesstatsonSearch - 02
Agent card
FreeThe agent's contact card with license, languages, rating and call, email and tour actions.
Change first:nametitlebrokeragelicensephoneemaillanguagesratingreviewCount - 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
A masonry wall of reviews with an aggregate rating header and one featured quote. Depth over density.
Change first:testimonialsratingreviewCountfeatured - 06
The What's my home worth funnel. Address first, then details, then an estimate range and the lead.
Set basePricePerSqft per neighborhood you serve. Keep the disclaimer.
Change first:basePricePerSqftmarketLabelonLeadbookHrefdisclaimer - 07
Monthly payment with a down payment slider, term toggle and an animated breakdown donut.
Pass the median listing price as defaultPrice and your market's tax rate.
Change first:defaultPricedefaultDownPercentdefaultRatedefaultTermpropertyTaxRateannualInsurance - 08
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 - 09
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 - 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 real estate agent 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.