Diagonal Split Showcase Hero Block for React

The cut is the copy panel's clip-path: polygon(0_0,100%_0,88%_100%,0_100%) keeps the whole top edge and ends the bottom edge at 88% of the panel's width, so the seam leans 12% across. Lower 88 for a deeper slant, and change the right-to-left polygon (12%_100%) and the seam's line (x1="88") to match. The tinted panel tucks under the copy panel by -ms-24 and pads its content by ps-36; widen both together if you make the cut deeper, so the numbers never sit under it.

Nothing is forced dark. The copy panel is bg-background and the numbers panel a solid mix of --muted and the background under it, so in a light theme both are light and in a dark theme both are dark, and the slanted edge shows as a change of tone. A hairline in your border colour runs along the seam, the rows of numbers are ruled with divide-y, and the whole hero sits between the page's side rails with a top rule, like every block in this set.

Edit STATS: each has a value, written as you want it shown (48K, 11s, 99.9%), a label and bars, twelve Tailwind height fractions (h-2/5, h-3/4, h-full) from oldest to newest. The last bar is drawn in full strength and the others in a faint foreground tone, so the primary colour stays on the button. The bars are decoration, hidden from screen readers; the value and its label carry the fact. Each value is isolated with bdi, so 99.9% keeps its sign in a right-to-left layout.

Yes. The cut is only a clip path, so it changes how the panel looks and nothing that's read: the badge, the h1, the subtitle and the two links read in order, then the numbers under their h2 as a description list, each value with its label. The seam's line and the sparklines are hidden from screen readers. Both calls to action are links with a visible focus ring, every text meets WCAG AA contrast, and with reduced motion the panels and rows appear in place.

Below the lg breakpoint the two panels stack, the copy panel on top, and the cut is dropped: a slant across a narrow screen would eat into the text. The panels then meet on a straight line with a hairline, and the numbers panel loses its overlap and its extra padding. Both buttons are on the first screen of a phone, the rows of numbers follow below it, and nothing scrolls sideways down to 320px.

Use it when the first impression should be a statement: a manifesto, a studio, a launch with a strong point of view. The slant pulls the eye to the copy, and the numbers on the other side back it up. Use a standard split hero when you need to show the product beside the copy, or when the copy is long: the cut takes some of the panel's width, so it suits a short headline and a short subtitle best.