Skip to content
Silk UI
Real estateNew

Calder 12 — Residential real estate

A calm, premium template for residential developments, with a cinematic photo hero, an aerial location map with walking rings, a floor picker with live availability, SVG floor plans and a page for every flat type.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Lenis
Live preview (opens in a new tab)Buy now $59$89

One-time payment · Instant download · All sales are final. By buying you agree to the License, Terms and Refund Policy.

silkui.com/page-preview/calder
Calder 12 hero screenshot

Overview

Calder 12 is a calm, premium template for residential developments: a single building, a complex or a boutique project. It keeps a lot of property information easy to scan, with generous whitespace, Tenor Sans headings, a black-and-white palette and one warm brass accent.

What's in it:

  • Hero: a cinematic photo that settles in on load, with parallax on scroll, floating highlight cards and live availability figures
  • Location map: a real aerial photo of an old town with 5- and 10-minute walking rings, category filters and a hover card on every pin
  • Floor plans drawn in SVG from room data, with walls, windows, furniture and room areas, plus a floor picker that shows how many homes are free on each floor
  • a benefits list whose photo strips open on hover, a payment-option picker, news tabs with a construction progress bar, a developer portfolio, FAQ, a presentation sign-up and downloadable documents
  • a page for every flat type, with a large plan, specs, an availability table, an illustrative interior and an enquiry form

Highlights

  • Cinematic photo hero with live availability and highlight cards
  • Aerial location map with filters, walking rings and hover cards
  • Floor picker and size filters over SVG floor plans drawn from room data
  • A detail page per flat type with availability table and enquiry form

Screens

Aerial location map
Calder 12 aerial location map screenshot
Floor picker & plans
Calder 12 floor picker & plans screenshot
Payment options
Calder 12 payment options screenshot
Flat detail page
Calder 12 flat detail page screenshot

What's included

  • Photo hero
  • Project scale
  • Philosophy
  • Aerial location map
  • Residents’ benefits
  • Residences & floor picker
  • Commercial & parking
  • Payment options
  • Building standards
  • News & construction progress
  • Developer
  • FAQ
  • Presentation sign-up
  • Documents

Getting started

  1. Install dependencies

    npm install

  2. Run the dev server

    npm run dev   # http://localhost:5189

  3. Build the static site

    npm run build   # writes the site to out/

Deploying

npm run build produces a plain static site in out/, including a page for each flat type, and runs on any static host.

License & credits

All photos are free Pexels images, credited in the README. The floor plans are drawn in code. The project, developer, city and figures are fictional.