Hero 308 block design & features
Hero308 is a product hero built with Shadcn UI. The layout stacks a gradient-clipped headline, supporting paragraph, and metallic primary button above a wide preview card. The page background uses a faint square grid with a radial mask that softens the left, right, and bottom edges.
The lower card mirrors application chrome with neutral borders, a light panel, and a sixteen-by-nine video area that stays paused on the first frame until interaction. A centered circular play control with an expanding ring shadow starts playback in place; the overlay hides while the clip runs and returns when the video pauses or ends.
Visually the block stays monochrome with a single dark gradient accent in the type and button. Spacing is open around the copy and tighter inside the framed player. Motion is limited to the button ping cue and the play ring transition on hover.
The overall tone is technical and product-led, close to hero146 but oriented toward deliberate preview playback rather than autoplay or modal embeds. Complexity is moderate because of the masked background layer, gradient typography, and client-side video state.