Hero 336 block design & features
Hero336 is a centered hero built with Shadcn UI. A large headline and supporting paragraph sit above paired buttons. Below the intro, a framed video plays the active chapter. Three muted step cards sit under the player, each with a small square still, an index, title, short line, and a thin progress track. The active card’s track fills while the clip runs. When a clip ends the next chapter starts on its own. Clicking a card jumps to that clip.
The page stays light with dark type. Cards use a muted fill and no border. Thumbs are square with a modest corner radius. The player uses a large corner radius and a sixteen-by-nine crop.
It feels like a short guided sequence more than a media gallery. The numbered cards make the order obvious and the filling track shows pace. Complexity is moderate: you need a headline, two CTA labels, and a titled clip with a still and a short line for each step.
On small screens the buttons stack, the step cards stack into a single column, and the card descriptions hide until large breakpoints.