# Hero

A Hero component.

## Props

### announcement

**type**: `object`

An announcement banner.

Properties:

- `title` (`string`, **required**): The announcement text
- `ctaTitle` (`string`, **required**): The call-to-action button text
- `href` (`string`, **required**): The URL the announcement links to

### title (required)

**type**: `object`

The main hero title.

Properties:

- `firstPart` (`string`, **required**): The first part of the title
- `highlightedPart` (`string`): The middle part that will be visually highlighted
- `secondPart` (`string`): An optional final part of the title

### description (required)

**type**: `string`

The hero description or subtitle text.

### primaryCta (required)

**type**: `object`

The primary call-to-action button.

Properties:

- `title` (`string`): The button text
- `href` (`string`): The URL the button links to

### secondaryCta (required)

**type**: `object`

The secondary call-to-action button.

Properties:

- `title` (`string`): The button text
- `href` (`string`): The URL the button links to

## Example

```mdx
<Hero
  announcement={{
    title: "New tool!",
    ctaTitle: "Starlight Page Actions",
    href: "https://starlight-page-actions.dlcastillop.com",
  }}
  title={{
    fistPart: "Components that make",
    highlightedPart: "your docs shine",
  }}
  description="A collection of marketing components designed specifically for Starlight."
  primaryCta={{
    title: "Get Started",
    href: "docs/getting-started",
  }}
  secondaryCta={{
    title: "More developer tools",
    href: "https://www.patreon.com/dlcastillop/shop",
  }}
/>
```