Vale

About This Template

Vale is a curated-luxury real-estate template for boutique agencies that represent a handful of properties rather than a whole market. Eleven routes cover the home, a property archive and per-property pages with an eight-row spec panel, features list, gallery and enquiry CTA, a neighbourhoods index and detail pages, a journal, about, services, contact and 404. The hero is a 300vh sticky sequence: three featured residences cross-fade on a smoothstep curve tied to scroll progress, each with an editorial panel whose asking price counts up in USD. Further down, the neighbourhoods section pins and scrolls horizontally with containerAnimation-linked parallax on every panel. Three skins — Parchment & Brass, Midnight Estate and Slate Modern — switch from a floating control and persist in localStorage.

Signature

The home page opens on a 300vh sticky stage holding three featured residences. Instead of a hard swap, each layer's opacity is computed from a smoothstep curve against the ScrollTrigger progress value, so the properties dissolve into one another across overlapping 0.28–0.36 and 0.62–0.70 windows while their images drift in opposite directions. When a layer crosses 80% opacity its editorial panel fires a GSAP tween that counts the asking price up from zero, formatted live as USD.

Features

• 11 routes — Home, Properties, Property detail, Neighbourhoods, Neighbourhood detail, Journal, Journal post, About, Services, Contact, 404
• 300vh sticky hero — three featured residences cross-fade on a hand-written smoothstep curve driven by ScrollTrigger progress at scrub 0.6
• Asking prices count up to their real value with a GSAP tween formatted live through Intl.NumberFormat USD
• Pinned horizontal neighbourhoods rail — panels scroll sideways while each image scales down through a containerAnimation-linked ScrollTrigger
• SplitText line reveals on the agency statement, philosophy strip, testimonial and closing CTA band
• Featured listings with clip-path inset(0 0 100% 0) card reveals plus scrub parallax on every image
• 3 content collections — 5 properties and 3 neighbourhoods as typed JSON, 2 journal posts in Markdown
• Property detail pages with an 8-row spec panel (price, beds, baths, floor area, type, year built, lot size, status), features grid, gallery and related listings
• Status pills across the archive — available, under contract and sold, driven by the Zod enum in the schema
• Shared-element view transitions — the archive card image morphs into the property hero via transition:name
• 3 skins — Parchment & Brass, Midnight Estate, Slate Modern — from a floating switcher, persisted to localStorage, with grain added automatically on the dark skin
• CSS scroll-driven progress bar plus a fixed 00–99% scroll counter in the bottom-right corner
• Services page with four narrative service blocks (acquire, represent, invest, manage) and a staged client process
• Contact page with a full enquiry form — first name, last name, email, optional phone, area-of-interest select and message, all styled as underline fields
• RealEstateAgent JSON-LD, canonical URLs, Open Graph, Twitter cards and sitemap wired through a single BaseLayout prop
• 34 property, neighbourhood and interior photographs included, fluid clamp() type scale, TypeScript strict, prefers-reduced-motion respected

Deployment