Hero 96 - Split uptime hero with skewed product screenshot

Pro

A split hero pairing monitoring copy with primary and secondary buttons, reassurance line, and a wide bordered screenshot skewed inside the grid.

Shadcn Hero 96 block

Component Data

  • ID:hero96
  • Access:pro
  • Created:Dec 27, 2024
  • Type:block

Hero 96 block design & features

Hero96 is a two-column hero built with shadcn/ui. Left column stacks a condensed headline about performance monitoring, a paragraph on alerts and status pages, and two rounded buttons for trial versus pricing paths, capped by muted reassurance microcopy about payment. Right column spills a bordered screenshot outward with deliberate rotate and skew transforms so it feels like paper sliding across the desktop.

Muted body copy against solid foreground headings keeps readability high. Imagery dominates width on desktop through absolute positioning cues in the stylesheet.

Tone is infra-SaaS pragmatic with a kinetic visual twist. Complexity is modest but the angled photo needs art direction so UI remains legible. Replace copy and screenshot to match your actual surface.

Collapsed layouts place text first then allow the angled image to scale without forcing horizontal scroll thanks to overflow handling on the section.