## 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/getincredible-com/e2886fef-b68a-4ec0-9c25-0cadbf1e05de-1789067377-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/getincredible-com/e2886fef-b68a-4ec0-9c25-0cadbf1e05de-1789067365-full.webp
- Component on Kage: https://kage.design/component/getincredible-hero

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and conversion goal are. Then apply the principles below to create a version for my product—do not reproduce the reference literally.

## Build a statement-led hero
Create a responsive landing-page hero consisting of a minimal top navigation and one large rounded feature panel. The component should feel confident, editorial, modern, and deliberately simple: one strong idea, one supporting sentence, and one primary action.

### Layout and alignment
- Use a white page background with a compact header constrained to the same maximum width as the hero panel, approximately 1160–1200px.
- Keep the header horizontal: a compact brand mark/wordmark area on the left and one dark pill-shaped action on the right. On small screens, preserve the hierarchy and reduce horizontal padding rather than adding extra navigation.
- Place the hero panel below the header with generous separation, approximately 30–36px on desktop.
- Make the panel wide and tall, with a desktop aspect ratio around 1.55–1.7:1 and a minimum height of roughly 620–700px. Use responsive min-height and padding so the content remains comfortable on mobile.
- Align all hero content to a consistent left edge. On desktop, position it in the lower-left half of the panel using generous inset padding, approximately 52px horizontally and 130px vertically from the top. On mobile, reduce the inset to 24–28px and vertically center or bottom-align the content without allowing it to touch the edges.
- Constrain the text column to roughly 520–600px so the headline wraps into a few intentional lines rather than spanning the entire panel.
- Keep the header and panel visually quiet: avoid decorative cards, secondary links, or competing media.

### Typography hierarchy
- Use a geometric or contemporary grotesk sans-serif with strong weight contrast and compact proportions.
- Set the eyebrow in a small, regular size around 12–14px, inside a subtle white translucent pill with generous horizontal padding and a soft radius.
- Make the headline the dominant element: approximately 64–70px on desktop, 0.92–0.98 line-height, heavy/bold weight, and slightly negative letter spacing. On mobile use around 42–52px with controlled line breaks.
- Write the headline as a clear, conversational product promise or tension-to-resolution statement. It should occupy around three lines on desktop when appropriate.
- Set supporting copy around 17–19px with a tight 1.3–1.45 line-height and enough width to remain readable.
- Use a dark near-black text colour, approximately #050505.

### Colour and surface
- Use a warm near-white hero surface, approximately #f8f7f4 or #faf9f6, against a pure white page.
- Add a large, very soft lime/chartreuse radial or blurred gradient concentrated in the lower-left corner, approximately #baff00 to #d7ff63, fading smoothly through pale yellow-green into the warm surface. The gradient must remain subtle behind text and should never reduce contrast.
- Do not use a visible border unless needed for separation; if used, keep it extremely faint, around rgba(0,0,0,0.04).
- Make the main panel strongly rounded, approximately 38–44px on desktop and 28–32px on mobile. Clip the gradient to the panel.
- Buttons should be solid near-black with white text, fully pill-shaped, and use compact but generous padding such as 14px 22px. The primary hero CTA should visually outweigh the eyebrow but remain smaller than the headline.

### Interaction and responsive behaviour
- Add a restrained hover state to dark buttons: a slight lift or scale of about 1–2%, a small brightness change, and a smooth 160–220ms transition.
- Ensure keyboard focus is clearly visible with a contrasting outline or offset ring.
- Preserve the gradient composition across breakpoints, but reduce its intensity or size on narrow screens if it competes with the copy.
- On mobile, stack header elements only if necessary, maintain generous page gutters, reduce panel height, and keep the CTA easy to tap with at least a 44px target height.
- Respect reduced-motion preferences by disabling transforms and nonessential transitions.

### Content guidance
- Use the user's real product, audience, and brand voice for every visible string.
- Include one short eyebrow, one memorable headline, one concise supporting sentence, and one action-oriented CTA.
- Keep the hero focused on a single conversion goal.

## Never
- Never use the reference's logo, wordmark, product name, or exact brand assets.
- Never copy the reference headline, supporting copy, eyebrow, CTA wording, or line breaks.
- Never reuse the reference illustration, imagery, icons, or decorative graphics.
- Never clone the exact gradient placement, dimensions, or visual proportions; adapt the system to the user's brand.
- Never add extra navigation, feature lists, testimonials, or competing CTAs that weaken the single-message hero.