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.
- Preserve the desktop hierarchy on tablets and stack intelligently on phones. Avoid horizontal scrolling, clipped badges, tiny text and layout shifts.
- Use semantic design tokens for every color, border and shadow. Keep decorative effects subtle and industry-appropriate.
- Respect prefers-reduced-motion by removing loops and parallax while preserving the final composition.
- Use optimized local images with meaningful alt text and lazy-load only content below the first viewport.
- Return every component, typed data object and helper needed to run the result. Do not use placeholders, TODO comments or non-functional controls.
- Add a subtle visual cue at the bottom of the first viewport so the next section remains discoverable without competing with the main call to action.
- Define reusable typed components for navigation items, benefits, statistics and trust marks instead of repeating markup. Keep data separate from presentation.
- Ensure every interactive control has an explicit accessible name, a visible focus ring, a comfortable touch target and correct disabled behavior.
- Prevent cumulative layout shift by giving media, mockups and floating elements stable aspect ratios and responsive size constraints.
- Include the exact final French copy in the implementation and preserve accents, punctuation and deliberate line breaks across responsive layouts.

---

TECHNICAL SPEC (must be respected)

Stack:
- React 18 + TypeScript (strict), Tailwind CSS, Framer Motion
- No extra animation library, no canvas unless explicitly required

Design tokens:
- Base background #0a0a0f, surfaces rgba(255,255,255,0.04)
- Borders rgba(255,255,255,0.08), primary violet #8b5cf6, secondary #a855f7
- Radius 20-28px, backdrop-blur(24px), inner highlight inset 0 1px 0 rgba(255,255,255,0.12)
- Typography: tight tracking on headings (-0.02em), 15-16px body, muted text at 60% opacity

Motion rules:
- Entrance: opacity 0 -> 1, y 24 -> 0, duration 0.7s, ease [0.16, 1, 0.3, 1]
- Stagger children by 0.06s, trigger with useInView({ once: true, margin: "-80px" })
- Hover: translateY(-6px) + soft violet glow, 250ms
- Animate only transform, opacity and filter. 60fps, will-change on animated layers
- Respect prefers-reduced-motion: disable loops, keep final states

Quality bar:
- Fully responsive (mobile-first, no horizontal scroll)
- Accessible: semantic HTML, focus-visible rings, contrast AA
- No layout shift, no dummy lorem ipsum, realistic copy
- Clean, reusable, production-ready components with typed props

Deliver the complete code, ready to paste, with no placeholder comments.