Component
CenteredHeroSection
Centered hero — Cal Sans headline, eyebrow, body copy, dual CTA buttons, optional full-width screenshot with tinted frame. Electric-blue decorative blobs top and bottom. Full light and dark theme support.
Light — with screenshot
Dark — with screenshot
Light — text only
Dark — single CTA
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | string | — | Required. Large Cal Sans heading, centered |
| eyebrow | string | — | Geist Mono label in Electric blue above headline |
| body | string | — | Supporting body copy below headline |
| primaryCta | { label, href } | — | Black/white pill button (design system default variant) |
| secondaryCta | { label, href } | — | Outline pill button beside primary |
| image | SanityImage | — | Full-width screenshot in tinted frame with shadow. Omit to hide. |
| theme | 'light' | 'dark' | 'light' | Switches background, text, buttons, frame colours |
Usage
tsx
import { CenteredHeroSection } from '@/components/sections/centered-hero-section'
<CenteredHeroSection
theme="light"
eyebrow="New release"
headline="A portfolio built around the craft"
body="Every frame is a decision."
primaryCta={{ label: 'View the work', href: '/work' }}
secondaryCta={{ label: 'Learn more', href: '/about' }}
image={sanityImage} // optional — wide landscape works best
/>Sanity fields
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | optional | Eyebrow label |
| headline | string | required | Main heading |
| body | text | optional | Body copy |
| primaryCta | object | optional | label + href |
| secondaryCta | object | optional | label + href — outline button |
| image | image | optional | Screenshot / feature image with hotspot |
| theme | string | 'light' | 'light' or 'dark' — radio toggle in Studio |