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.
- 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.