Editorial Notary Hero

Create an editorial hero for a premium notary office using ivory, parchment, charcoal and restrained antique-gold accents. The navigation should be light and spacious with a classical column-inspired monogram. Build an asymmetric split layout: the left side contains a slim eyebrow with a gold rule, an oversized three-line serif headline where the final word is gold, a concise paragraph and two understated CTAs. The right side features a large arch-shaped photograph of a brass notary seal, wooden stamp, legal document and black fountain pen with warm, shallow-depth-of-field lighting. Overlay a small ivory assurance card near the lower center of the image, featuring a shield icon, one highlighted phrase and a divider. Add a wide expertise rail at the bottom with five services, circular outline icons and short supporting lines. Reveal the arch using a soft mask animation, move the gold signature line as if drawn, and introduce service items with a restrained stagger. Avoid generic corporate blue and preserve an intimate, confidential atmosphere.

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.