Bagian pahlawan ini memiliki dampak visual yang kuat dengan video berulang yang ditempatkan di seluruh latar belakang. Dengan memutar video citra merek atau video demo produk di latar belakang, Anda dapat sangat menarik perhatian pengguna.

Pratinjau

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

Kasus & Fitur Penggunaan

Halaman Landing Produk: Menyampaikan nilai secara intuitif dengan menampilkan produk aktual beraksi di latar belakang.
Situs web perusahaan: Ciptakan kesan profesional dengan gambar sinematik yang menyampaikan suasana merek Anda.
Halaman pengumuman acara: Menyampaikan kegembiraan dan kegembiraan dari acara-acara yang lalu dan meningkatkan motivasi untuk berpartisipasi.
Fitur:
- Dengan menggunakan object-cover, video menjadi responsif sehingga menutupi seluruh latar belakang berapa pun ukuran layarnya.
- Hamparan hitam transparan (bg-black/50) ditempatkan di atas video untuk memastikan visibilitas teks.
- Dengan menentukan atribut playsinline, game akan dimainkan secara inline sebagai latar belakang, bukan pemutaran layar penuh bahkan di perangkat iOS.

Poin-poin penting dari desain dan UX (Desain & UX)

Memastikan Kontras: Karena kecerahan video berubah, penting untuk menyesuaikan opacity overlay agar teks selalu dapat dibaca.
Pertimbangan kecepatan memuat: File video cenderung berat. Sebaiknya siapkan file MP4 dengan kapasitas lebih kecil (sebaiknya juga menggunakan WebM) dan atur juga gambar poster (atribut poster).
Animasi: Tambahkan animasi fade-in-up ke elemen konten untuk memberikan pengalaman yang kaya saat memuat halaman.

Cara menyesuaikan (Panduan Kustomisasi)

Ubah kepadatan overlay: Menyetel bg-black/50 dari <div class="absolute inset-0 z-10 bg-black/50"></div> ke bg-black/70 akan membuatnya lebih gelap, dan menyetel bg-black/30 akan membuatnya lebih terang.
Warna overlay: Anda juga dapat membuat overlay berwarna agar sesuai dengan warna merek Anda, seperti bg-blue-900/60.
Sesuaikan tinggi: Anda dapat mengontrol tinggi bagian dengan mengubah h-[600px] menjadi h-screen (layar penuh), atau min-h-[80vh], dll.

kode implementasi (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; }
-->

Dukungan Peramban

Bekerja dengan baik dengan versi terbaru browser modern (Chrome, Firefox, Safari, Edge).
Dengan menambahkan atribut playsinline, maka secara otomatis akan diputar inline di Safari versi iOS.
Putar otomatis mungkin diblokir jika “Mode Daya Rendah” iOS diaktifkan atau jika lingkungan komunikasi buruk. Oleh karena itu, pastikan untuk menyetel gambar alternatif di atribut poster.