## 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/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789193009-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789192974293-full.webp
- Component on Kage: https://kage.design/component/chathop-hero

## Before you start
Ask what the user's product does, who the audience is, and what visual brand system they want. Then apply these rules to create an original hero for that product.

Create a spacious, centered landing-page hero directly below the navigation. Use a short uppercase eyebrow, one bold two-line-or-less value proposition, two or three lines of supporting copy, and one bright primary CTA. Include one original product-relevant visual or abstract object offset toward the lower-right so the text remains dominant. The hero should end after the CTA and visual have enough breathing room.

Design language: use a pale yellow-green gradient background, approximately #efffd5 blending into #d7ff9a, with near-black #050805 typography and muted olive-gray supporting text. Use a heavy sans-serif headline around 46–58px desktop with tight line-height, 11px letter-spaced uppercase eyebrow, and 15–17px body copy. Center the content column; use a vivid chartreuse CTA around #8cff00 with black text, subtle glow, and 999px radius. Keep the section airy with 72–110px vertical padding and responsive type scaling. Add a clear keyboard focus ring and a gentle button hover lift.

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