Parallax Fixed Background code

@props([
    'image',
    'alt' => '',
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'overlayClass' => 'bg-gray-950/55',
])

@php
    /*
    | CSS fixed-background parallax. The image is applied as a fixed attachment,
    | so the viewport moves across it while scrolling.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'relative isolate flex min-h-screen overflow-hidden bg-gray-950 bg-cover bg-center bg-fixed']) }}
    style="background-image: url('{{ $image }}');"
    aria-label="{{ $alt }}"
>
    <div class="absolute inset-0 -z-10 {{ $overlayClass }}" aria-hidden="true"></div>
    <div class="absolute inset-x-0 bottom-0 -z-10 h-40 bg-gradient-to-t from-gray-950 to-transparent" aria-hidden="true"></div>

    <div class="mx-auto flex w-full max-w-7xl items-center px-6 py-16 sm:px-8 lg:px-10">
        <div class="max-w-3xl">
            @if ($eyebrow)
                <x-ui.badge variant="brand" icon="arrows-down-up" class="bg-white/12 text-white ring-1 ring-white/20 backdrop-blur dark:bg-white/12 dark:text-white">
                    {{ $eyebrow }}
                </x-ui.badge>
            @endif

            @if ($title)
                <h2 class="mt-5 text-4xl font-semibold tracking-tight text-white text-balance sm:text-6xl">{{ $title }}</h2>
            @endif

            @if ($description)
                <p class="mt-5 max-w-2xl text-base leading-7 text-gray-100/85 text-pretty sm:text-lg">{{ $description }}</p>
            @endif

            @if ($slot->isNotEmpty())
                <div class="mt-6 max-w-2xl text-base leading-7 text-gray-100/85">{{ $slot }}</div>
            @endif

            @isset($actions)
                <div class="mt-8 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
            @endisset
        </div>
    </div>
</section>