Slateon - Next.js 16 Real Estate & Property Template with Storefront

Slateon is a Next.js 16 template for estate agencies, letting agents, property developers and architecture studios — the businesses whose site has to make a building look worth visiting and make the enquiry easy. It ships 20 page templates covering 42 routes: five development case studies, four service pages, a ten-article blog with category tabs, a six-property listing with a working basket and a three-page checkout, For Rent and For Sale category pages that genuinely filter, and every utility page a real site needs. Built on the App Router with React 19 and TypeScript in strict mode, and every page prerenders to static HTML. No CMS or backend required.

If you run a city-centre lettings agency, a residential developer, a commercial property consultancy, a buying agency or an architecture practice, this is the site with the pages already in it. Content lives in JSON or MDX files — add a case study and it appears in the portfolio grid and at its own URL with no component to touch — so you can launch in hours rather than weeks.

Tech Stack

• Next.js 16 — App Router, static prerendering for every route

• React 19 — server components by default, client components only where state actually lives

• TypeScript — strict mode, no any in the content layer

• Hand-crafted CSS — the template's own stylesheet driven by CSS custom properties. No utility framework, no CSS-in-JS, no build step beyond Next's own

• Self-hosted Inter Display — four WOFF2 weights. No third-party font request at runtime

• No animation library — the scroll reveals, the split-text timelines, the carousels, the counters, the ticker and the scroll-linked sections are one TypeScript file that moves classes and custom properties; the CSS does the rest

• gray-matter — the only runtime dependency beyond React and Next

Included Pages and Templates

Marketing

• Home — a full-screen showreel that opens as you scroll, a project gallery carousel, a listing grid with price, address and size on every card, an animated services list that swaps its photograph as you move down it, slot-machine counters, a quote slider, a video lightbox and an FAQ

• Company — the studio, its numbers, its people and a photograph ticker

• Contact — an enquiry form and office details

Work and services

• Portfolio grid, plus 5 case study pages with a fact panel and two counters

• Service list, plus 4 service pages with client, location and year

Property listing

• Listing grid, plus 6 property pages with a buy box and a five-row FAQ

• For Rent and For Sale category pages, derived from the properties themselves

• Slide-out basket, checkout, PayPal checkout and order confirmation

Content

• Blog with keyboard-navigable category tabs, plus 10 full-length articles

Utility

• Style guide, licences, changelog, password-protected 401 and 404

20 page templates covering 42 routes, every one prerendered as static HTML.

Easy Content Editing

Everything a page prints lives in src/content/. Add a file and it publishes:

• blog/*.mdx — the 10 articles: author, date, card and banner photographs, overview, and the body

• projects/*.mdx — the 5 case studies: the fact panel beside the title, two counters, and three labelled paragraphs

• products.json — the 6 properties: photograph, price, address, size, agent and the values the basket stores

• services.json — the 4 services: client, location, year and two promises

• categories.json — For Rent and For Sale: the badge and the copy above each filtered grid

• blog-layout.json — which article fills which slot on the blog page

Bodies are plain Markdown — ## headings, paragraphs, - lists and > pull quotes — placed inside the design's own markup, so the words are yours and the layout stays exact. Each file states its own order, so the arrangement lives with the content.

Re-theming is one file. Every colour, type size, spacing step and radius is a CSS custom property in the :root block of public/assets/css/styles.css.

Performance and SEO

• Every route prerenders to static HTML — nothing is rendered on demand

• No third-party requests at runtime: no font CDN, no icon CDN, no analytics. The one embed, the video lightbox, loads only after a visitor presses play

• Lazy-loaded imagery with responsive srcset rungs; above-the-fold artwork eager

• The three background films are preload="none" behind poster frames, so none of the 16 MB is fetched until someone scrolls to one

• Per-page title, description and Open Graph and Twitter cards, generated from one shared helper

• Semantic HTML with a single <h1> per page and a heading outline with no gaps

• Skip link, landmarks, ARIA patterns on the tabs, accordions, carousels and basket drawer, and every control keyboard reachable and screen-reader named

• prefers-reduced-motion respected throughout, and the site is fully readable with JavaScript switched off

Deployment

npm run build produces a fully static site. Deploy it to Vercel, Netlify, Cloudflare Pages, GitHub Pages, S3, or any static host — or run npm run start behind Node 20. No database, no API keys, no environment variables.

What You Get

• The complete Next.js 16 project, source included and commented throughout

• 20 page templates, 42 static routes

• A content layer of 15 MDX files and 4 JSON files

• A working basket and a three-page checkout in localStorage

• Full HTML documentation, a README, a changelog and a third-party licence file

• Self-hosted fonts and every image and video the demo uses

Requirements

• Node.js 20 or newer

• npm 10 or newer (pnpm, yarn and bun also work)

• Basic React and TypeScript familiarity to customise components; none needed to edit content