## 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/uber-com/6fbdb16b-1d65-42c3-b533-0bc1468316af-1789146363-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uber-com/6fbdb16b-1d65-42c3-b533-0bc1468316af-1789146324299-full.webp
- Component on Kage: https://kage.design/component/uber-hero

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than reproducing this reference.

Build a two-column hero directly beneath the navigation. On the left, place a small location/context row, a bold 42–56px headline, a compact mode selector, stacked origin and destination fields, and a primary dark action followed by a secondary account-related link. On the right, place one large rounded-corner visual or product preview with a small overlaid status/action strip. Use a white background, near-black text `#050505`, muted gray field surfaces around `#f5f5f5`, and a single strong accent for interactive states. Constrain content to roughly 90% width with a max-width around 1200px; align the text and visual to a shared grid. Use 16–24px field spacing, 12px radii on inputs, and a 4–8px radius on the primary button. On smaller screens stack the visual below the booking form, preserve the headline hierarchy, and keep the main action visible without scrolling excessively. Inputs should support clear focus, validation, and location affordances.

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