Templates/ Property developer
Property developer 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? Property developer website components for React.
Install
npx shadcn@latest add @facade/hero-real-estate @facade/new-development-showcase @facade/availability-table @facade/hotspot-image @facade/image-gallery-lightbox @facade/key-facts @facade/countdown @facade/urgency-badge @facade/multi-step-lead-form @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 property developer 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
A clickable building elevation with status coded units, a detail panel and availability counters.
Status values drive the colors: available, reserved, sold. Keep them current.
Change first:projectNamelocationcompletionunitsbrochureHreftourHref - 03
Sortable, filterable unit list that turns into cards on a phone. Reads the same units as the showcase.
Default sort by price ascending. Set actionLabel to Request details.
Change first:unitsdefaultSortdefaultFilteractionLabelonSelect - 04
A floor plan or photo with pulsing hotspots that open detail cards. Percent coordinates, any image size.
Change first:srcalthotspotsaspectRatio - 05
A photo grid that opens a lightbox with arrows, keyboard control and thumbnails.
Change first:imagestotalCount - 06
Key facts
FreeAn icon row of the numbers buyers compare: units, floors, area, completion.
Change first:facts - 07
Countdown
FreeFlip digits counting to a real date: launch, open house or completion.
Count to the sales launch or show apartment opening. Never to a date you will move.
Change first:targetlabelscompleteContent - 08
Urgency badge
FreeA live dot and a percent sold bar, computed from real numbers.
Compute progress from units sold divided by total units.
Change first:labelprogressdetailvariant - 09
A three step quote request with option cards instead of a blank textarea. Each step validates before the next.
Change first:titleoptionstimelinesonSubmitsuccessMessage - 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 property developer 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.