Hero

Homepage hero section. Combines the WebGL mesh gradient background (with its static CSS fallback, vignette and scrim), a solid-white H1 that sweeps in behind a mask, 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.

Freelance UX/UI & Product Designer in Sydney

I find what's not working in digital products — or design new ones from scratch — combining UX expertise, UI craft and AI-powered workflows.

See my work

About me

Get in touch

+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.

Custom hero title

Optional one-line subtitle below the headline.

See my work

About me

Get in touch

Composition

Background

`.hero-mesh-base` (static fallback) + `<HeroMeshGradient />` WebGL mesh shader + `.hero-mesh-vignette` (responsive mask) + `.hero-mesh-scrim` (lg:hidden) + `.fade-to-background` bottom gradient.

Headline

`.heading-h1` token in solid white — IBM Plex Sans at weight 400 with tight tracking. A `.hero-title-reveal` mask sweeps it in 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'