@aware(['page'])
@pushonce('scripts')
    <meta name="robots" content="noindex">
@endpushonce
<div class="bg-midnightblue-100 pt-[calc(var(--header-height)_+_5rem)] pb-80 sticky top-0">
    <div class="max-w-[85.375rem] mx-auto">
        <div class="flex flex-col items-center">
            <div class="text-center px-10">
                <div class="uppercase  tracking-33 text-xs text-white mb-1 max-md:mb-3">{{ $sobrancelha }}</div>
                <h1 class="mt-5 font-bricolage font-bold text-white max-w-4xl text-3xl md:text-5xl text-balance">{{ $titulo }}</h1>
            </div>
        </div>
        <div class="hidden md:block">
            <x-star class="absolute left-[10%] top-[5%]" width="48px" height="48px" color="white"/>
            <x-star class="absolute left-[30%] bottom-[45%]" width="48px" height="48px" color="yellow"/>
            <x-star class="absolute right-[10%] top-[15%]" width="32px" height="32px" color="white"/>
            <x-star class="absolute right-[15%] bottom-[55%]" width="60px" height="60px" color="yellow"/>
        </div>
        <div class="md:hidden">
            <x-star class="absolute left-[16%] top-[4%]" width="48px" height="48px" color="white"/>
            <x-star class="absolute right-[12%] bottom-[35%]" width="48px" height="48px" color="yellow"/>
            <x-star class="absolute right-[6%] bottom-[50%]" width="24px" height="24px" color="white"/>
        </div>
    </div>
</div>
<x-corpo>
    <div class="bg-white">
        <div class="px-10 max-w-3xl sm:mx-auto text-3xl text-center text-midnightblue-100 font-bricolage font-bold">
            {!! str($descricao)->sanitizeHtml() !!}
        </div>
    </div>

    <div class="py-10 sm:py-20 bg-white">
        <div class="mx-3 mb-6 sm:mx-10">
            <div class="container mx-auto text-center px-6">
                @if(!empty($novidadesSobrancelha))
                    <div
                        class="text-blue-800 text-xs tracking-widest uppercase text-center mx-auto">{{ $novidadesSobrancelha }}</div>
                @endif
                @if(!empty($novidadesTitulo))
                    <h2 class="max-w-[37.5rem] text-center mx-auto text-3xl md:text-5xl font-extrabold text-midnightblue-100 mt-4 font-bricolage mb-10">
                        {{ $novidadesTitulo }}
                    </h2>
                @endif
            </div>
            <x-ultimas-novidades
                :botaoTexto="$novidadesBotao ?? null"
                :estilo="'compacto'"
                :limit="3"
            />
        </div>
    </div>
</x-corpo>