## 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/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146329-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146302680-full.webp
- Component on Kage: https://kage.design/component/goodreads-hero

## Before you start
Ask what the user's product is and what its brand personality, audience, campaign theme, and primary conversion action should be, then apply the principles below to that product.

Create a full-width campaign hero directly beneath the header. Use a warm, optimistic background palette such as apricot `#f6ae58`, pale yellow `#f7df82`, and coral `#dd7458`, with an original abstract or editorial visual treatment rather than a literal copy of the reference. Place a large high-contrast serif headline on the left or center-left, a short supporting message, and one primary CTA with a dark charcoal fill around `#222222`, white text, `999px` radius, and `12–16px` vertical padding. Let the hero have generous vertical space, approximately `190–230px` on desktop, and use responsive stacking on mobile.

If the product benefits from account creation, add a separate overlapping sign-up card on the right: white background, `1px solid #d8d8d8`, `8px` radius, compact provider buttons, a divider, and a secondary sign-in link. Make the visual hierarchy headline → supporting copy → CTA, and ensure the card never obscures the main message.

Never:
- use Goodreads logos, product names, or exact reference copy
- reuse the reference illustration, book covers, or imagery
- copy the exact campaign composition