IT Infrastructure Cloud Hero

Create a bright, premium hero for a Swiss IT solutions company. Use a white-to-ice-blue background with a barely visible technical dot grid. Place a compact logo at the far left of a spacious navigation and a saturated blue quote button at the far right. Build a two-column hero: on the left, an outlined eyebrow pill, a bold two-line headline with only the final phrase in electric blue, concise infrastructure/cybersecurity/cloud copy, and two CTAs. Below, create four compact value propositions with blue line icons, vertical separators, short titles and supporting text. On the right, compose a polished isometric scene showing a laptop dashboard, two server towers and a translucent cloud with a glowing security shield, linked by thin luminous data paths. The scene must feel dimensional through soft contact shadows, cool reflections and gentle floating motion. Finish with a wide translucent trust strip containing a label and six monochrome partner marks. Keep the interface precise, airy and credible rather than playful.

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.