Architecture Residence Hero

Create a magazine-grade hero for a luxury architecture studio. Use a full-bleed photograph of a modern concrete-and-glass residence at dusk, preserving the building as the dominant visual on the right while fading the left area into warm off-white for copy readability. Build a refined header with a numbered monogram, studio name, sparse navigation and a black project CTA. On the left, add a technical uppercase eyebrow with a short rule, then an oversized high-contrast serif headline across three lines; set one expressive word in italic warm taupe. Follow with a concise manifesto, a solid black CTA and a quiet text link with an underline accent. Place three editorial metrics along the lower left using thin vertical dividers. Overlay a dark architectural note card on the lower right of the house with a gold line drawing, supporting copy and circular arrow action. Animate the photograph with a slow Ken Burns movement, reveal headline lines with masks, draw the house sketch and use subtle parallax between landscape and building. Keep corners restrained and the mood timeless.

Build this as a complete, production-ready website hero in React and TypeScript using Tailwind CSS and Framer Motion. Reproduce the reference composition faithfully while creating original brand assets and copy. The page must include a semantic header, responsive navigation, strong single H1, supporting paragraph, two purposeful calls to action, proof or feature items, and the main visual composition.

Interaction and quality requirements:
- Animate the entrance as a restrained cinematic sequence: navigation fades down, copy reveals line by line, the main visual scales from 0.97, and supporting cards enter with a short stagger.
- Add subtle pointer parallax only to decorative or photographic layers; never reduce readability or move interactive controls.
- Buttons need polished hover, pressed and keyboard-focus states. Navigation must become an accessible compact menu on mobile.