Hero with feature row above image and slide dots

Hero 276Pro

A marketing hero with a large centered headline, a three-column hover feature row above a crossfading image, and decorative dots under the frame that reflect the active slide.

Shadcn UI Hero Block

Hero276 keeps Hero274’s headline treatment and shadcn/ui Separator spacing, then reverses the vertical rhythm relative to Hero274: the three feature columns sit above the hero image instead of beneath it. Desktop layouts use vertical Separator rules between columns like Hero45; each column highlights on hover and selects the corresponding slide in the opacity stack. A centered row of small dots under the image mirrors the active index for quick visual orientation; they are decorative only and do not expose focus rings.

The image area reuses the bordered, object-top, aspect-video frame with Hero274-style dotted ornaments scrimmed behind the corners and a bottom gradient veil. Feature cells center on small viewports and align start on medium screens so copy stays scannable beside icons.

Props use HeroFeatureSliderProps with placeholderHeroFeatureSlider. Registry wiring only needs the shadcn Separator. Moderate complexity comes from coordinating hover on a wide row, crossfaded media, and synced dot highlights. On touch devices the first slide remains default unless you add tap handlers later.