Kage Design logo kage
opentable.com
opentable.com call to action component

Design analysis

A full-width gradient banner switches audience from diners to businesses, combining a bold proposition, two actions, and a product-interface visual on the right.

Prompt preview
## 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/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146317-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/opentable-com/dad68d84-d5d0-4fa5-a1c8-84465fc5fc04-1789146276379-full.webp
- Component on Kage: https://kage.design/component/opentable-cta-2

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that context rather than reproducing a restaurant-booking site.

Create a high-impact B2B CTA banner. Follow these rules:
- Use a wide rounded container with a left-to-right gradient from deep violet #351047 through magenta #cb214d to orange #ffb000.
- Place a concise white headline and two actions on the left: a filled light button for the primary action and a transparent/outlined button for the secondary action.
- Reserve the right side for an original abstract dashboard/device composition or geometric product visualization; it should support the message without being required to understand it.
- Use a 22–26px bold heading, 14px buttons, 4–6px radius, and 32–40px internal padding. Maintain strong contrast and generous whitespace.
- Stack content on mobile, move the visual below the actions, and ensure the banner remains readable without relying on the image.

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

More components