Feature 183 - Device-stage hero with overlay cards and stats

Pro

Rounded muted stage with faint line grid anchors a centered phone mock flanked by floating product cards plus selects, followed by three large typographic KPI summaries laid out horizontally on wide screens.

Shadcn Feature 183 block

Component Data

  • ID:feature183
  • Access:pro
  • Created:Jan 26, 2025
  • Type:block

Feature 183 block design & features

Feature183 merges merchandising choreography with KPI proof points using Shadcn UI Badge and Select primitives inside a theatrical hero band. The top surface is a tall rounded rectangle on a muted field, etched with orthogonal line art that fades toward the viewport edges via a gentle vertical mask. A tall phone silhouette sits centered along the foreground, overlapping the grid so product UI appears inset within the device frame. Two compact cards float on large breakpoints: one tilts slightly and highlights a featured product blurb with a secondary badge, while the other presents stacked menus for choosing categorical options beside a bordered action chip.

Rounded corners on cards, restrained shadows, and typographic badges keep the vignette approachable rather than cinematic. Interaction is limited to static presentation of select triggers; storytelling leans on layout depth and rotation cues.

Highly elaborate relative to minimalist feature grids: simultaneous device framing, angled cards, and dual-control panel design demand thoughtful content and cohesive art direction to avoid clutter. Complexity mixes vector decoration, overlapping layers, and form controls in one tableau.

Below the stage, three stat summaries align in a spaced row on large widths, pairing enormous numerals with short explanatory captions; they compress into stacked reading order on narrower breakpoints while preserving dramatic type scale.