Hero 66 block design & features
Hero66 is a single-column marketing hero built with shadcn/ui, centered on the page with generous vertical padding. A round logo badge leads into a large title and lighter subcopy. Below, a pill-shaped primary button with a calendar icon invites scheduling, beside a cluster of stacked avatars and a short endorsement caption. The lower region places a wide screenshot inside a thick rounded frame with an aspect-ratio wrapper so the media keeps proportions on resize.
Typography is centered throughout; the button row compresses to a column on small widths before the avatars. The device frame uses a heavy border treatment that reads almost like hardware chrome. Avatar borders separate overlapping faces. The placeholder image fills the ratio box edge to edge.
The block is image-forward once you scroll past the text: the framed mockup dominates the lower half. Complexity is modest: static content, no forms or video. You supply real logo, headline strings, people photos, and a product shot.
On large screens the hero breathes with extra top and bottom space; the mockup stays container width so it never touches the viewport sides.