Most agency websites are either heavy portals that bury each home under ads, or generic templates that show one photo and a price. A buyer wants five answers before booking a viewing: what it looks like, what it costs each month, what the area is like, how long the commute is, and who to talk to.

The brief I set myself: answer all five on every listing, and let the office add a new home without calling a developer.

Homes are measured, so I based the design on an architect's drawing sheet. Mono labels number each section, red dimension lines carry real facts like floor area and street frontage, and a single brick-red accent is kept for measurements and actions.

Listing search that lives in the URL. Visitors filter by type, area and budget. The filters are tied to URL parameters, so any result can be bookmarked or shared.

A complete page for every home. Each listing page is built from a single CMS entry: gallery with a full-screen viewer, key facts, features, video tour, agent card and a viewing form.

A neighbourhood guide. Nearby schools, stations, shops and parks with distance and walk time, plus a one-line commute.

A mortgage calculator for each home. A React code component with live sliders. On a listing it starts at that home's asking price.

Three linked CMS collections (Listings, Areas, Agents), 11 components with variants and 6 code components. Each home has a display price ("$4,200 / month") and a separate number for the budget filter, so sales and rentals filter side by side.

Transom is live and free on the Framer Marketplace. Any agency can remix it, add its homes in the CMS and publish the same day.