Hero 133 - Split hero with subscribe window

Pro

Two-column hero with a waitlist form in the product-frame chrome, a featured proof number, and remaining stats over the screenshot.

Shadcn Hero 133 block

Component data

ID
hero133
Access
pro
Created
Dec 27, 2024
Type
block
Libraries
Radix UI, Base UI, React Aria

Hero 133 block design & features

Hero133 is a two-column split hero built with shadcn/ui. The copy column holds a short label, a compact headline, supporting text, and one oversized featured statistic. The media column is a product window: a muted toolbar with window dots and a validated email field plus submit button, then a large screenshot that bleeds off the right edge on wide screens.

The window uses a hairline border, a soft shadow, and a muted chrome bar. Stats sit on a background-colored fade at the foot of the screenshot so the numerals stay readable. Type on the left stays measured; the product frame carries the visual weight.

This is a waitlist-over-product composition rather than another boxed screenshot beside a form. Complexity is moderate and mixed: the subscribe row is code-driven (react-hook-form and zod), while the block still needs a real product shot and four proof numbers.

On small screens the window stacks under the copy and keeps the toolbar form. The first stat stays in the copy column; the other three remain on the image.