@props(['image'=>'','titre','textColor'=>'text-red-500','sary'=>''])
<div class="flex flex-col items-center -mt-12">
    <div class="ring-2 ring-white translate-y-9 flex justify-center items-center font-bold text-3xl {{$textColor}} bg-white w-40 h-40 min-h-40 min-w-40 max-h-40 max-w-40 rounded-full overflow-hidden shadow-xl">
            @if($image==='sary')
                <x-img-mpiandry :sary="$sary"></x-img-mpiandry>
            @else
            {{ $image }}
            @endif
    </div>
    <div class=" w-full bg-white rounded shadow border py-12 px-6 flex flex-col items-center space-y-8">
            <div class="w-full text-center">
                <span class="fas fa-eye text-2xl mr-3 text-gray-400"></span>
                <span class="text-2xl">{{ $titre }}</span>
            </div>
            <div class="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                {{ $slot }}
            </div>
            <div class="text-center ">
                @if(isset($footer)){{ $footer }}@endif
            </div>
    </div>
</div>