<section class="relative overflow-hidden min-h-[100vh] bg-white dark:bg-gray-900">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-1/2 -right-1/2 rtl:-left-1/2 rtl:right-auto bg-blue-400/20 dark:bg-blue-600/20 blur-3xl w-[384px] h-[384px] rounded-full">
</div>
<div class="absolute -bottom-1/2 -left-1/2 rtl:-right-1/2 rtl:left-auto bg-purple-400/20 dark:bg-purple-600/20 blur-3xl w-[384px] h-[384px] rounded-full">
</div>
</div>
<div class="relative z-10 mx-auto px-4 pt-20 pb-16 sm:px-6 lg:px-8">
<div class="items-center grid gap-12 min-h-[80vh] lg:grid-cols-2">
<div class="space-y-8">
<h1 class="text-5xl font-bold text-gray-900 leading-tight sm:text-6xl lg:text-7xl dark:text-white">
Build the Future Today
</h1>
<p class="text-xl text-gray-600 leading-relaxed dark:text-gray-300">
Transform your ideas into reality with our cutting-edge solutions. We help businesses innovate, scale, and succeed in the digital age.
</p>
<div class="flex-col sm:flex-row flex gap-4">
<button class="transform transition-all duration-200 px-8 py-4 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">Get Started</button>
<button class="transition-all duration-200 px-8 py-4 border-2 border-gray-300 rounded-lg bg-transparent font-semibold text-gray-700 dark:border-solid dark:border-blue-400 dark:text-blue-400">Learn More</button>
</div>
<div class="grid grid-cols-3 gap-8 pt-8">
<div class="text-center">
<div class="text-3xl font-bold text-gray-900 dark:text-white">
10K+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Happy Clients
</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-gray-900 dark:text-white">
99%
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Success Rate
</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-gray-900 dark:text-white">
24/7
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Support
</div>
</div>
</div>
</div>
<div class="relative" x-data="{ imageLoaded: false }" x-init="setTimeout(() => imageLoaded = true, 300)">
<div :class="{ 'opacity-100 scale-100': imageLoaded, 'opacity-0 scale-95': !imageLoaded }" class="transition-all duration-1000 ease-out">
<div class="relative overflow-hidden rounded-3xl shadow-2xl">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Team collaboration" class="object-cover w-full h-[384px]" />
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent">
</div>
<div class="absolute top-6 left-6 rtl:right-6 rtl:left-auto bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm px-4 py-2 rounded-full shadow-lg">
<div class="items-center space-x-2 rtl:space-x-reverse flex">
<div class="animate-pulse w-[8px] h-[8px] rounded-full bg-green-500">
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Live Now</span>
</div>
</div>
</div>
</div>
<div class="absolute -top-4 -right-4 rtl:-left-4 rtl:right-auto opacity-80 animate-pulse w-[80px] h-[80px] rounded-full bg-yellow-400">
</div>
<div class="absolute -bottom-4 -left-4 rtl:-right-4 rtl:left-auto opacity-60 animate-pulse w-[64px] h-[64px] rounded-full bg-pink-400" style="animation-delay: 1s;">
</div>
</div>
</div>
</div>
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
<svg class="w-[24px] h-[24px] text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
</div>
</section>