@php
$classesBotaoVitrine = $classesBotaoVitrine ?? ''; // inicializador caso alguma página não envie o atributo.
$centralizarTexto = $centralizarTexto ?? false; // inicializador caso alguma página não envie o atributo.
$centralizarTexto = filter_var($centralizarTexto, FILTER_VALIDATE_BOOLEAN);

$textCenter = '';
$ml = 'ml-[10vw]';
if ($centralizarTexto) {
    $ml = 'items-center';
    $textCenter = 'text-center';
}
@endphp
<div class="h-svh relative">
    {{-- Cartão equivalente a um item do carrossel. --}}
    <div class="overflow-hidden h-full">
        {{-- Imagem de fundo, por ser absoluta pode ficar dentro do cartão sem problemas. --}}
        <img src="{{ asset('images/composicao2@2x.webp') }}" alt="Imagem de Fundo" class="absolute inset-0 w-full h-full object-cover z-[-1]">
        <!-- Texto e botão -->
        <div {{ $attributes->merge(['class' => "box-border h-full flex flex-col justify-center items-start $ml"]) }}>
            <p class="m-0 text-sky-blue tracking-[7.7px]">BEM - VINDOS!</p>
            <h1 {{ $attributes->merge([ 'class' => "block font-extrabold leading-none max-w-80 sm:max-w-none my-3 text-13xl text-white sm:text-41xl $textCenter"]) }}>
                Pessoas de<br>valor criando<br>marcas de valor.</h1>
            <button {{ $attributes->merge(['class' => "text-midnightblue-100 bg-white rounded-full px-8 py-4 font-bold text-sm sm:text-base $classesBotaoVitrine"]) }}>
                Conheça a Start
            </button>
        </div>
    </div>

    {{-- Paginação, controle do carrossel. --}}
    <div class="px-8 py-4 backdrop-blur-[15px] backdrop-brightness-[105%] border-white rounded-full border border-solid box-border
        absolute bottom-[18vw] sm:bottom-[10vw] right-[10vw] hidden sm:flex gap-x-4">
        <img alt="Retroceder uma página" src="{{ asset('images/arrow-left.svg') }}" />
        <img src="{{ asset('images/ellipse-7.svg') }}" alt="Cartão ativo."/>
        <img src="{{ asset('images/ellipse-13.svg') }}" alt="Cartão inativo."/>
        <img src="{{ asset('images/ellipse-13.svg') }}" alt="Cartão inativo."/>
        <img src="{{ asset('images/ellipse-13.svg') }}" alt="Cartão inativo."/>
        <img alt="Avançar uma página" src="{{ asset('images/arrow-right.svg') }}" />
    </div>
</div>