Esta seção de herói tem um forte impacto visual com um vídeo em loop colocado em todo o fundo. Ao reproduzir um vídeo de imagem de marca ou vídeo de demonstração de produto em segundo plano, você pode atrair fortemente a atenção dos usuários.

Visualização

Discover the New Digital Experience

Take your business to the next stage with the latest technology and sophisticated design. Let’s create the future together.

Get Started

Watch Demo

Casos de uso e recursos

Página de destino do produto: transmita valor de forma intuitiva, mostrando o produto real em ação em segundo plano.
Site corporativo: crie uma impressão profissional com imagens cinematográficas que transmitem a atmosfera da sua marca.
Página de anúncio do evento: Transmita a emoção de eventos anteriores e aumente a motivação para participar.
Recursos:
- Ao usar object-cover, o vídeo responde de forma que cobre todo o fundo, independentemente do tamanho da tela.
- Uma sobreposição preta translúcida (bg-black/50) é colocada sobre o vídeo para garantir a visibilidade do texto.
- Ao especificar o atributo playsinline, o jogo será jogado inline como plano de fundo em vez de ser reproduzido em tela cheia, mesmo em dispositivos iOS.

Pontos-chave de design e UX (Design & UX)

Garantindo Contraste: Como o brilho dos vídeos muda, é importante ajustar a opacidade da sobreposição para que o texto esteja sempre legível.
Considerações sobre a velocidade de carregamento: os arquivos de vídeo tendem a ser pesados. Recomendamos que você prepare um arquivo MP4 com menor capacidade (de preferência use também WebM) e também defina uma imagem de pôster (atributo poster).
Animações: adicione animações de aumento gradual aos elementos de conteúdo para fornecer uma experiência rica no carregamento da página.

Como personalizar (Guia de Personalização)

Alterar a densidade de sobreposição: Definir bg-black/50 de <div class="absolute inset-0 z-10 bg-black/50"></div> para bg-black/70 o tornará mais escuro, e definir bg-black/30 o tornará mais claro.
Colorir a sobreposição: Você também pode deixar a sobreposição colorida para combinar com a cor da sua marca, como bg-blue-900/60.
Ajustar altura: Você pode controlar a altura da seção alterando h-[600px] para h-screen (tela cheia) ou min-h-[80vh], etc.

código de implementação (Implementation)

<section class="relative h-screen min-h-[600px] w-full flex items-center justify-center overflow-hidden font-sans">

<!-- Video background -->
<video
  autoplay
  loop
  muted
  playsinline
  poster="/assets/video-poster.jpg"
  class="absolute z-0 w-auto min-w-full min-h-full max-w-none object-cover"
>
  <source src="/assets/hero-background.mp4" type="video/mp4" />
  <source src="/assets/hero-background.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

<!-- Overlay (dark layer to improve visibility) -->
<div class="absolute inset-0 z-10 bg-black/60"></div>

<!-- Content -->
<div class="relative z-20 max-w-4xl mx-auto px-6 text-center text-white">
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-tight mb-6 animate-fade-in-up">
    Discover the New <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Digital Experience</span>
  </h1>
  <p class="text-lg sm:text-xl md:text-2xl text-gray-200 mb-10 max-w-2xl mx-auto opacity-0 animate-fade-in-up animation-delay-200">
    Take your business to the next stage with the latest technology and sophisticated design. Let's create the future together.
  </p>
  <div class="flex flex-col sm:flex-row items-center justify-center gap-4 opacity-0 animate-fade-in-up animation-delay-400">
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors duration-300 shadow-lg hover:shadow-xl text-lg">
      Get Started
    </a>
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white border border-white/30 font-bold rounded-full hover:bg-white/20 transition-colors duration-300 text-lg flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      Watch Demo
    </a>
  </div>
</div>
</section>

<!-- 
* When using Tailwind CSS, you need to add an animation class for fade-in-up to 
tailwind.config.js or define it in your custom CSS.

CSS Example:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
-->

Suporte ao navegador

Funciona bem com as versões mais recentes dos navegadores modernos (Chrome, Firefox, Safari, Edge).
Ao adicionar o atributo playsinline, ele será automaticamente reproduzido inline na versão iOS do Safari.
A reprodução automática pode ser bloqueada se o “Modo de baixo consumo” do iOS estiver ativado ou se o ambiente de comunicação for ruim. Portanto, certifique-se de definir uma imagem alternativa no atributo poster.