Real Estate Website Template
Demo brand: WARDENBY · Estate agency / lettings · 27 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 website for an independent estate agent doing sales and lettings: a property search in the hero, a live listings page, ten property pages with a mortgage and Stamp Duty calculator or move-in costs, selling, landlord and fees pages, area guides with price statistics, an FAQ and a contact form that arrives pre-filled. Twenty-seven built pages, all driven by content files.
It looks like a local agency people trust. A cool white ground, one dark slate band, real photographs of English terraces, cottages and bright interiors carrying the colour, and a single brick-red accent. Libre Caslon Display for headings, Commissioner for everything else.
Every section answers what a buyer, seller or tenant asks before picking up the phone: what is for sale, what will it cost each month, what do you charge compared with the others, how fast do you sell, and what do I pay to move in. The search, the calculators and the fee table do that on the page. Motion is one quiet reveal.
The 27 pages you get
- Home
/ - Headline with a Buy/Rent search and three listed homes with price chips, promises, new listings, the agency story, the selling process, a monthly-cost calculator, the fee comparison, sold-home quotes, area guides, FAQ tabs and a register-for-alerts band.
- Property search
/properties/ - Filter by buy or rent, area, max price and bedrooms, sort by price, with the search kept in the URL so it can be bookmarked or shared.
- Ten property pages
/properties/…/ - Seven for sale and three to rent. Gallery, price, key facts, description, features, then a mortgage and Stamp Duty calculator for sales or a move-in cost and income check for rentals, and similar homes.
- Selling
/selling/ - The seller pitch: the process from valuation to keys, what the fee covers, the fee comparison, sold-home quotes and selling questions.
- Landlords
/lettings/ - Full management and let-only side by side, compliance tracking and letting questions.
- Fees
/fees/ - Every fee for sellers, landlords and tenants on one page, plus the three-way comparison.
- About
/about/ - The office, the numbers and six team members shown with initials, no face photos.
- Area guides and advice
/journal/ - Area guides with average sold price, days to agree and typical rent, then articles.
- Five posts
/journal/…/ - Three area guides that list the homes on the books in that area, and two articles on valuations and tenant move-in costs.
- FAQ
/faq/ - Buying, Selling and Letting in tabs.
- Contact
/contact/ - A valuation, viewing and register form, pre-filled with the home or area from any "Book a viewing" or "Book a valuation" link.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout, with placeholders for company number and schemes.
- 404
/404 - Designed, with a way back to the search.
What is in the build
- Listings as content: price, beds, baths, area, photos, features and facts in one Markdown file per home
- A live property search with buy/rent, area, price and bedroom filters, kept in the URL and working without JavaScript
- A mortgage repayment and Stamp Duty calculator on every sale listing, with tax bands in one data file and labelled as an estimate
- Move-in costs and an income check on every rental listing
- A fee comparison table, sold-home quotes with asking vs achieved price and days to agree, and area guides with price statistics
- Real photography of English homes and interiors, optimised to AVIF and WebP by Astro
- All agency details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, including tests for the search, calculator and form pre-fill
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 65 different worlds reading as one design system in different paint.
- The world
- Cool white ground with one dark slate band, Libre Caslon Display over Commissioner, real photographs of English homes and bright interiors, one brick-red accent.
- The mechanic
- A Buy/Rent search in the hero feeds a live listings page filtered by area, price and bedrooms with the search kept in the URL; sale listings carry a mortgage and Stamp Duty calculator, and viewing and valuation buttons pre-fill the contact form. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. English terraces, cottages and bright interiors
- Type & palette
- Libre Caslon Display · Commissioner
-
#fafaf9#1c1d1f#a0412d
Who it is for
Built for independent estate agents, lettings agents and small property firms, and for the web designers who build their sites. It suits an agency that competes on local knowledge, honest pricing and clear fees rather than on portal volume. It is a static site, so listings are content you control rather than a live feed.
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 my CRM?
Not out of the box. Each listing is a Markdown file, so you own the pages and they load instantly. A feed can be pulled in at build time; how depends on the feed you use.
Is the Stamp Duty calculator accurate?
It uses the current bands for England and Northern Ireland, including first-time buyer relief and the additional-home surcharge, and says it is an estimate. The bands live in one data file, so updating them or swapping in Scottish or Welsh rates is a single edit.
Where do valuation and viewing requests go?
The contact form posts nowhere by default. Point it at your form backend or CRM; the README shows how. Every "Book a viewing" button pre-selects the home, so you know which listing the enquiry came from.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each is listed with its source in LICENSING.md. House numbers and appliance logos were removed, and there are no faces.
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
Imagery
Balsworth & Co.
Chartered accountancy practice
Loud
Imagery
MARLEDGE FINANCIAL PLANNING
Financial planning & advice
Loud
Display type
KEDWORTH & QUIRE
Independent insurance brokers
Loud
Imagery