Design analysis

The hero uses a vivid single-colour field, a large headline on the left, a supporting paragraph and CTA on the right, and a tall centered product mockup as the visual anchor. The phone is intentionally cropped by the section edge, creating depth while keeping the message and action visible.

Prompt preview

## 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/cash-app/7c13f178-963d-4437-bcf4-5300340c2bdd-1789146485-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cash-app/7c13f178-963d-4437-bcf4-5300340c2bdd-1789146441015-full.webp
- Component on Kage: https://kage.design/component/cash-hero

## Before you start
Ask the user what their product is, what conversion action matters most, and what visual or brand system they want to use. Then apply these rules to create an original hero for that product.

Create a wide, high-impact hero with a saturated brand-colour background and three-part composition: a large editorial headline anchored in the left third, a compact supporting paragraph and primary CTA in the right third, and a centered product interface mockup or relevant product visual rising between them. Align the text blocks to a shared vertical rhythm, keep the headline short across two or three lines, and allow the central visual to extend below the hero boundary so the section feels immersive rather than boxed in.

Use a modern sans-serif with a large 32–38px headline, tight line height around 0.95–1.05, and 12–14px supporting copy. Use a vivid background such as #00E51A only as an approximate starting point; adapt it to the user's brand. Pair it with near-black #050505 text and a white #FFFFFF CTA pill. Keep the CTA compact, use a 1px translucent border or no border, and use a moderate radius of 999px. Maintain approximately 16px side padding on small screens, a generous desktop grid, and responsive behaviour that stacks the text and visual without hiding the main action. Add subtle hover and focus feedback to the CTA, and provide an accessible label for the product visual.

Never: use the reference's logo, product name, exact copy, phone artwork, illustrations, imagery, or branded symbols.