@props(['data'])

<!-- BreadCrumbs -->
<section style="background-image: url('{{ asset('images/' . $data->image) }}')"
    class=" breadcrumbs h-[300px] bg-center bg-[length:100%] transition-all duration-[3000ms]">
    <!-- overlay -->
    <div class="h-full w-full bg-black bg-opacity-50">
        <div
            class="2xl:container 2xl:mx-auto px-2 md:px-[20px] lg:px-[105px] flex h-full items-center justify-between ">
            <!-- content -->
            <div class="">
                <h1 class="header text-[48px] font-semibold uppercase text-white -translate-y-[15px] opacity-0 transition-all duration-[800ms] delay-[3000ms]">
                    {{ $data->name }}
                </h1>
                <p class="sub-header text-[14px] font-medium text-white -translate-y-[15px] opacity-0 transition-all   duration-200 delay-[3800ms]">
                    <a href="index.html" class="text-red-500">Home</a> / {{ $data->permalink }}
                </p>
            </div>
            <p class="company hidden max-w-[462px] text-end text-[16px] font-medium text-white sm:block -translate-y-[15px] opacity-0 transition-all duration-200 delay-[3800ms]">
                {{ $data->description }}
            </p>
        </div>
    </div>
</section>

@push('js')
<script>
    $(document).ready(function(){
        $('.breadcrumbs').removeClass('bg-[length:100%]').addClass('bg-[length:120%]')
        $('.header').removeClass('-translate-y-[15px] opacity-0').addClass('translate-y-0 opacity-100')
        $('.sub-header').removeClass('-translate-y-[15px] opacity-0').addClass('translate-y-0 opacity-100')
        $('.company').removeClass('-translate-y-[15px] opacity-0').addClass('translate-y-0 opacity-100')
    })
    
</script>
    
@endpush