Bu kahraman bölümü, arka plana yerleştirilen döngüsel bir videoyla güçlü bir görsel etkiye sahiptir. Arka planda bir marka imajı videosu veya ürün demo videosu oynatarak kullanıcıların dikkatini güçlü bir şekilde çekebilirsiniz.
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.
<div class="absolute inset-0 z-10 bg-black/50"></div> öğesinin bg-black/50 değerini bg-black/70 olarak ayarlamak onu daha koyu hale getirecek ve bg-black/30 değerini ayarlamak onu daha parlak yapacaktır.<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; }
-->