## 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/storyshort-ai/c734da75-ded5-4c81-9b78-0aa9ae185a47-1791551950-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/storyshort-ai/c734da75-ded5-4c81-9b78-0aa9ae185a47-1791551915904-full.webp
- Component on Kage: https://kage.design/component/storyshort-hero

## Before you start
Ask what the user's product is, what transformation it provides, who the audience is, and what visual brand system should guide the page. Then adapt this structure to those answers.

Create a cinematic dark hero directly beneath the navigation. Use a two-column composition: a left text block with a large 48–64px bold sans-serif headline, deliberate line breaks, and one emphasized handwritten or italic phrase only if it fits the user's brand; a right-side vertical product/outcome visual with layered cards and a soft glow. Add a concise 16px supporting paragraph, a bright yellow primary CTA (#ffd21a) with black text, 999px radius, and a small creator/customer proof row beneath it. Use a black background (#000), faint grid or radial texture, white text, and muted gray supporting text. Keep the hero spacious, with the text vertically centered and the visual extending slightly beyond the content row. Include subtle media controls or motion cues only when they clarify the demo.

Never: use the reference's logo, product name, copy, illustrations, imagery, or exact video frames.