## 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/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060781-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060731-full.webp
- Component on Kage: https://kage.design/component/clerk-hero

## Before you start
Ask the user what their product does, who it is for, and what brand personality, typeface, colours, and conversion goal they want. 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 landing-page hero with three stacked layers:

1. **Announcement bar**
   - Place a narrow, full-width dark strip at the very top.
   - Centre a short announcement with a clearly separated secondary link and a small directional indicator.
   - Use a near-black background around `#151515`, white text around `#F5F5F5`, and a subtle divider around `#343434`.
   - Keep the bar compact, approximately 40px high on desktop, and allow it to wrap or collapse gracefully on mobile.

2. **Floating navigation shell**
   - Position a wide navigation container directly below the announcement bar with generous horizontal page margins.
   - Use an off-white surface around `#FAFAFA`, a 1px light border around `#D9D9D9`, a soft shadow, and a medium radius around 14–16px.
   - Align the brand mark at the left, primary navigation links beside it, and account actions at the right. Use separators only where they improve grouping.
   - Navigation labels should be compact, medium-weight sans-serif text around 14px. Dropdown items need a small, unobtrusive chevron and a visible hover state.
   - On smaller screens, replace the link row with a menu control while preserving a prominent account or primary action.

3. **Hero content**
   - Make the hero a tall, airy, centred composition with the main content constrained to roughly 850–1000px.
   - Use a very light background around `#FBFBFB` or white. Add extremely subtle technical linework in the background: thin orthogonal paths, faint panels, small nodes, or abstract interface traces. Keep these at low contrast, approximately `#F0F0F0` to `#F6F6F6`, and treat them as texture rather than illustration.
   - Place the headline in the visual centre, with a maximum width that produces two balanced lines on desktop. Use a bold grotesk or modern sans-serif, near-black `#111111`, tight line-height around 0.95–1.05, and responsive sizing around 56–72px on desktop and 40–48px on mobile. Avoid overly wide tracking.
   - Under the headline, add a short supporting paragraph with a maximum width of about 650–720px. Use a muted charcoal around `#5E5E63`, 18–20px desktop text, 1.45–1.6 line-height, and enough separation from the headline to make the hierarchy obvious.
   - Below the paragraph, include one compact product-specific action element rather than a generic row of large buttons. This could be a command prompt, install snippet, signup control, or workflow preview. Give it a white surface, a 1px border around `#D5D5D5`, a 10–12px radius, and a restrained shadow. It should feel like a useful proof of how the product works, not decoration.
   - If the action element contains a copy or submit control, make it keyboard accessible, show a clear hover/focus state, and provide brief feedback after activation.

## Layout and responsive behaviour
- Use a 12-column or max-width container system with consistent side padding, approximately 24px on mobile and 32–48px on larger screens.
- Keep the hero vertically spacious, with roughly 120–150px between the navigation shell and headline, and 80–120px of breathing room below the action element.
- Centre-align the hero content, but keep navigation controls left/right aligned according to their roles.
- Reduce headline size and line length on mobile rather than forcing awkward breaks. Stack navigation and action content when necessary.
- Respect reduced-motion preferences; background traces should remain static or use only very subtle motion.

## Interaction and accessibility
- Provide visible keyboard focus rings using a high-contrast accent or dark outline.
- Ensure text/background contrast meets WCAG AA.
- Use semantic header, nav, main, heading, paragraph, and button/link elements.
- Make announcement, navigation, and action controls usable with keyboard and screen readers.

## Never
- Never reuse logos, product names, slogans, or exact copy from the reference.
- Never reproduce the reference brand identity or its exact navigation labels.
- Never copy the specific background circuit artwork, icon treatment, or command snippet.
- Never use the reference’s illustrations, imagery, or decorative assets.
- Never make the hero dependent on a screenshot; recreate the underlying layout principles with original content and styling.