Hero 112 block design & features
Hero112 is a course-focused hero built with shadcn/ui inside a medium-width container. The left side stacks a medium-weight headline, muted description, a solid primary button, and a ghost-trigger styled row with a circular play icon that opens a dialog embedding a widescreen iframe. The right side is a large primary-filled circle framing a hero photo with a floating white join pill showing three avatars and a participation count.
Two smaller rounded squares with thick white borders sit on the circle edge and carry book and pen icons for quick category cues.
Light theme with strong primary accents on the disc and icon tiles. The piece feels like an online learning promo: friendly, illustration-light, and interaction-forward because of the video modal and avatar pill.
Below the main row, a rounded bordered panel splits into three equal columns listing numeric stats with short subtitles, separated by hairline dividers that swap orientation on medium screens and up; on phones the copy column keeps readable line lengths before that stat band.