Hero

Apresentação

O componente Hero é responsável por criar seções de destaque que ocupam uma área significativa da tela, geralmente usadas para apresentar o conteúdo principal de uma página. Ele suporta imagens de fundo com overlay e oferece uma estrutura flexível para conteúdo de destaque.

Quando usar

• Para seções de destaque de páginas
• Para apresentação de produtos principais
• Para banners promocionais
• Para páginas de landing
• Para apresentação de serviços
• Para seções de boas-vindas
• Para destaque de campanhas
• Para apresentação de marcas

Forma básica de uso

import { Hero, View, Text, Button, Image } from 'eitri-luminus';

// Hero básico
<Hero>
  <Hero.Content>
    <Text as="h1">Título Principal</Text>
    <Text>Descrição do conteúdo</Text>
  </Hero.Content>
</Hero>

// Hero com imagem de fundo
<Hero overlaySrc="/imagem-fundo.jpg">
  <Hero.Content>
    <Text as="h1">Bem-vindo</Text>
    <Text>Descrição com imagem de fundo</Text>
  </Hero.Content>
</Hero>

// Hero com overlay personalizado
<Hero 
  overlaySrc="/banner.jpg"
  overlayClassName="bg-opacity-80"
>
  <Hero.Content>
    <Text as="h1">Produto em Destaque</Text>
    <Text>Descrição do produto</Text>
  </Hero.Content>
</Hero>

// Hero com classes personalizadas
<Hero className="hero-lg">
  <Hero.Content className="text-center">
    <Text as="h1">Serviços</Text>
    <Text>Nossos serviços em destaque</Text>
  </Hero.Content>
</Hero>

// Hero para landing page
<Hero overlaySrc="/hero-landing.jpg">
  <Hero.Content className="text-white">
    <Text as="h1">Transforme sua ideia em realidade</Text>
    <Text>Descrição da solução</Text>
    <Button variant="primary">Começar</Button>
  </Hero.Content>
</Hero>

// Hero com id personalizado
<Hero id="hero-principal" overlaySrc="/imagem.jpg">
  <Hero.Content>
    <Text as="h1">Conteúdo Principal</Text>
    <Text>Descrição detalhada</Text>
  </Hero.Content>
</Hero>

// Hero para apresentação de marca
<Hero 
  overlaySrc="/brand-bg.jpg"
  overlayClassName="bg-opacity-70"
>
  <Hero.Content className="text-center">
    <Text as="h1">Nossa Marca</Text>
    <Text>História e valores</Text>
  </Hero.Content>
</Hero>

// Hero com conteúdo complexo
<Hero overlaySrc="/complex-bg.jpg">
  <Hero.Content>
    <View className="grid grid-cols-1 md:grid-cols-2 gap-8">
      <View>
        <Text as="h1">Título Principal</Text>
        <Text>Descrição detalhada</Text>
      </View>
      <View>
        <Image src="/featured-image.jpg" alt="Imagem" />
      </View>
    </View>
  </Hero.Content>
</Hero>

// Hero para promoção
<Hero 
  overlaySrc="/promo-bg.jpg"
  className="hero-promo"
>
  <Hero.Content className="text-white">
    <Text as="h1">Promoção Especial</Text>
    <Text>Descontos imperdíveis</Text>
    <View className="flex gap-4">
      <Button variant="primary">Ver Ofertas</Button>
      <Button variant="outline">Saiba Mais</Button>
    </View>
  </Hero.Content>
</Hero>

// Hero com overlay sem imagem
<Hero overlayClassName="bg-black bg-opacity-50">
  <Hero.Content>
    <Text as="h1">Conteúdo Simples</Text>
    <Text>Sem imagem de fundo</Text>
  </Hero.Content>
</Hero>

// Hero responsivo
<Hero 
  overlaySrc="/responsive-bg.jpg"
  className="hero-sm md:hero-lg"
>
  <Hero.Content className="text-center md:text-left">
    <Text as="h1">Conteúdo Responsivo</Text>
    <Text>Adapta-se a diferentes telas</Text>
  </Hero.Content>
</Hero>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do hero (Hero.Content)
overlaySrc	string	URL da imagem de fundo
overlayClassName	string	Classes CSS para o overlay
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Hero.Content

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do hero content
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Hero herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'hero' para estilização base
• Hero.Content usa a classe 'hero-content'
• Suporta imagens de fundo com overlay
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tipos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para seções de destaque
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de apresentação
• Funciona bem com landing pages
• Facilita a criação de banners
• Suporta overlays personalizados
• Interface flexível e adaptável
• Ideal para conteúdo principal