Hero 105 - Split hero with stacked headline and product image

Pro

A two-column hero with stacked blended headline, primary and outline CTAs, square product image with animated border beam, skewed photography backdrop, and logo marquee footer.

Shadcn Hero 105 block

Component Data

  • ID:hero105
  • Access:pro
  • Created:Dec 27, 2024
  • Updated:Jun 3, 2026
  • Type:block

Hero 105 block design & features

Hero105 pairs aggressive typography with primary and outline CTAs on the left and a square product screenshot with a Magic UI border beam on the right from medium breakpoints up. The headline repeats in two stacked treatments so one layer reads crisp while the other ghosts behind for depth, with multiply blending over the skewed photo, followed by a muted paragraph and rounded pill buttons pinned to the lower left column.

Behind the grid, a skewed photographic panel stretches beyond the section to create diagonal energy without extra components.

Below the hero band, partner logos scroll in a Kibo UI marquee with edge fades so the strip stays continuous without crowding the layout.

This block suits campaigns that need strong product previews with partner proof; swap the backdrop URL, product assets, and CTA targets for your brand.