Marketing

Landing Hero

A hero section with headline, subheading, dual CTAs, and an optional media slot. Supports an eyebrow badge, large responsive typography, and side-by-side CTA buttons.

Now in public beta

Build faster with Aether UI

Token-driven, accessible, open-code components for React and Next.js. Ship production-ready interfaces in minutes.

Get started free View on GitHub

import { LandingHero } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add landing-hero

Import

import.tsx

import { LandingHero } from "@aetherstack/blocks"

Usage

landing-hero.tsx

import { LandingHero } from "@aetherstack/blocks"

export default function HeroPage() {
  return (
    <LandingHero
      eyebrow="Now in public beta"
      headline="Build faster with Aether UI"
      subheading="Token-driven, accessible, open-code components for React and Next.js."
      primaryCta={{ label: "Get started", href: "/docs" }}
      secondaryCta={{ label: "View on GitHub", href: "https://github.com" }}
    />
  )
}

Props

Prop	Type	Default	Description
headline*	string	—	The primary heading text.
eyebrow	string	—	Small badge label shown above the headline.
subheading	string	—	Supporting paragraph below the headline.
primaryCta	{ label: string; href: string }	—	Primary call-to-action button.
secondaryCta	{ label: string; href: string }	—	Secondary outline CTA button.
media	ReactNode	—	Optional media element (image, video, screenshot) below the CTAs.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→The headline renders as an <h1> — do not nest this inside another page <h1>.
→CTA links use <a> via Button asChild — include meaningful link text.
→The eyebrow badge is decorative; the heading provides the primary context.