@props(['data'])

<!-- BreadCrumbs -->
<section style="background-image: url('{{ asset('images/' . $data->image) }}')"
    class="h-[139px]  bg-cover bg-center mb-20">
    <!-- overlay -->
    <div class="h-full w-full bg-black bg-opacity-80">
        <div
            class="container mx-auto flex h-full items-center justify-between px-2 md:px-[20px] lg:px-[100px] xl:px-[169px]">
            <!-- content -->
            <div class="">
                <h1 class="text-[20px] font-semibold uppercase text-white">
                    {{ $data->name }}
                </h1>
                <p class="text-[10px] font-medium text-white">
                    <a href="index.html" class="text-[#F06728]">Home</a> / {{ $data->permalink }}
                </p>
            </div>
            <p class="hidden max-w-[462px] text-end text-[17px] font-medium text-white sm:block">
                {{ $data->description }}
            </p>
        </div>
    </div>
</section>