Waida Studio
Slateon - Astro 7 Theme for Real Estate and Property
An estate-agency site with a working storefront, and not one byte of framework JavaScript. Slateon is a complete real estate and property theme built on Astro 7. Every page pre-renders to static HTML, so it loads instantly and deploys anywhere — and it ships zero framework JavaScript, just one small vanilla script.
Live demo: https://slateon-astro.vercel.app
WHAT'S INSIDE
20 page templates — 42 static pages per build: home, company, portfolio grid, case study, services list, service detail, blog, blog article, property listing, property detail, category, contact, checkout, PayPal checkout, order confirmation, style guide, licenses, changelog, password (401) and 404
Blog — 10 articles as Markdown, laid out across a six-tab category strip with a wide featured pair above it, and four more on the home page; every card is one component and the grid position is data
Case studies — 5 property developments as Markdown, each with a four-row fact panel, two slot-machine counters, a full-width banner and three separately labelled sections
Property listing — 6 properties with price, address and size, each with its own page, a buy box and a five-row FAQ; two category pages that genuinely filter, For Rent and For Sale, derived from the properties themselves
Commerce pages — a cart drawer, checkout, PayPal checkout and order confirmation with quantity editing, line totals, subtotals, £-formatted money and validation that only tests fields a visitor can actually see (localStorage-based; wire up Stripe or Lemon Squeezy when you're ready to sell)
Motion that earns its keep — 654 scroll reveals at the design's own offsets and delays, scroll-linked timelines, headings that split to the character, eighteen statistics counters, two carousels, a five-row FAQ, a six-tab category strip, two pointer-following "View" pills, a video lightbox and three background films with a play/pause control — all in one vanilla script, all respecting prefers-reduced-motion
Edit content, not code — add a Markdown file with an order, and the card and the detail page both follow
Design-token system — the whole palette and type scale are 96 CSS custom properties in one :root block; change them there and every page follows
Self-hosted fonts — Inter Display in four WOFF2 weights, no CDN requests
Responsive imagery — every picture ships with the srcset rungs the design gives it, so it arrives at the size the slot actually needs
TypeScript throughout, zod-validated content schema
TECH STACK
Astro 7 · Markdown content collections · TypeScript · the template's own CSS — no utility framework, no build-time CSS pipeline
REQUIREMENTS
Node 22.12 or newer. npm ships with it. Nothing else to install.
LICENSE
One end product per license. You may modify the source freely; you may not resell, sublicense or redistribute it, in whole or in substantial part.
SUPPORT