Hero stage
A composed hero with actions, proof, and a media slot in split or centered layout.
A component library with a point of view.
Every pattern is original React and CSS, and every token set is named. Pick a system, then ship the same behavior across all five.
82 components · 5 design systems · 199 shaders
Implementation
1import type { ElementType, HTMLAttributes, ReactNode } from "react";2 3export type HeroStageProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {4 title: ReactNode;5 description?: ReactNode;6 /** Primary and secondary calls to action. */7 actions?: ReactNode;8 /** A short proof row: customer count, rating, or availability note. */9 proof?: ReactNode;10 /** Product shot, illustration, or video. */11 media?: ReactNode;12 layout?: "split" | "centered";13 headingLevel?: 1 | 2 | 3;14 mediaLabel?: string;15};16 17/**18 * A composed hero: heading, supporting copy, actions, proof, and one media19 * slot. The split layout puts the media beside the copy; the centered layout20 * stacks it below. Copy and media settle in once, with no looping motion.21 */22export function HeroStage({23 title,24 description,25 actions,26 proof,27 media,28 layout = "split",