Kage Design logo kage
mmbl.io
mmbl.io hero component

Design analysis

The hero pairs oversized left-aligned messaging and a store badge with a tilted phone/product composition on the right. Bright pink, purple, orange, and blue accents create energy against the almost-black canvas.

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/mmbl-io/849f4ec6-ce65-4185-a867-71fbc561b804-1789060566-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mmbl-io/849f4ec6-ce65-4185-a867-71fbc561b804-1789060540-full.webp
- Component on Kage: https://kage.design/component/mmbl-hero

Use the reference as inspiration only; never reproduce its branding, logo, copy, or proprietary content. Create a two-column landing-page hero on a near-black navy background (#10101b), with a large left headline in 72–84px bold sans-serif, three short lines, one word highlighted in lavender (#b47cff), muted supporting text, and a white app-download badge beneath. On the right, show a large tilted generic smartphone mockup with a dark interface, floating rounded notification card, and four soft abstract pill/blob shapes in coral (#ff6680), violet (#a86cff), orange (#ff9747), and sky blue (#64c8f2). Keep the hero approximately 540px tall after the header, use a 38px desktop gutter, and add a restrained entrance/parallax animation to the phone and blobs; stack the columns and center the copy on small screens.

More components