Enterprise IT Office Hero

Create a dark, cinematic enterprise IT hero set inside a premium glass-walled office at night. Use a full-viewport photographic background with dual monitors displaying blue world-map and network dashboards on the right, while applying a deep navy vignette on the left for copy. Keep the brand and navigation over the scene, with subtle dropdown indicators and a thin outlined quote CTA. The content begins with a small spaced technical taxonomy, followed by a large three-line headline with the final phrase in a blue gradient, concise transformation copy and two buttons. Add a muted row of trusted Swiss enterprise logos beneath the CTAs. Across the lower portion, create four separate dark glass service cards with blue outline icons, service names, short descriptions and arrow actions. Include a small scroll indicator in the lower-right corner. Animate dashboard graph lines, map points and monitor glow without looping aggressively; reveal service cards in sequence and add a slight depth shift to the office scene on pointer movement. Prioritize legibility, credibility and restrained motion.

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.