## 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/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538572-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/portfolio-frame/48220de1-a18c-43ab-aca5-f2ed5e4c7799-1789538513158-full.webp
- Component on Kage: https://kage.design/component/portfolio-frame-hero

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than reproducing the reference.

Create a spacious two-column hero directly below the navigation. Use a centered max-width rail around 820px, with the text column on the left and a dark framed product preview on the right. Give the hero generous top and bottom padding, an eyebrow in small muted blue-gray mono text, a large high-contrast serif or editorial headline with 52–64px desktop type and tight line height, then muted 15–16px body copy. Put a filled blue primary CTA beside a quiet underlined secondary action. Under the actions, add a thin divider and three short setup/value notes in equal columns. The visual should be an abstract product interface inside a charcoal panel with a fine border, layered cards, subtle shadow, and a slight rotation; use #0b0d0d, #15191a, #dfe3e8, and #53afe2. On mobile stack the visual beneath the text. Add hover/focus feedback to buttons, but keep motion restrained.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the reference headline, interface, or exact mockup
- let the visual overpower the product promise