Online Education Hero

Create a bright and aspirational hero for an online education platform. Use a clean white canvas with soft lavender ambient shapes and a precise navigation with a graduation-cap logo. Build a split composition. On the left, add a small outlined course-format badge, an elegant large serif headline over three lines with one italic violet phrase, a concise description, a violet primary CTA and an outlined secondary CTA. Beneath, show a row of overlapping learner portraits next to five violet stars, a 4.8/5 rating and a short trust statement. On the right, place a large rounded organic photo mask containing a smiling learner wearing headphones at a laptop. Float three white learning-benefit cards along the right edge, each with a violet icon, title and short explanation. Anchor the section with a wide four-stat glass strip spanning the lower area. Animate the portrait with subtle depth, let the benefit cards float independently by a few pixels, reveal stars sequentially and count the statistics on entry. Keep it optimistic, calm and academically credible.

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.