## 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/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106561-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106517952-full.webp
- Component on Kage: https://kage.design/component/mock-magic-video-presets-hero

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and typography they want. Then apply the principles below to create an original hero for their product—not a copy of the reference.

## Design the section
Build a dark, premium SaaS hero with a thin top navigation and a two-column introduction area. The section should feel useful for a product that transforms, previews, generates, or presents something visual.

### Layout and alignment
- Use a near-black page background, approximately `#050505`.
- Add a full-width navigation bar with a centred max-width of roughly `1180–1200px`, horizontal padding of `48px` on desktop, and a subtle bottom divider.
- Keep the left side of the hero for the product message and the right side for a large visual preview or product artifact.
- Give the hero generous top spacing: approximately `80–110px` below the navigation.
- Use a two-column grid around `45% / 55%`, with a gap of `48–72px`; vertically align the content toward the middle of the visual.
- Keep the text block narrow, around `420–500px`, and centre-align its contents if that best suits the product’s tone. The visual should be allowed to extend beyond the text block and be cropped by the hero container.
- On smaller screens, stack the text above the visual, preserve generous spacing, and keep the visual from causing horizontal overflow.

### Navigation
- Place a small monochrome brand mark and wordmark on the left.
- Place a compact set of text links followed by one prominent light-filled button on the right.
- Use muted light-grey text for secondary links and a brighter colour for the primary button.
- Keep navigation controls vertically centred and use consistent gaps of roughly `28–34px`.

### Typography hierarchy
- Use a clean, modern sans-serif with strong weight contrast.
- Set the headline large and tight, approximately `38–42px` desktop, `700–750` weight, with line-height around `0.98–1.08`. Use two or three deliberate lines rather than a long paragraph.
- Set supporting copy to approximately `16–17px`, line-height `1.45–1.55`, in a soft grey such as `#B9B9B9`. Keep it to two or three short lines.
- Set CTA text around `15–16px`, semibold or bold.
- If the product benefits from utility cues, add a small row of simple device, format, or capability icons below the CTA. Keep them monochrome and understated.

### Colour, controls, and surfaces
- Use white or near-white for the headline, approximately `#F5F5F5`.
- Use muted grey for body copy and navigation, approximately `#AFAFAF–#C5C5C5`.
- Make the main CTA a light neutral surface, approximately `#F2F2F2`, with near-black text `#111111`.
- Give the CTA a compact height around `46px`, horizontal padding around `20–24px`, and a radius of `7–9px`.
- Use a very subtle divider, approximately `rgba(255,255,255,0.10)`, rather than a strong border.
- The product preview should have its own believable frame, edge treatment, shadow, or glow, but its visual styling must be created for the user’s product. Avoid decorative gradients unless they support the product clearly.

### Product preview
- Use one dominant, oversized preview on the right: for example a device frame, dashboard canvas, editor output, generated artefact, or media player.
- Crop or mask the lower and outer edges so the preview feels like it continues beyond the hero rather than sitting inside a small card.
- Keep the preview visually richer than the text area, but ensure it does not overpower the headline or CTA.
- If the product needs imagery, generate or use original content that matches the user’s brand; do not reuse the reference artwork.

### Interaction
- Add clear hover and focus states to navigation links and the primary CTA.
- On hover, the CTA may brighten slightly or lift by `1px`; keep the motion subtle.
- Provide visible keyboard focus rings with a high-contrast colour.
- If the preview is interactive, use restrained motion such as a slow reveal, cursor hint, or gentle parallax; respect `prefers-reduced-motion`.
- Ensure the CTA remains the strongest action and that the visual preview does not behave like a competing button unless intentionally designed that way.

### Responsive behaviour
- Collapse or simplify navigation on mobile while keeping the primary action accessible.
- Reduce the headline to approximately `32–36px` on small screens.
- Stack the hero columns, centre or left-align consistently, and scale the preview to the viewport width.
- Preserve the dark visual hierarchy and avoid shrinking all elements uniformly.

## Never
- Never copy the reference’s logo, product name, brand identity, or exact copy.
- Never reuse the reference’s device frame, artwork, imagery, icons, or distinctive visual asset.
- Never recreate the exact measurements, line breaks, layout proportions, or decorative treatment as a pixel-for-pixel imitation.
- Never add unrelated illustrations or stock imagery that distracts from the product’s core action.
- Never use placeholder text that implies the reference product; write new copy for the user’s product.