## 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/intellagents-io/be3df101-c546-4853-b3d0-99c345832561-1790316245-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/intellagents-io/be3df101-c546-4853-b3d0-99c345832561-1790316161493-full.webp
- Component on Kage: https://kage.design/component/intellagents-hero

## Before you start
Ask what the user's product is, what urgent customer problem it solves, and which action should be the hero's primary conversion. Apply the principles below to that product and brand.

Create a full-width hero directly beneath the navigation. Use a vivid atmospheric gradient transitioning from deep blue at the top through cyan and warm orange near the bottom, with enough contrast for a two-line centered headline. Pair a refined display or italic serif accent line with a bold geometric sans-serif main line. Add one short supporting paragraph and two pill buttons beneath it. Place a large rounded product screenshot or abstract product preview in the lower half, centered and slightly overlapping the gradient's warm zone; give it a soft shadow and a thin warm/cool edge treatment.

Use approximate colors #071C74, #08A9E8, #FFB20B, #FF7A00, #FFFFFF, and #111111. The main headline should be responsive, around 42–64px desktop with tight line-height; supporting copy 13–15px. Use 24–32px gaps between text groups, 999px button radius, and generous bottom padding. Add restrained entrance motion only if it does not delay comprehension.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never use a generic stock hero image unrelated to the product.
- Never sacrifice headline contrast for decorative gradients.