Hero section

The top of a landing page: a small eyebrow badge, a large headline, a line of supporting copy, and two actions — one primary, one lower emphasis. The whole block is centered with a max-width so the headline wraps to a comfortable measure. The title is a ReactNode, so you can bold or color a fragment of it.

'use client';

import type { ReactNode } from 'react';
import { Badge, Button, Flex, Stack, Text } from '@helix-ui/core';
import { ArrowRight } from '@helix-ui/icons';

export interface HeroSectionProps {
  eyebrow?: string;
  title: ReactNode;
  subtitle?: ReactNode;
  primaryLabel: string;
  onPrimary?: () => void;
  secondaryLabel?: string;
  onSecondary?: () => void;
}

export function HeroSection({
  eyebrow,
  title,
  subtitle,
  primaryLabel,
  onPrimary,
  secondaryLabel,
  onSecondary,
}: HeroSectionProps) {
  return (
    <Stack
      align="center"
      gap={5}
      style={{
        maxWidth: 720,
        margin: '0 auto',
        textAlign: 'center',
        padding: 'var(--helix-ui-space-12) var(--helix-ui-space-5)',
      }}
    >
      {eyebrow ? (
        <Badge tone="brand" size="lg">
          {eyebrow}
        </Badge>
      ) : null}

      <Text as="h1" size="4xl" weight="bold">
        {title}
      </Text>

      {subtitle ? (
        <Text as="p" size="lg" tone="secondary" style={{ maxWidth: 560 }}>
          {subtitle}
        </Text>
      ) : null}

      <Flex gap={3} wrap justify="center" style={{ marginTop: 'var(--helix-ui-space-2)' }}>
        <Button size="lg" onClick={onPrimary}>
          {primaryLabel}
          <ArrowRight size={18} />
        </Button>
        {secondaryLabel ? (
          <Button size="lg" variant="outline" tone="neutral" onClick={onSecondary}>
            {secondaryLabel}
          </Button>
        ) : null}
      </Flex>
    </Stack>
  );
}

Usage

<HeroSection
  eyebrow="New in 0.4"
  title={
    <>
      Design systems your <Text tone="brand">agents</Text> can read.
    </>
  }
  subtitle="Every component ships with a spec.md, so an LLM can compose your UI without guessing."
  primaryLabel="Get started"
  onPrimary={goToDocs}
  secondaryLabel="View components"
  onSecondary={goToComponents}
/>

Notes

• One primary action. The second button is outline + neutral on purpose — two solid buttons compete and neither wins.
• 4xl is the largest heading token. On very wide viewports, cap the max-width rather than reaching for a bigger font.