Freeframe
Business9 pages · 4 downloads · Free

Atlas

A bold, magazine-style personal brand site for a real estate agent, with listings, a home value estimate and calculators.

Stack
v1.0.0 changelog
DocsLive demo Download .zip181 KB

About this template

Atlas is a complete website for Delia Quintero, a fictional independent real estate agent in Nashville who trained as an architect. It pairs Gloock headlines, a cobalt, persimmon and butter palette and SVG-illustrated property cards with filterable active and sold listings, listing pages with illustrated room galleries and open houses you can add to a calendar, a three-step home value estimate, a seller net sheet, a buyer affordability calculator, an interactive neighborhood map and an online consultation booking flow.

Features

  • Listings with For sale, Under contract and Sold tabs, neighborhood, bedroom and price filters with live counts, sorting, an empty state and shareable ?status= and ?area= URLs
  • Listing pages built from one data array: illustrated room gallery with keyboard controls, key facts, sold price and percentage of asking
  • Open-house times shown on their next date in Nashville time, each with an Add to calendar (.ics) download
  • Three-step home value estimate from neighborhood price per square foot, type, size, condition and extras, with comparable sales
  • Seller net proceeds sheet with live breakdown bar, prefilled from the estimate
  • Buyer affordability calculator (28/36 rule) with an SVG donut of the monthly payment and a link to homes in budget
  • Interactive SVG neighborhood map: hovering or focusing an area highlights its guide card and the reverse
  • Consultation booking: four consult types, a day strip and time slots in Central Time, validation, confirmation and .ics download
  • Instant estimate teaser, count-up stats and an accessible testimonial carousel on the home page
  • Nine SVG house styles and five room scenes generated from listing colors, plus an illustrated portrait, favicon and social image

Pages included

Quick start

unzip atlas.zip && cd atlasopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Atlas documentation →

Changelog

  1. v1.0.0

    Added

    • Nine pages: home, listings, listing detail, sell, buy, neighborhoods, about, book a consult and a 404 page.
    • Listings with status tabs, neighborhood, bedroom and price filters with live counts, sorting, an empty state and shareable URLs (?status=, ?area=, ?beds=, ?min=, ?max=, ?sort=).
    • Listing detail pages (listing.html?id=) with an illustrated room gallery, key facts, sold results, open houses with .ics downloads, a validated tour request form and similar homes.
    • Home value estimate (three steps), seller net proceeds sheet and buyer affordability calculator, all labelled as illustrative.
    • Interactive SVG neighborhood map linked to six neighborhood guides with per-area statistics.
    • Consultation booking with consult types, a day strip, time slots in Central Time, validation, a confirmation and an .ics download (demo only, nothing is booked).
    • Instant estimate teaser, count-up stats, testimonial carousel, newsletter sign-up, scroll reveals, accessible mobile menu and a back-to-top button.
    • SVG house and room illustrations generated from listing data, an illustrated portrait, SVG favicon and a PNG social image (SVG source included). Full documentation in DOCS.md.

More templates