FuryBeeThemes

WebsiteReal estate agency website Coming soon

Keystone

Estate agency website with filterable listings, a district map, floor plans and a mortgage calculator.

Keystone website: real screenshot of the live demo home page
  • Keystone: Listings with filters and the district map
    Listings with filters and the district map
  • Keystone: Listing page with gallery and key facts
    Listing page with gallery and key facts
  • Keystone: Four-step valuation request
    Four-step valuation request
  • Keystone: Neighbourhood guide
    Neighbourhood guide

About Keystone

A website for an independent estate agency, sales and lettings in one city: a buy and rent search, a listings page with filters, sort, grid or list view and a clickable SVG district map, twelve listing pages with gallery, SVG floor plan, EPC energy scale, nearby places, a mortgage calculator or moving-in costs and a viewing form, a four-step valuation form, six neighbourhood guides, team, journal and FAQ. Fraunces and Manrope, one designed light mode. Astro and Tailwind CSS 4.

Best for independent estate and letting agents, realtors, property developers and the agencies that build their sites.

Features

  • Listings with filters

    Buy or rent, min and max price, bedrooms, type, neighbourhood, sort and a grid or list view, with a live result count; the state lives in the URL so searches can be shared.

  • District map

    A stylised SVG map that shows how many homes match in each district, highlights on hover and filters the listings when clicked; keyboard operable.

  • Listing pages

    Photo gallery with a lightbox, key facts, features, nearby places, the agent, and status badges for under offer or let agreed.

  • Floor plans and energy ratings

    Floor plans drawn in SVG from room rectangles in the listing file, no image needed, plus an A to G EPC scale with a marker.

  • Mortgage calculator

    A live repayment estimate from price, deposit, rate and term on sale listings; lettings show the first month's rent and the deposit.

  • Valuation and viewings

    A four-step valuation request (property, timing, about you, review) and a viewing request form on every listing, validated in the browser.

  • Neighbourhood guides

    Six district guides with their place on the map, a team page with SVG monogram portraits, a journal and an FAQ.

  • SEO built in

    RealEstateAgent, RealEstateListing with Offer, Place, FAQPage, Article and BreadcrumbList structured data, Open Graph images and a sitemap.

What's included

  • Home with buy and rent search
  • Listings with filters and district map
  • 12 listing pages
  • Valuation (sell) page with 4-step form
  • Neighbourhoods index and 6 guides
  • Our team
  • Journal with 4 posts
  • FAQ
  • Contact
  • Legal notice and privacy
  • 404

Tech stack and fit

Built with

  • Astro 5
  • TypeScript
  • Tailwind CSS 4
  • Content collections

Who it's for

Independent estate and letting agents, realtors, property developers and the agencies that build their sites.

Pairs well with

Built around the same kind of business, so the public site and the back office can share one brand.

Tags

Keystone FAQ

How do I add a property?

Each listing is a Markdown file in src/content/properties/: mode (sale or let), price, type, bedrooms, area, EPC band and score, district, status, gallery images, floor-plan rooms and nearby places. The file name is the URL, and the build fails with a clear message if a field is missing or a district is unknown.

Do I need floor-plan images?

No. Floor plans are drawn as SVG from rectangles in metres listed in the property file, each with a kind (room, kitchen, bath, hall, stairs or outdoor).

Can I use my own city map?

Yes. The district map is a stylised SVG: each district is a path in src/data/districts.ts with a matching neighbourhood guide. To add or rename districts, edit districtSlugs in src/content.config.ts, add a shape and a guide.

Is the mortgage calculator accurate?

It computes a standard repayment from price, deposit, rate and term, with defaults in src/config/site.ts, and is labelled as an illustration. Keep that wording and add the regulatory text your country requires.

How many listings can it handle?

All cards are rendered at build time and filtered in the browser, which suits an agency's live stock. For hundreds of listings the README recommends server-side filtering or pagination.

Is it only for the UK?

The demo uses pounds and the England and Wales EPC scale, but the currency symbol is set in src/config/site.ts and the energy bands in src/lib/utils.ts, so both can be changed for your country.

When can I buy Keystone?

Keystone is coming soon. The live demo is complete; the template goes on sale at $29 shortly.

Can I use Keystone for a client project?

Yes. The license covers personal and commercial projects, including client work. Reselling or redistributing the template itself is not allowed.

Close in purpose or features to Keystone. Browse all 29 templates.

Keystone is coming soon. The whole demo is already online.

Live preview