Hero 83 - Centered hero with announcement badge and triptych

Pro

A centered announcement hero with badge, headline, supporting line, twin full-width buttons on small screens, and three width-weighted images.

Shadcn Hero 83 block

Component Data

  • ID:hero83
  • Access:pro
  • Created:Apr 30, 2025
  • Type:block

Hero 83 block design & features

Hero83 is a centered marketing hero built with Shadcn UI. The upper block stacks a secondary badge, a multi-line headline, short supporting copy, and two large buttons that stretch on phones then sit side by side on wider layouts. Under that, three AspectRatio frames sit in one row with deliberate width weights so the middle canvas reads as the hero width.

Alignment is strictly center so the type block feels like a podium announcement. Images use thin borders, tight crops from the top third, and muted cards so photography stays crisp against a plain background.

The block is classic SaaS launch geometry: announce, explain, give two paths, then show product stills. Complexity is moderate thanks to the trio of ratio-locked images plus dual CTAs. Swap badge text, headline, body, button labels, and the three art files to match your storyline.

Narrow viewports keep the vertical stack; the triptych squeezes proportionally while preserving the width mix.