## 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/fastrouter-ai/218f3f00-5cca-4309-9765-d0ad1151c96f-1791266478-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fastrouter-ai/218f3f00-5cca-4309-9765-d0ad1151c96f-1791266439499-full.webp
- Component on Kage: https://kage.design/component/fastrouter-hero

## Before you start
Ask what the user's product is, what outcome it creates, and which conversion action matters most. Then adapt this structure to that product and brand.

Build a centered SaaS hero directly below the navigation. Start with a small announcement pill, followed by a bold two-line headline that states an outcome rather than a feature. Add one compact paragraph constrained to roughly 560px, then a primary and secondary CTA in a horizontal row. End the hero with a low-contrast abstract product visual or diagram that suggests the product's domain; it should fade into the background and remain decorative. Use a generous vertical rhythm: 20px between announcement and headline, 14–18px between headline and copy, and 24px before CTAs. Use a near-black headline `#15171a`, muted copy `#777d86`, white background, blue primary button around `#3157d8`, and white secondary button with a subtle `#e7e9ed` border. Use 48–64px desktop headline size with tight line-height and 8px button radius. Stack CTAs on mobile. Ensure the visual never reduces text contrast.

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