## 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/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106742-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106649540-full.webp
- Component on Kage: https://kage.design/component/frigade-assist-api-hero

## Before you start
Ask what the user's product is, who it is for, and what brand language, colours, and technical workflow should be represented. Then apply the principles below to create an original hero for that product rather than reproducing this reference.

## Build this section
Create a polished, responsive SaaS landing-page hero for a developer-facing product. The section should communicate a clear transformation: help an existing technical system become more useful, capable, or expert inside the user's product. Use the following design language as reusable rules.

### Layout and alignment
- Place the hero inside a centered content container, approximately 1120–1180px wide, with generous horizontal padding on smaller screens.
- Use a centered vertical composition: a compact product/category selector, a large two-line headline, supporting paragraph, CTA row, an optional segmented choice control, and a large technical product visual below.
- Add a very subtle radial or arced decorative background behind the content, keeping the focal point around the headline and demo.
- Let the demo visual extend close to the container edges and overlap the lower portion of the hero; it should feel like the main proof point rather than a separate card.
- Below the demo, optionally add three compact benefit columns separated by fine vertical rules. Keep each benefit short and scannable.
- On mobile, stack the CTA buttons, reduce the headline size, make the demo a horizontally scrollable or carefully cropped panel, and hide nonessential decorative marks.

### Typography hierarchy
- Use a modern grotesk or system sans-serif with a crisp, technical feel.
- Set the headline in a very dark navy, approximately #17233D, at roughly 62–72px desktop with 0.95–1.0 line-height and tight letter spacing; use 38–48px on mobile.
- Keep the supporting copy around 18px desktop, 16px mobile, with 1.45–1.6 line-height and a neutral dark gray such as #303746.
- Use compact uppercase or small-label typography for metadata, badges, and demo tabs; use slight tracking and muted gray-blue text.
- Make primary button labels semibold and benefit headings around 15–16px.

### Colour and surface
- Use a mostly white background, approximately #FFFFFF, with a barely visible cool-gray or blue radial wash behind the hero, such as #F5F8FC fading to transparent.
- Use one vivid blue accent for links, icon tiles, focus states, and the primary CTA, approximately #0969E8 or #126BE8.
- Use dark navy for the headline and code text, soft gray #667085 for secondary content, and pale blue-gray #E9F1FB for subtle highlights.
- Keep the visual hierarchy calm: blue should identify action and technical focus, not fill the whole page.

### Borders, radius, and depth
- Use thin borders around controls and panels, approximately #E4E7EC or rgba(20,35,60,.10).
- Use 10–14px radius for buttons and small controls, 14–18px for the main demo window, and pill radius only for compact selectors or badges.
- Give the primary CTA a restrained blue glow or shadow, for example 0 4px 10px rgba(18,107,232,.25); use softer layered shadows on the demo window.
- The demo should resemble a polished browser/application workspace: a pale title bar with small circular window controls, a code pane on one side, and a product UI pane on the other. Keep the panels light and readable rather than overly dark.

### Hero controls and interaction
- Include a small selector above the headline with a blue square icon, a short product category label, an optional “new” badge, and a chevron. It should look interactive through hover and focus states.
- Provide one filled primary CTA and one neutral secondary CTA with a play icon or equivalent action cue. Both need visible hover, focus, and pressed states.
- If the product has multiple starting paths, show them in a compact two-option segmented control beneath the CTAs. Make the active option white with a stronger border/shadow and a blue icon; keep the inactive option muted.
- In the demo, use syntax-coloured code sparingly and show a realistic application workflow on the right, such as settings rows, a highlighted item, and a small guided-help popover. This is illustrative UI, not a full working editor.
- Add subtle motion only where useful: a gentle demo reveal, hover elevation, or a soft shimmer in the background. Respect reduced-motion preferences.

### Content strategy
- Write an outcome-led headline in two short lines.
- Explain in one or two sentences how the product integrates into an existing workflow and what users gain.
- Use action-oriented CTA labels appropriate to the user's product, and tailor the code and application mockup to its domain.
- Ensure the hero remains understandable with the demo hidden or unavailable.

## Never
- Never copy the reference's logos, product names, brand marks, or exact copy.
- Never reuse the reference's code, UI labels, application names, or instructional text verbatim.
- Never include the reference's illustrations, screenshots, imagery, or decorative artwork; create an original abstract background and original product mockup.
- Never make the hero depend on a specific vendor, framework, API, or visual identity unless that belongs to the user's product.
- Never sacrifice legibility, responsive behaviour, keyboard focus states, or accessible colour contrast for visual similarity.