Esta sección de héroe tiene un fuerte impacto visual con un video en bucle colocado de fondo. Al reproducir un vídeo con la imagen de la marca o un vídeo de demostración del producto en segundo plano, puede atraer fuertemente la atención de los usuarios.

Vista previa

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 y características

Página de inicio del producto: Transmita valor de forma intuitiva mostrando el producto real en acción en segundo plano.
Sitio web corporativo: Crea una impresión profesional con imágenes cinematográficas que transmiten la atmósfera de tu marca.
Página de anuncio del evento: transmite la emoción y el entusiasmo de eventos pasados y aumenta la motivación para participar.
Características:
- Al usar “object-cover”, el video responde de modo que cubre todo el fondo independientemente del tamaño de la pantalla.
- Se coloca una superposición negra translúcida (bg-black/50) sobre el video para garantizar la visibilidad del texto.
- Al especificar el atributo playsinline, el juego se reproducirá en línea como fondo en lugar de reproducirse en pantalla completa, incluso en dispositivos iOS.

Puntos claves del diseño y UX (Design & UX)

Garantizar el contraste: dado que el brillo de los videos cambia, es importante ajustar la opacidad de la superposición para que el texto sea siempre legible.
Consideración sobre la velocidad de carga: Los archivos de vídeo tienden a ser pesados. Le recomendamos que prepare un archivo MP4 con menor capacidad (preferiblemente también use WebM) y también configure una imagen de póster (atributo poster).
Animaciones: agregue animaciones que aparecen gradualmente a los elementos de contenido para brindar una experiencia rica al cargar la página.

Cómo personalizar (Guía de personalización)

Cambiar la densidad de superposición: Configurar bg-black/50 de <div class="absolute inset-0 z-10 bg-black/50"></div> en bg-black/70 lo hará más oscuro, y configurar bg-black/30 lo hará más brillante.
Colorea la superposición: También puedes hacer que la superposición tenga un color que combine con el color de tu marca, como bg-blue-900/60.
Ajustar altura: Puede controlar la altura de la sección cambiando h-[600px] a h-screen (pantalla completa), o min-h-[80vh], etc.

código de implementación (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; }
-->

Soporte del navegador

Funciona bien con las últimas versiones de los navegadores modernos (Chrome, Firefox, Safari, Edge).
Al agregar el atributo playsinline, se reproducirá automáticamente en línea en la versión iOS de Safari.
La reproducción automática puede bloquearse si el “Modo de bajo consumo” de iOS está activado o si el entorno de comunicación es deficiente. Por lo tanto, asegúrese de configurar una imagen alternativa en el atributo “póster”.