## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/movo-ai/8c1aa91f-026c-4018-9b05-6044a1e6f3fb-1792821688-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/movo-ai/8c1aa91f-026c-4018-9b05-6044a1e6f3fb-1792821641495-full.webp
- Component on Kage: https://kage.design/component/movo-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality and colors they want. Then apply the principles below to create an original header for that product.

Build a responsive top-of-page header with two stacked layers: a compact announcement bar and a primary navigation over a visual hero. Keep the announcement bar around 28px tall with a bright cyan/blue background, tiny centered promotional text, a pill-shaped action, and a dismiss icon. Place the navigation below it with a transparent or lightly blurred background so the hero remains visible.

Use a wide max-width container, left-aligned wordmark placeholder, centered or flex-spaced navigation links, and right-aligned utility controls plus a filled pill CTA. Use a clean sans-serif hierarchy: 12px announcement text, 14px nav labels, and 13px semibold CTA text. Use white navigation text on dark imagery, subtle hover opacity changes, 9999px radius buttons, and generous horizontal gaps. On mobile, collapse links into a menu button while retaining the primary CTA.

Approximate colors: cyan #7FE8F0 for the announcement, white #FFFFFF for hero text, translucent black #11111166 for navigation backing, and accent purple #7B3FE4 for the CTA. Add a faint backdrop blur and no heavy borders.

Never: use the reference's logo, product name, exact copy, icons, illustrations, imagery, or brand assets.