Hero

Crie seções de página de destino impactantes com banners hero e fundos.

Importação

import { Hero } from 'asterui'

Exemplos

Hero Básico

Seção hero simples com título e subtítulo.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero } from 'asterui'

function App() {
  return (
      <Hero contentClassName="text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Hello there</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
        </div>
      </Hero>
    )
}

export default App

Hero com Botão CTA

Seção hero com botão de chamada para ação.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero contentClassName="text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Hello there</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

Hero com Figura

Hero com imagem lateral ou elemento figure.

Box Office News!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero contentClassName="flex-col lg:flex-row-reverse">
        <img
          src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
          alt="Hero"
          className="max-w-sm rounded-lg shadow-2xl"
        />
        <div>
          <h1 className="text-5xl font-bold">Box Office News!</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

Hero com Sobreposição de Fundo

Hero com imagem de fundo e efeito de sobreposição.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero
        overlay
        contentClassName="text-center text-neutral-content"
        style={{
          backgroundImage: "url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
        }}
      >
        <div className="max-w-md">
          <h1 className="mb-5 text-5xl font-bold">Hello there</h1>
          <p className="mb-5">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

API

Propriedade	Descrição	Tipo	Padrão
`children`	Conteúdo do hero	`React.ReactNode`	-
`overlay`	Mostrar efeito de sobreposição (para imagens de fundo)	`boolean`	`false`
`contentClassName`	Classes CSS para o wrapper de conteúdo	`string`	-
`className`	Classes CSS adicionais	`string`	-
`style`	Estilos inline (útil para imagens de fundo)	`React.CSSProperties`	-

Acessibilidade

Use elementos de cabeçalho semânticos (h1, h2) para títulos hero
Garanta contraste de cor suficiente entre texto e fundo
Forneça texto alternativo para imagens hero
Torne botões CTA acessíveis via teclado