Cinematic Gradient Hero
stableFull-bleed background with a directional gradient mask keeping text readable. Live match ticker anchored to the bottom. Best for homepage and season-launch moments.
Live Preview
Live NowMatch Day 18 · Charlotte FC
CAROLINA
PREMIER
SOCCER LEAGUE
The premier youth soccer league in the Carolinas. Follow every match, every moment, every season.
Today
CFA3–1RLH72'
DUR0–2TFC45'
GFC1–1WSSFT
OBK0–0AVL3:00 PM
tsx
<CinematicHero
imageSrc="/stadium.jpg"
headline="CAROLINA"
headlineAccent="PREMIER"
headlineSub="SOCCER LEAGUE"
primaryCta={{ label: "Watch Live →" }}
secondaryCta={{ label: "View Schedule" }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc | string | — | Background photo URL. Falls back to a gradient placeholder when omitted. |
videoSrc | string | — | Background video URL. Takes priority over imageSrc. |
headline | string | "CAROLINA" | Top headline line. |
headlineAccent | string | "PREMIER" | Gold accent line. |
headlineSub | string | "SOCCER LEAGUE" | Sub-line beneath the accent. |
tagline | string | — | Optional eyebrow / tagline. |
primaryCta | {label, href?} | — | Primary CTA button. |
secondaryCta | {label, href?} | — | Secondary outline CTA. |
tickerMatches | TickerMatch[] | — | Live match strip pinned to the bottom of the hero. |