Hero Section

Mint-background promo banner extracted from the homepage — headline, description, pill CTA and pagination dots.

Composed ofButton

Configurator

Clean Cosmetics

Welcome to the Pore Playground

Acne is normal. Our clinical formulations make navigating it simpler.

Discover More

EyebrowHeadlineDescriptionCTA labelHorizontal alignVertical align

Usage

<HeroSection
  eyebrow="Clean Cosmetics"
  headline="Welcome to the Pore Playground"
  description="Acne is normal. Our clinical formulations make navigating it simpler."
  ctaLabel="Discover More"
  align="left"
  verticalAlign="top"
/>

Props

Prop	Type	Default	Description
eyebrow	string	"Clean Cosmetics"	Small label above the headline.
headline	string	—	Main promo headline.
description	string	—	Supporting copy under the headline.
ctaLabel	string	—	Text on the pill CTA button.
ctaHref	string	"#"	Where the CTA links to.
images	string[]	[]	Optional product images floated on the right side (desktop).
align	"left" \| "center" \| "right"	"left"	Horizontal position of the text content. Applies from the md breakpoint up; mobile always stacks left.
verticalAlign	"top" \| "bottom"	"top"	Vertical position of the text content within the section. Applies from the md breakpoint up.

Do's and Don'ts

·Use HeroSection once per page, as the first thing under TopNav.
·Keep the headline to one short line or two at most — it's set at 4xl/5xl and wraps awkwardly past that.
·Point the CTA at something real — a collection, an anchor on the same page, or a specific product.

Don't

·Don't overload the description with more than a sentence; this is a banner, not a body of copy.
·Don't pass more than two or three images — the layout was built around the homepage's small product cluster, not a full grid.
·Don't combine align="right" with images — the floating product images already anchor to the right edge on desktop and will overlap right-aligned text.