## 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-8.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-feature-grid-5

## Before you start
Ask what the user's product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to that product rather than reproducing this reference.

## Build a warm editorial feature section
Create a feature-grid section for a modern software product. The section should make the product feel calm, capable, and human by pairing a large, softly presented product interface preview with a strong social-proof heading and a row of concise testimonial cards.

### Structure and layout
- Use a very light warm background, approximately `#F7F3ED`, with a centered content container around `1120–1200px` wide.
- Let the primary feature visual occupy the upper portion of the section. Use a large, cropped product-interface composition with multiple overlapping panels or a dashboard surface to suggest depth and capability.
- Keep the preview wider than the text content and allow it to fade softly into the background near its lower edge. The interface should feel like a real product screenshot, but it must be generated from the user's product domain.
- Below the visual, center a short section heading such as “Loved by ambitious teams.” Use original copy appropriate to the user's product.
- Place three testimonial cards in a responsive row beneath the heading. Cards should share equal width on desktop and stack vertically on small screens.
- Maintain generous vertical rhythm: roughly `96–140px` between the feature visual and heading, `36–48px` between heading and cards, and `24px` gaps between cards.
- On mobile, reduce the visual scale, preserve its focal UI area, and use a single-column testimonial layout without horizontal overflow.

### Product-preview treatment
- Build a believable interface mockup using neutral panels, small text rows, avatars or abstract user markers, controls, and one brand-coloured accent.
- Use a shallow perspective or layered composition rather than a flat isolated card. Place secondary panels partly behind or beside the main panel to communicate breadth.
- Apply a subtle blur or opacity fade to peripheral and lower portions of the preview, while keeping the main interaction or content area legible.
- Add a soft ambient shadow and very restrained glow; the effect should feel atmospheric, not like a neon hero graphic.

### Typography
- Use a clean sans-serif with a slightly compact, contemporary appearance.
- Make the section heading bold and prominent, around `40–48px` desktop with `1.05–1.1` line-height; use `30–36px` on mobile.
- Keep testimonial text at `17–19px`, with comfortable `1.45–1.6` line-height.
- Use smaller metadata at `13–14px` with medium weight and muted contrast.
- Keep the heading and card text left-to-right readable, with restrained line lengths and no excessive all-caps labelling.

### Colour, borders, and radius
- Base background: warm ivory `#F7F3ED` or a close brand-appropriate equivalent.
- Cards: off-white `#FCFBF8`, with text in near-black `#20201E` and secondary text in muted taupe-gray `#77736C`.
- Use a single saturated accent derived from the user's brand for small interface highlights, not for large blocks.
- Give testimonial cards a thin, low-contrast border around `#E7E1D8`, a soft radius of `18–22px`, and internal padding around `24–30px`.
- Use subtle shadows such as `0 8px 28px rgba(45, 38, 28, 0.06)`; avoid harsh outlines and heavy drop shadows.
- Keep all corners consistently rounded across preview panels, cards, buttons, and controls, with smaller radii for nested elements.

### Interaction and responsiveness
- If the testimonials are interactive, support a gentle hover state: slightly raise the card, deepen the border contrast, or reveal metadata without changing layout.
- If the product preview is interactive, allow a restrained hover parallax or panel emphasis, but respect reduced-motion preferences.
- Ensure keyboard focus states are clearly visible and meet accessible contrast requirements.
- Preserve the hierarchy when responsive: product proof first, social-proof heading second, testimonials third.

### Never
- Never copy logos, product names, brand marks, interface labels, testimonial wording, or other copy from the reference.
- Never reuse the reference product's screenshots, avatars, illustrations, imagery, or exact UI arrangement.
- Never make the section depend on a photographic background or decorative image; recreate the atmosphere with UI surfaces, spacing, blur, and colour.
- Never overcrowd the grid, use excessive gradients, or let the blur make the primary product story unreadable.