Kage Design logo kage
usefastlane.ai
Fastlane 2.0 hero component

Design analysis

The hero uses a large centered promise, one vivid coral-red CTA, lightweight award/social proof, and a central product video to make the value proposition immediately credible.

Prompt preview
## 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/fastlane-2-0/959a4273-adb0-42a9-9dfc-df0ea320e78d-1792735307-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fastlane-2-0/959a4273-adb0-42a9-9dfc-df0ea320e78d-1792735248580-full.webp
- Component on Kage: https://kage.design/component/fastlane-2-0-hero

## Before you start
Ask what the user's product does, who the ideal customer is, and what brand colours and proof points are available. Then apply these rules to create an original hero.

Create a centered SaaS hero directly below the navigation. Use a generous white canvas with a soft, abstract radial glow near the top in coral #ff3b3b, blush #ffd9d9, and very pale grey, without relying on a literal copied illustration. Set a concise two-line headline at roughly 48–68px desktop, 700 weight, -0.04em tracking, with a 32–40px line height; use 32–42px on mobile. Add one short supporting sentence only if the product needs clarification. Place a prominent coral-red primary CTA (#ff3b3b or #ff4545) below the headline, with white text, a 12–16px radius, subtle glow/shadow, and an arrow or compact affordance. Under it, add small proof badges or a compact social-proof row, then a centered portrait-format product demo/video frame with rounded 18–24px corners and a soft shadow. Keep the content vertically sequenced: promise, action, trust, visual. Use responsive max-widths so the visual never feels cramped.

Never: copy logos, product names, copy, illustrations, or imagery from the reference.

More components