Hero 331 - Split hero with large portrait video

Pro

A split hero with headline and CTAs beside a large looping nine-by-sixteen video in a phone frame.

Shadcn Hero 331 block

Component Data

  • ID:hero331
  • Access:pro
  • Created:Sep 4, 2026
  • Type:block

Hero 331 block design & features

Hero331 is a two-column split hero built with shadcn/ui. The left column stacks a large headline, supporting copy, and paired buttons. The right column is almost filled by a looping muted video inside a phone bezel with a notch, cropped to a tall nine-by-sixteen frame.

The page stays light with dark type. The handset uses a dark bezel, large corner radius, and a soft circular wash that sits behind and to the right of the device. Headline lines sit tight. Type stays start-aligned. The clip loops without controls.

It keeps the portrait-phone idea of the smaller split but lets the device take the column. The scale is the difference: the handset reads as the primary visual, not a side accessory. Complexity stays low: you need a headline, two CTA labels, and one clip that can be cropped tall.

On small screens the columns stack and the phone stays centered under the copy at a capped width.