Shadcn UI Hero Block
Hero154 is a conversion-oriented hero built with shadcn/ui, organized as centered text over a wide composite mockup. The copy block includes a medium-weight headline, muted paragraph, and an inline email form using react-hook-form and zod validation with screen-reader-only labeling. Under the form, two compact rows pair icons with third-party rating captions. The media area layers a desktop frame with inset product art and a smaller phone device offset along the lower right, all inside a fixed aspect ratio container.
A thin primary-tinted border runs along the section’s bottom edge, separating the hero from what follows. Inputs and button share rounded corners; the button sits full width on small screens and shrinks to intrinsic width beside the field on wider layouts. The mockup imagery relies on bundled placeholders you would replace.
Complexity is moderate: form wiring plus layered absolute-positioned devices. You need trustworthy screenshots, real ratings copy, and backend handling for the submit handler beyond the sample console log.
The flex direction on the form switches at the small breakpoint so thumbs can reach controls easily on phones while desktop keeps a single horizontal band.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react-hook-form | NPM |
| zod | NPM |
aspect-ratio @shadcn | Registry |
button @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |