# Hero visuals for CodeDock subpages – integration brief

Task: add an animated hero visual to every subpage listed below. Home (`/`) already has its own hero, do not touch it.

## Files

| File | Where it goes |
|---|---|
| `cd-hero-viz.js` | `public/cd-hero-viz.js` (served as `/cd-hero-viz.js`) |
| `HeroViz.tsx` | e.g. `src/components/HeroViz.tsx` |

`HeroViz` loads three.js r128 from cdnjs and `/cd-hero-viz.js` on demand, picks the variant from the current URL and cleans up on navigation. No npm dependency is needed.

## Which visual goes on which page

Paths are without the locale prefix. The same variant applies to `/en/...`, `/cs/...` and `/de/...`.

| Page (EN URL) | Variant | What the visual shows |
|---|---|---|
| `/services` | `services` | six modules click into one system |
| `/services/cloud-development` | `development` | system built layer by layer (DB, API, UI) |
| `/services/azure` | `azure` | wire globe with Azure regions and traffic |
| `/services/devops-cicd` | `devops` | infinite plan → deploy → monitor loop |
| `/services/ai-agents` | `data` | data streams into a warehouse, reports grow |
| `/services/it-consulting` | `consulting` | audit scan flags risks, draws a roadmap |
| `/services/project-management` | `pm` | 3D Gantt filling up, milestones lighting up |
| `/process` | `process` | five steps from T+0 to proposal.pdf |
| `/case-studies` | `case-studies` | three growing towers of results |
| `/insights` | `insights` | growing knowledge network |
| `/about` | `about` | 20 rings of experience |
| `/career` | `career` | a new node joins the team ("you?") |
| `/contact` | `contact` | message out, reply back |
| `/booking` | `contact` | same as contact |
| `/audit` | `audit` | six-axis risk radar |

`/vs-agency` and individual case-study / insight detail pages get no visual.

## How to place it

1. In each page's hero, use a two-column layout: text on the left, `<HeroViz />` on the right. On mobile, stack it under the text.
2. Give the wrapper a height, e.g. `height: { base: '300px', md: '420px' }` in Chakra. The visual fills its container.
3. Usually just `<HeroViz />` is enough (variant comes from the URL). To force one: `<HeroViz variant="azure" />`.
4. If all subpages share a hero component, put `<HeroViz />` there once. It renders nothing on pages without a mapping.

```tsx
import HeroViz from '@/components/HeroViz';

<Grid templateColumns={{ base: '1fr', md: '1fr 1.1fr' }} gap={10} alignItems="center">
  <Box>{/* existing hero title, text, CTA */}</Box>
  <Box h={{ base: '300px', md: '420px' }}>
    <HeroViz />
  </Box>
</Grid>
```

## Notes

- Transparent background, designed for the site's dark theme (`#0a0a0a`) and accent `#FE6019`.
- Only animates while visible; respects `prefers-reduced-motion`.
- All visuals on a page share one WebGL context.
- The visual is decorative (`aria-hidden`); if loading fails, nothing is shown.