@if(!empty($banners))
<div class="relative overflow-hidden rounded-xl mb-8">
    <div x-data="{ current: 0 }" x-init="setInterval(() => current = (current + 1) % {{ count($banners) }}, 5000)" class="flex transition-transform duration-500" :style="'transform: translateX(-' + current * 100 + '%)'">
        @foreach($banners as $banner)
        <div class="min-w-full">
            <div class="bg-gradient-to-r from-primary to-secondary rounded-xl p-8 text-white">
                <h3 class="text-2xl font-bold">{{ $banner['title'] ?? '' }}</h3>
                <p class="mt-2 opacity-90">{{ $banner['subtitle'] ?? '' }}</p>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif