Haven Estates

# Haven — Real-Estate Discovery Platform

## Goal
Build a production-ready real-estate discovery platform called "Haven". Overall vibe: warm architectural calm — linen, oak, daylight; trust through craft, not badges. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: warm white #FAF8F5, charcoal #2A2724 text, clay #C4704F accent used only for price tags and primary CTA
- **Typography**: elegant geometric humanist sans — display 56-72px normal weight, prices in medium with tabular nums
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — logo left, Buy/Rent/Sell/Agents center, 'List your home' clay button right.
2. **Hero** — split: left headline about finding a place that feels like you + search bar (location, price range, beds selects in one pill); right a large architectural photo with rounded 24px corners.
3. **Featured listings** — 3-col property cards: photo (16:10), price bold, address muted, 3 spec chips (beds/baths/sqft), heart save button top-right of photo.
4. **Browse split** — sticky map placeholder left (with 5-6 price-pin markers), scrollable listing list right; hovering a card highlights its pin.
5. **Why Haven** — 3 columns with thin-line icons: Verified listings, Local experts, Zero-pressure tours.
6. **Agent spotlight** — horizontal scroller of agent cards: portrait, name, area, sales count.
7. **CTA band** — clay background, 'Thinking of selling?' + white button, subtle house-outline pattern.
8. **Footer** — 4 columns + city links row (12 city text links).

## Motion
- Card photos zoom 1.04 on hover over 400ms; heart pops with a spring scale when toggled.
- Map pins drop with 60ms stagger when the section first enters view.
- Search pill expands its focused select with a soft width transition.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Price pins on the map show '$1.2M' style abbreviations; active pin flips to charcoal.
- Cards show 'New' clay chip if listed < 7 days (fake the data).

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.