@props(['title', 'subtitle', 'image'])

<section 
    class="relative h-[80vh] bg-cover bg-center flex items-center justify-center text-white text-center"
    style="background-image: url('{{ $image }}')"
    data-aos="fade-in"
>
    <div class="bg-black bg-opacity-60 absolute inset-0 z-0"></div>
    <div class="relative z-10 px-6">
        <h1 class="text-4xl md:text-6xl font-bold mb-4">{{ $title }}</h1>
        <p class="text-xl md:text-2xl max-w-2xl mx-auto">{{ $subtitle }}</p>
    </div>
</section>