@aware(['page'])
<div class="relative w-full bg-gradient-to-r from-primary to-secondary overflow-hidden">
    <div class="absolute inset-0 bg-black opacity-50"></div>
    <div class="absolute inset-0 bg-cover bg-center mix-blend-multiply" style="background-image: url('{{ asset('storage/'.$image) }}');"></div>
    <div id="jumbotronContent" class="relative max-w-5xl mx-auto px-8 py-16 sm:px-6 sm:py-24 lg:py-32 flex flex-col items-{{ $alignment }}">
        <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl drop-shadow-md text-{{$alignment}}">
            {{  $title?? $page->title?? 'Welcome' }}
        </h1>
        <p class="mt-6 max-w-3xl text-xl text-white drop-shadow-md text-{{$alignment}}">
            {{ $subheading?? 'Default description text goes here. You can customize this based on your needs.' }}
        </p>
        @if($hasButton)
            <a href="{{\URL::to($buttonLink) }}" class="mt-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-primary bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary text-{{$alignment}}">
                {{ $buttonText ?? 'Button' }}
            </a>
        @endif
    </div>
</div>