Logistics Landscape Hero

Create a crisp logistics-company hero centered on a photorealistic white semi-truck driving beside an alpine lake. Use the landscape as a wide background while adding a controlled white atmospheric fade on the left for dark navy copy. The header contains a geometric blue logistics mark, six concise links and a bright blue quote CTA. On the left, add a blue-dot eyebrow pill, a bold two-line headline with the final word in blue, direct supply-chain copy and two actions for solutions and parcel tracking. Position the truck prominently from center to right, with enough scale to communicate reliability and motion. Layer a wide frosted feature rail over the lower image with four values and blue circular icons. Add a separate four-stat rail underneath for daily deliveries, countries served, satisfaction and experience. Animate cloud drift and roadside motion very subtly, reveal the truck with a short forward translation, draw a faint route line, and count statistics on entry. Keep the page clean, operational and confident, with no sci-fi effects.

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.