@props(["title","page"])

<section class="relative w-full bg-gray-100 mt-1 max-w-[80rem] mx-auto rounded-3xl overflow-hidden">
    <div class="relative z-10 max-w-6xl w-full mx-auto px-6 lg:px-4 py-7 sm:py-14">
        <div class="flex flex-col max-w-lg p-6 md:p-16 bg-gray-300/30 backdrop-blur-sm rounded-xl">
            <h1 class="font-semibold text-gray-800 text-2xl md:text-3xl">{{ $title }}</h1>
            <ol class="flex items-center whitespace-nowrap mt-6">
                <li class="inline-flex items-center">
                    <a class="flex items-center text-sm text-gray-500 hover:text-primary-600 focus:outline-hidden focus:text-primary-600"
                        href="/" wire:navigate>
                        Home
                    </a>
                    <svg class="shrink-0 size-5 text-gray-400 dark:text-neutral-600 mx-2" width="16" height="16"
                        viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
                    </svg>
                </li>
                <li class="inline-flex items-center text-sm font-semibold text-gray-800 truncate"
                    aria-current="page">
                    {{ $page  }}
                </li>
            </ol>
        </div>
    </div>
</section>