12 — Components

Hero Sections

Five production-ready hero layouts built from CPSL design tokens. Each accepts a photo or video background — swap the gradient placeholder for an <img> or <video> tag.

1 — Cinematic Gradient

Full-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 NowMatch Day 18 · Charlotte FC

CAROLINA
PREMIER
SOCCER LEAGUE

The premier youth soccer league in the Carolinas. Follow every match, every moment, every season.

2 — Split Frame

Dark navy content panel left, diagonal-clipped action photo right. Match preview layout. Works equally well as a player spotlight or venue feature.

CPSL Premiership · Match Day 18

CHARLOTTE
vs RALEIGH
ATHLETIC

Date
Sat 1 Mar
Kickoff
3:00 PM
Venue
Matthews
CFA
RLH
VS

3 — Glass Card on Dark

Frosted glass card floats over a full-bleed dark stadium background. Minimal, focused, and ideal for live match moments. The backdrop-filter: blur reads best over a real photo.

CPSL PremiershipLIVE · 67'
CFA
Charlotte FC
Home
3–1
Charlotte Leading
RLH
Raleigh Athletic
Away
54% Possession46%

4 — Magazine Overlap

Editorial magazine grid — huge Barlow Condensed headline bleeds over the right-hand photo panel. Great for league launches, player features, and season recaps.

2025–26 Season

THE
LEAGUE
AWAITS

12
Clubs
38
Match Days
NC
Statewide

5 — Full Width Image + Headline

Image-first hero — the photo takes full command, headline anchored bottom-left over a gradient scrim. Nothing else. Let the image do the work.

CAROLINA
PREMIER LEAGUE

6 — Section Header

Compact module-level header — sits above data-heavy sections like Standings, Schedule, or Club Directory. Large Barlow Condensed title with an optional gold badge and muted subtitle. Gold accent bar anchors bottom-left. Dark and light variants.

Standings

2024–25 Season

Select a conference and age group to view division standings

Schedule

Spring 2025

Upcoming fixtures across all age groups and divisions

Photo & Video Integration

Static Photo
<CinematicHero
  imageSrc="/stadium.jpg"
  headline="CAROLINA"
  headlineAccent="PREMIER"
  headlineSub="SOCCER LEAGUE"
  primaryCta={{ label: "Watch Live →" }}
  secondaryCta={{ label: "View Schedule" }}
/>
With custom ticker
<CinematicHero
  tickerMatches={[
    { home: "Charlotte FC", hAbbr: "CFA", hScore: 2,
      away: "Durham United", aAbbr: "DUR", aScore: 0,
      time: "65'", live: true },
  ]}
  headline="CAROLINA"
  headlineAccent="PREMIER"
  headlineSub="SOCCER LEAGUE"
/>