## 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/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073921-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073887-full.webp
- Component on Kage: https://kage.design/component/replicate-hero

## Before you start
Ask me what my product does, who it is for, and what its visual brand should feel like. Then apply the principles below to create an original hero for my product—do not reproduce the reference literally.

## Goal
Build a developer-focused landing-page hero that communicates a simple API or workflow promise in seconds, then proves it with a tangible interactive preview. The section should feel fast, technical, optimistic, and visually memorable without becoming cluttered.

## Structure and layout
- Create a full-width hero beneath the site header, with a generous desktop height of roughly 680–760px and a responsive mobile height based on content.
- Use a centered content container with a maximum width of about 1150–1200px and horizontal padding of 32–64px on desktop, 20–24px on mobile.
- Place the main message in the upper-left portion of the hero. Keep the copy column around 480–560px wide.
- Use a large two-line headline, followed by a concise supporting paragraph and one prominent CTA.
- Position a wide demonstration panel beneath the copy, aligned to the same container edges. On desktop it should be a two-column split: code/editor on the left and a generated result, preview, or status panel on the right. On small screens stack the two areas vertically.
- Keep the hero copy and demo panel visually connected, but preserve enough vertical space that the headline remains easy to scan.
- If the product has multiple SDKs or modes, show compact tabs above the code area. Make one tab visibly selected.

## Visual atmosphere
- Use a vivid radial or mesh-like background gradient rather than a flat colour. Blend hot magenta/pink around the center-left, violet or coral through the middle, warm orange near the lower-right, and a small electric yellow highlight near an edge.
- Suggested approximate colours: deep violet `#8B2BE2`, magenta `#EA27C2`, pink `#F05BD8`, coral `#F07A6A`, orange `#F28C38`, and yellow `#F4F51C`.
- Keep the top/header area comparatively light or translucent so navigation remains legible. Add a subtle fade from near-white `#FAF8FA` into the saturated gradient.
- Use white headline and body text over the coloured region, with a restrained dark shadow or outline only when needed for contrast.

## Typography
- Use a modern grotesk or system sans-serif with a confident, slightly compact feel.
- Set the headline in a heavy weight around 64–76px on desktop, 44–54px on mobile, with tight line-height around 0.95–1.05 and slight negative tracking.
- Use supporting copy at approximately 22–26px on desktop and 18–20px on mobile, with 1.25–1.35 line-height.
- Use navigation, tabs, labels, and code UI at 13–15px. Keep labels short and allow whitespace to create hierarchy.

## Spacing and alignment
- Give the headline 20–28px of separation from the supporting paragraph, and the paragraph 24–30px from the CTA.
- Use a 44–56px tall primary CTA with 16–24px horizontal padding.
- Leave roughly 24–32px between the CTA and the demonstration panel.
- Align headline, paragraph, CTA, and demo panel to a consistent left edge. Avoid centering the hero copy if the code preview is left-to-right and editorial.

## Header context
- If a header is included, keep it compact and horizontal: brand area on the left, a wide search or command field near the center, navigation links, and one dark action button on the right.
- Use a pale background, thin bottom border, and a small promotional strip only if it supports the product. Do not let header content compete with the hero message.

## Demo panel
- Build the preview as a white or near-white rectangular card with a thin neutral border, minimal radius (around 0–4px), and no heavy shadow.
- Give the code side a tab row with a bottom border and a clear active underline. Include syntax-coloured code, but use placeholder code appropriate to the user’s product rather than copying any reference text.
- Use a monospaced font around 14–16px with generous line-height. Highlight a few meaningful tokens with muted tinted backgrounds.
- Give the result side a visually rich but product-relevant output: an image, chart, generated text, rendered UI, log stream, or status state. If using media, make it feel like an output of the product, not decorative stock imagery.
- Add a small overlay caption, metadata row, or status indicator only where it explains the output. Ensure overlays maintain strong contrast.
- On mobile, preserve the code’s readability with horizontal scrolling or a carefully truncated example; never shrink it until it becomes illegible.

## Interaction
- The SDK/mode tabs should be keyboard accessible, show a clear hover and focus state, and swap the code example without shifting the surrounding layout.
- The CTA should have a clear hover state such as a slight colour change, one- or two-pixel lift, or subtle shadow; keep transitions around 150–200ms.
- Any search field should show a visible focus ring and support a command-key hint only when relevant.
- Respect reduced-motion preferences and avoid animated gradients that distract from the code and output.

## Responsive behaviour
- Collapse header navigation into a compact menu on narrow screens.
- Stack the demo columns below approximately 760px and keep each panel’s content usable.
- Reduce gradient intensity behind small-screen text if contrast suffers. Maintain the CTA at a comfortable touch size.

## Never
- Never use the reference company’s logo, product name, navigation labels, promotional copy, headline, code, model names, or exact CTA wording.
- Never copy the reference image, output content, illustration, imagery, gradient placement, or distinctive visual asset.
- Never make the hero depend on an unlabelled decorative animation or inaccessible colour-only state.
- Never sacrifice code readability, text contrast, keyboard access, or responsive behaviour for visual similarity.
- Never present placeholder content as if it were a real product capability; adapt all examples to the user’s product and brand.