Isla Azul

# Isla Azul — Boutique Resort Website

## Goal
Build a production-ready boutique resort website called "Isla Azul". Overall vibe: barefoot luxury — slow, warm, salt-air calm; the site itself should feel like a holiday. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: sand #F6F1E7 base, deep ocean #0E3A43 text, terracotta #C4653A accent; photography carries the color
- **Typography**: elegant serif for display (fraunces-style, 64-96px, italic accents), humanist sans 17px body, generous 1.7 line-height
- **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** — transparent over hero, sand-colored after scroll; center logo, 'Reserve' outline button right.
2. **Hero** — full-viewport image of turquoise water, headline 'Where the tide sets the schedule' fading up word-by-word, scroll cue line animating downward.
3. **Intro editorial** — two-column: left a short letter from the hosts in italic serif, right a vertical image with parallax.
4. **Room explorer** — horizontal scroll strip of 5 room cards (image, name, 'from $X'), drag or wheel to move, active card scales up 4%.
5. **Experiences grid** — 2x2: reef diving, chef's table, sunrise yoga, island hopping — image tiles with serif captions that slide up on hover.
6. **Journal teaser** — 3 recent posts with dates in small caps.
7. **Booking band** — date-range + guests inline form on ocean-color background, terracotta submit.
8. **Footer** — map line-art of the island, contact, weather note ('28°C · gentle breeze').

## Motion
- Hero words fade up 60ms apart once; imagery uses slow 1.06 scale Ken Burns.
- Horizontal explorer eases with momentum; snap to card centers.
- Section images parallax ±24px max — restraint is the luxury.
- 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
- All imagery gets a 2% warm overlay to unify tones.
- Reserve button shows a soft ripple on hover, never bounces.

## 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.