## 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/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073747-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073722-full.webp
- Component on Kage: https://kage.design/component/upstash-hero

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original hero for their product—not a copy of the reference.

## Build this section
Create a polished SaaS homepage hero with three layers: a slim announcement strip, a clean navigation row, and a large centered hero area that transitions into the next section.

### Layout and alignment
- Use a full-width page with a very pale mint/white atmospheric background in the hero, fading toward near-white at the edges and bottom.
- Add a compact announcement bar at the very top, approximately 36px tall, with centered inline text, a subtle underlined link treatment, and a small right arrow.
- Place the navigation in a constrained container, approximately 1180–1240px wide, with generous horizontal padding. Align the brand mark at left, navigation links in the center, and one rounded account/action button at right.
- Keep the hero content centered horizontally. Give it substantial top spacing below the navigation and enough bottom padding for the next section to peek into view.
- Let the next section begin at the bottom with a row of rounded product/category cards or tabs, partially visible to suggest more content below. Keep these cards generic and tailored to the user's product.
- Make the composition responsive: collapse or hide secondary navigation on small screens, preserve the centered hierarchy, and stack the CTAs when necessary.

### Typography hierarchy
- Use a modern sans-serif with a heavy display weight for the headline and a regular/medium weight for supporting text and navigation.
- Set the headline very large and tightly tracked, approximately 88–112px on desktop with a line height around 0.95–1.05. Use two lines and let the headline define the visual identity of the section.
- Apply a smooth multi-stop green gradient to the headline, moving from saturated emerald on the left through fresh green to a muted lime/olive tint on the right. Use `background-clip: text` or an equivalent technique.
- Use a short supporting sentence below the headline, approximately 24px on desktop, in a neutral gray with comfortable line height.
- Keep announcement and navigation text compact, around 15–16px. Make the primary CTA label semibold and easy to scan.

### Colour and atmosphere
- Base page background: near-white `#FAFCFB`.
- Hero wash: very pale mint `#E8F7F1` or `#EAF8F3`, with a subtle radial or linear fade into white.
- Primary emerald: `#00A878` to `#08B978`.
- Secondary headline gradient tones: `#45BC78`, `#88C275`, and a restrained yellow-green around `#B9B85A`.
- Main text: deep charcoal `#18352E`; supporting text and navigation: muted gray-green `#687570`.
- Primary CTA: vivid green `#08B979` with white text. Secondary CTA: white or translucent white with a colored border and dark text.
- Announcement strip should use a pale mint fill and a fine green-gray bottom border.

### Borders, radius, and depth
- Use thin, low-contrast borders such as `#D9E7E1` for navigation and card surfaces.
- Make the primary button rounded, approximately 12–14px radius, with 12–16px horizontal padding and a small arrow icon.
- Make the secondary compound CTA a pill or softly rounded capsule, approximately 12–16px radius, with a 2px or gradient-like accent border. If it includes selectable agent/tool icons, render them as tiny circular or rounded badges followed by a label and chevron.
- Use extremely subtle shadows only on floating controls and the lower cards; avoid heavy elevation.
- Keep the lower cards white, softly rounded, and visually quieter than the hero headline.

### Interaction
- Announcement links should have a clear hover underline or slight colour shift.
- Navigation links should transition to the primary green on hover; the active or expandable item may include a small circular badge and chevron.
- The primary CTA should darken slightly and lift by 1–2px on hover. The secondary CTA should strengthen its border or background tint.
- If the secondary control opens a menu, show a compact dropdown on click with keyboard focus states and an obvious chevron rotation.
- Respect reduced-motion preferences; keep animation limited to gentle hover transitions and, if desired, a very subtle background gradient movement.

### Content behavior
- Use the user's own product name, value proposition, navigation labels, and CTA copy. Preserve the structural pattern: announcement, navigation, bold two-line value proposition, one-line explanation, and two actions.
- Do not force a two-line headline if the user's wording reads better on one or three lines; preserve the oversized, high-impact hierarchy instead.

## Never
- Never use logos, product names, navigation labels, or exact copy from the reference.
- Never reproduce the reference brand mark, icon set, or vendor/tool badges.
- Never reuse the reference illustration, imagery, screenshots, or lower-card content.
- Never copy the exact headline wording, gradient stops, spacing measurements, or page layout as a pixel-for-pixel replica.
- Never sacrifice accessibility: provide sufficient text contrast, visible focus states, semantic headings, keyboard navigation, and responsive behavior.