Real Estate Website Template
Demo brand: WARDENBY · Estate agency / lettings · 15 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this real estate website template
A complete site for an estate agency: fifteen built routes covering five individual property pages, a lettings route, a selling route, valuations and contact, and a two-post journal.
Deep mulberry, chosen on the green–magenta tint axis so nothing in the interface can be mistaken for daylight and nothing in a photograph can be mistaken for interface. Newsreader against Libre Franklin. Imagery is the loud channel; type, palette and motion are held quiet under it.
The signature move is the sun coming round. Scroll is the clock: each room photograph is revealed by a wedge mask that opens exactly while the sun is inside that room’s window arc, so the gallery composes in the order the house takes light. The control is a property — the north-facing flat on Mercer Row, where on the shortest day the sun never enters the window arc at all, so its plate never opens and ships ungraded.
The 15 pages you get
- Home
/ - The daylight set-piece, the agency’s position, featured properties and the valuation close.
- Properties
/properties/ - The sales index — the page the agency lives or dies on.
- Five property pages
/properties/… - Ashcombe Hill House, Barrow Mead Cottage, 6 Kellen Street, 14 Mercer Row, Thurloe Green. Each a full route with its own aspect and room data — and Mercer Row is the north-facing control.
- Lettings
/lettings/ - The second revenue line, separately routed. Landlords and buyers are different people with different questions.
- Selling your house
/selling/ - The vendor pitch. This is the page that wins instructions, which is the only thing an agency is really competing for.
- About
/about/ - Who the agency is — local credibility, which is the whole business.
- Contact & valuations
/contact/ - A working valuation-request form plus live tel: and mailto: paths.
- Journal
/journal/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/journal/… - What a valuation is actually for, and which way does it face and why we tell you first. Local-expertise content that also feeds the set-piece’s premise.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- Room photographs revealed by a wedge mask that opens while the sun is inside that room’s window arc — the gallery composes in the order the house takes light
- A declared control property: north-facing, where on the shortest day the plate never opens and ships ungraded
- Five full property routes with per-property aspect and room data, which is how an agency site accumulates linkable pages
- Separate lettings and selling routes, because landlords, vendors and buyers arrive with three different questions
- A ground colour chosen on the green–magenta axis specifically so interface and daylight can never be confused
- Newsreader with Libre Franklin, both self-hosted; a working valuation form plus live tel: and mailto:
- Vitest and Playwright suites included in the repository
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.
- The world
- Deep mulberry ground on the green↔magenta tint axis, so nothing in the interface can be read as daylight and nothing in a photograph as interface. Imagery is loud; type, palette and motion held quiet.
- The mechanic
- "The Sun Comes Round": scroll is the clock. Each room photo is revealed by a wedge mask that opens exactly while the sun is inside that room's window arc, so the gallery composes in the order the house takes light.
- Loud channel
- Imagery
- Imagery. Daylight by compass bearing
- Type & palette
- Newsreader · Libre Franklin
-
#6b3247#f3eef0#7ed3b0 - The control case
- The north-facing flat on Mercer Row: on the shortest day the sun never enters its window arc, so its plate never opens and ships ungraded. Drawn, not labelled.
Who it is for
Built for estate agencies, lettings agents and independent property firms — and the agencies that build for them. It suits a firm competing on local knowledge rather than on portal listings. It is a static site, so it does not connect to a property feed out of the box; properties are content you control.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Does it connect to Rightmove, Zoopla or an MLS feed?
No. Properties are typed data that generate routes, which means you own the pages and they load instantly. Wiring a feed in is a build-time fetch — perfectly doable, and a decision that depends on which feed you have.
Do I have to supply compass bearings for every room?
For the daylight set-piece, yes — an aspect and window arc per room. That is less work than it sounds and agents already know it, because "which way does it face" is the first question every buyer asks. The journal article on exactly that point ships with the build.
Five properties seems few.
They are demo content. Properties are data-driven routes, so the fifth and the five-hundredth cost the same to add. Five is enough to show the set-piece working — including one that deliberately does not.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More professional services templates
HALLREN Counsel LLP
Corporate & litigation counsel
Loud
Moving set-piece
Sightline Capital
Financial advisory
Loud
Moving set-piece
Balsworth & Co.
Chartered accountancy practice
Loud
Display type
MARLEDGE FINANCIAL PLANNING
Financial planning & advice
Loud
Display type
KEDWORTH & QUIRE
Independent insurance brokers
Loud
Texture