## 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/hola-ai/6afc16ea-d4a5-4b10-89cd-47c92dad80e5-1790143387-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hola-ai/6afc16ea-d4a5-4b10-89cd-47c92dad80e5-1790143310582-full.webp
- Component on Kage: https://kage.design/component/hola-hero

## Before you start
Ask what the user's product does, its strongest promise, target audience, and preferred brand palette. Apply this hero structure to that product without copying the reference.

Build a spacious two-column landing-page hero on a white background with a faint repeating dot/grid texture. Place a small mint credibility badge above the main headline. On the left, use an oversized black sans-serif headline with tight line-height, then place one key phrase inside a pale yellow #FFE66B rectangular panel with a thin black outline and slightly irregular editorial feel; use an electric violet #5146E5 accent for that phrase. Follow with a readable 16px explanatory paragraph, a black rounded CTA button, and tiny trust/support labels. On the right, show a tall rounded-rectangle mobile product preview or video frame with a dark screen, thin black/gold edge, and subtle shadow; keep it visually dominant but aligned to the headline block. Use a max-width around 870px, a generous 64–96px vertical rhythm, and a responsive one-column mobile layout where the visual follows the CTA. Add a small under-hero text link row separated by whitespace. Buttons should have clear hover transitions and the video should support pause/mute controls.

Never: use logos, product names, copy, illustrations, or imagery from the reference.