Strategy Consulting Hero

Create a refined strategy-consulting hero on a luminous white background washed with very pale lavender. Use a centered editorial composition beneath a minimal navigation: a small violet eyebrow pill, an oversized two-line headline reading as a clear business promise, one key phrase in a violet gradient, a centered two-line subtitle and two CTAs. Add a wide translucent benefits rail with four equal columns, each containing a circular violet icon, a strong benefit title and one concise explanation. Under it, place a wide rounded photographic panel showing two consultants collaborating in a bright office. Overlay a compact frosted statistics panel on the right side of the photo with four vertically arranged metrics and icons. Use soft geometric lavender planes in the far background for depth without distracting from the copy. Animate the headline by lines, draw the benefit separators on entry, reveal the photo with a gentle clip-path, and count metrics when visible. The result should communicate precision, measurable impact and senior-level confidence.

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.