Hero

Homepage hero section. Combines the radial gradient background, starfield (dark mode only), text gradient on the H1, availability badge, primary CTA, hire-me menu (lg+), and a compact case-study carousel on the right at lg+.

Hero with carousel (homepage variant)

The full home-page configuration. Two-column at lg+: content on the left, case-study carousel on the right. Below lg, the carousel is hidden and the content stacks center-aligned. Uses mock data here.

I'm open to new roles

Freelance UX/UI & Product Designer in Sydney

8+ years designing digital products for Australian businesses — in-house and freelance. Strategy, UX, and UI that drives real results.

SaaS Dashboard Overhaul

+40% conversion

E-commerce Platform Redesign

Mobile Banking App

-60% time-to-insight

SaaS Dashboard Overhaul

+40% conversion

E-commerce Platform Redesign

Hero without carousel (interior pages variant)

Without `caseStudies`, the right column is omitted and the content is centered. Used when the section is reused on interior pages with a custom title/subtitle.

I'm open to new roles

Custom hero title

Optional one-line subtitle below the headline.

See my work

About me

Get in touch

Composition

Background

`.hero-gradient` (radial accent → background) + `.hero-vignette` (center mask) + `<HeroStars />` canvas (dark mode only) + `.fade-to-background` bottom gradient.

Headline

`.heading-h1` token + `.text-gradient-h1` (white → accent tail). Spring-based blur reveal on mount.

Buttons

Primary `Button href="/work"`. Mobile shows a secondary About-me button; lg+ swaps it for `<HireMeMenu />`.

Props

title?: string

Override the default H1 copy.

subtitle?: string

Override the default subhead copy.

showCTA?: boolean

Hide the primary action row when `false`. Default `true`.

caseStudies?: CaseStudy[]

When provided, renders the carousel column at lg+. Otherwise the hero is single-column.

Import

tsx

import { Hero } from '@/components/sections/Hero'