## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://vara.varavel.com/docs/index.md)
  - [Introduction](https://vara.varavel.com/docs/introduction/index.md)
  - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md)
    - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md)
    - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md)
    - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md)
  - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md)
    - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md)
    - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md)
    - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md)
    - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md)
    - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md)
    - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md)
  - [Templates](https://vara.varavel.com/docs/templates/index.md)
    - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md)
    - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md)
    - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md)
    - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md)
    - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md)
    - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md)
    - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md)
    - [vara-404](https://vara.varavel.com/docs/templates/404/index.md)
  - [Components](https://vara.varavel.com/docs/components/index.md)
    - [Alert](https://vara.varavel.com/docs/components/alert/index.md)
    - [Badge](https://vara.varavel.com/docs/components/badge/index.md)
    - [Button](https://vara.varavel.com/docs/components/button/index.md)
    - [Container](https://vara.varavel.com/docs/components/container/index.md)
    - [Icon](https://vara.varavel.com/docs/components/icon/index.md)
    - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md)
    - [Header](https://vara.varavel.com/docs/components/header/index.md)
    - [Hero](https://vara.varavel.com/docs/components/hero/index.md)
    - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md)
    - [Features](https://vara.varavel.com/docs/components/features/index.md)
    - [Stats](https://vara.varavel.com/docs/components/stats/index.md)
    - [FAQ](https://vara.varavel.com/docs/components/faq/index.md)
    - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md)
    - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md)
    - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md)
    - [Footer](https://vara.varavel.com/docs/components/footer/index.md)
  - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# Hero

`<vara-hero>` establishes the page's primary message. Use `layout="centered"` for a focused introduction or the default split layout for supporting media or a concise value panel.

## Usage

```html
<vara-hero
  eyebrow="New release"
  title="A headline that says what you do"
  description="One or two sentences that explain the value clearly and simply."
  primary_label="Get started"
  primary_href="/signup"
  panel_title="What makes it different"
  panel_description="A short list or summary that supports the headline."
  item_1="The first differentiator"
  item_2="The second differentiator"
/>
```

## Preview

<vara-hero
eyebrow="New release"
title="A headline that says what you do"
description="One or two sentences that explain the value clearly and simply."
primary_label="Get started"
primary_href="/signup"
secondary_label="Learn more"
secondary_href="/features"
panel_title="What makes it different"
panel_description="A short list or summary that supports the headline."
item_1="The first differentiator"
item_2="The second differentiator"
heading_level="2"
/>

## Props

| Prop                         | Default      | Description                                                       |
| ---------------------------- | ------------ | ----------------------------------------------------------------- |
| `layout`                     | `"split"`    | `split` or `centered`.                                            |
| `eyebrow`                    | `""`         | Small label above the title.                                      |
| `title`                      | `""`         | The main headline.                                                |
| `description`                | `""`         | Supporting copy below the title.                                  |
| `caption`                    | `""`         | Small text under the actions.                                     |
| `heading_level`              | `"1"`        | Title level: 1 or 2. Use `2` when embedded below another heading. |
| `primary_label`              | `""`         | Primary action label. Requires `primary_href`.                    |
| `primary_href`               | `""`         | Primary action destination.                                       |
| `primary_target`             | `""`         | Primary action link target, such as `_blank`.                     |
| `primary_icon`               | `""`         | Decorative icon on the primary action.                            |
| `primary_variant`            | `"solid"`    | Primary action style.                                             |
| `primary_color`              | `"neutral"`  | Primary action color.                                             |
| `secondary_label`            | `""`         | Secondary action label. Requires `secondary_href`.                |
| `secondary_href`             | `""`         | Secondary action destination.                                     |
| `secondary_target`           | `""`         | Secondary action link target, such as `_blank`.                   |
| `secondary_icon`             | `""`         | Decorative icon on the secondary action.                          |
| `secondary_variant`          | `"outline"`  | Secondary action style.                                           |
| `secondary_color`            | `"neutral"`  | Secondary action color.                                           |
| `image_src`                  | `""`         | An image as the supporting media.                                 |
| `image_alt`                  | `""`         | Required when `image_src` is set.                                 |
| `image_width`                | `""`         | Optional intrinsic image width.                                   |
| `image_height`               | `""`         | Optional intrinsic image height.                                  |
| `panel_icon`                 | `""`         | Icon for the text-panel media variant.                            |
| `panel_title`                | `""`         | Panel heading.                                                    |
| `panel_description`          | `""`         | Panel supporting copy.                                            |
| `item_1`, `item_2`, `item_3` | `""`         | Panel checklist items.                                            |
| `media_position`             | `"end"`      | `start` or `end`.                                                 |
| `background`                 | `"base-100"` | Section surface.                                                  |
| `container`                  | `"lg"`       | One of: xs, sm, md, lg, xl, full.                                 |
| `class`                      | `""`         | Additional section classes.                                       |

Actions render only when both their label and destination are present. Attribute text is escaped; use project components for deliberately rich hero copy.

## Centered layout

For a focused introduction without supporting media:

```html
<vara-hero
  layout="centered"
  title="Simple, honest pricing"
  description="No tiers to untangle. One plan that covers everything."
  primary_label="See pricing"
  primary_href="/pricing"
/>
```

## Using an image

```html
<vara-hero
  eyebrow="Product tour"
  title="See it in action"
  description="A guided look at the main workflow."
  image_src="/images/hero.png"
  image_alt="The main interface"
  media_position="start"
/>
```

Hero images load eagerly with a high priority since they sit above the fold.