## 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/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060563-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060532-full.webp
- Component on Kage: https://kage.design/component/strawberrybrowser-hero-2

# Build a three-card use-case hero section

## Before you start
Ask me what my product does, who it is for, and what its visual brand is (colours, type style, tone, and preferred UI aesthetic). Then apply the principles below to my product rather than reproducing the reference literally.

## Goal
Create a calm, high-trust hero section that presents three distinct ways users can get value from the product. The section should feel like a set of practical entry points: visual enough to create interest, but structured enough to scan quickly.

## Structure and layout
- Use a full-width, warm off-white page background, approximately `#faf9f6` or a brand-appropriate equivalent.
- Place a centered content container with a maximum width around `1120–1180px` and generous horizontal padding of `24px` on mobile and `40–56px` on desktop.
- Arrange three equal-width cards in a single row on desktop with a gap of approximately `18–24px`.
- Stack the cards vertically on narrow screens, preserving consistent spacing and comfortable reading width.
- Each card has three layers:
  1. A wide visual preview at the top.
  2. A bold use-case title and concise supporting description.
  3. A small row of overlapping source, integration, or capability badges.
- Align all titles and descriptions to the same left edge. Keep the card bottoms visually balanced even when descriptions have different lengths.

## Visual preview
- Build a lightweight browser-window mockup rather than using a generic stock image.
- Use a rounded rectangular frame with a very subtle border, approximately `#e5e4df`, and a radius around `14–16px`.
- Give the preview a shallow desktop-browser chrome: three small circular controls in muted red, yellow, and green at the upper left, plus faint abstract address-bar shapes. Do not use real browser branding.
- Fill the preview with a mostly white or very pale surface, approximately `#ffffff` or `#f7f8f7`.
- Include a minimal sidebar or utility rail made from simple geometric UI marks, and one small abstract product character, object, chart, or status element that changes per card.
- Keep the visual language sparse and softly playful: low-contrast controls, restrained colour, and one clear focal detail per preview.
- Use three gently varied background tints behind the previews, such as pale sage `#e4f0e8`, pale blue `#e5f1f6`, and pale lilac `#eee8f6`. Adapt these to the product brand while preserving low saturation.

## Typography
- Use a clean contemporary sans-serif with a friendly, highly legible feel.
- Use card titles at approximately `18–20px`, weight `650–700`, line height `1.2`, and colour near `#262625`.
- Use descriptions at approximately `15–16px`, weight `400`, line height `1.55`, and colour near `#686865`.
- Keep descriptions to roughly two lines on desktop; truncate or clamp only if necessary, using a deliberate ellipsis rather than creating uneven card heights.
- Maintain strong contrast for headings while keeping secondary copy quiet.

## Spacing
- Leave approximately `20–24px` between the preview and the card title.
- Leave `4–8px` between title and description.
- Leave `14–18px` between the description and badge row.
- Give the whole section generous vertical breathing room, approximately `72–120px` above and below depending on the surrounding page.
- Use an 8px spacing rhythm wherever possible.

## Badges and metadata
- Create a compact horizontal group of small circular or pill-like badges beneath each description.
- Badges should overlap slightly, with each badge approximately `28–34px` square, a white or near-white fill, a `1px` border around `#e4e4df`, and a subtle shadow such as `0 1px 3px rgba(0,0,0,.06)`.
- Use abstract symbols, initials, or simple capability marks relevant to my product. They should communicate connected sources or supporting functionality at a glance.
- Keep the badge group small and decorative-supportive, not more visually prominent than the title.

## Interaction
- Make each entire card clickable if the product has a corresponding use-case destination.
- On hover, slightly raise the card or preview (`translateY(-2px)`), deepen the preview border, and apply a subtle shadow. Use a quick, low-drama transition around `160–220ms`.
- Keep focus states clearly visible with a brand-coloured outline and never rely on hover alone.
- If the cards are not navigational, use a restrained hover response without implying an unavailable action.
- Support reduced-motion preferences.

## Responsive behaviour
- At tablet widths, keep three cards if they remain readable; otherwise switch to a two-column grid.
- At mobile widths, use one column and let the preview occupy the available width while preserving its aspect ratio.
- Ensure text does not become smaller than `15px`, badges do not collide, and the cards remain easy to tap.

## Content guidance
- Use three short, outcome-oriented use cases specific to my product.
- Titles should start with an action or user goal, such as discovering, comparing, organizing, creating, or monitoring.
- Descriptions should explain the situation and benefit in one sentence, without marketing fluff.
- Keep the examples varied but clearly part of the same product ecosystem.

## Never
- Never copy the reference's logos, product names, exact copy, illustrations, characters, icons, or imagery.
- Never use real browser branding or third-party logos unless I explicitly provide permission and assets.
- Never reproduce the exact card colours, wording, spacing, or visual composition as a pixel-for-pixel imitation.
- Never make the decorative browser mockups more prominent than the use-case content.
- Never use imagery from the reference; create original abstract UI previews suited to my product and brand.