@props(['img'=>'#', 'alt'=>'alt', 'title'=>'', 'url'=>'#', 'color'=> '', 'border'=>'', 'hover'=> '', 'catalogue' => '' ])

<div class="relative self-start">
    <img src="{{$img}}" alt="{{$alt}}" loading="lazy"
         class="absolute -right-10 md:right-10 -top-14 md:-top-24 w-40 md:w-auto lg:right-0">
    <h2 class="uppercase {{$color}} font-bold text-4xl mb-0 lg:mb-10 px-6 lg:ml-16">{!! $title !!}
    </h2>
    <div class="shadow-xl rounded-lg text-lg p-6 lg:p-10">
        <div class="space-y-5 text-black text-opacity-50">
            {{$slot}}
        </div>
        <div
            class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0 text-sm mt-10">
            <a href="{{$url}}" target="_blank"
               class="flex-shrink-0 border {{$border}} {{$color}} hover:border-none hover:{{$hover}} hover:text-white transition-colors py-2.5 px-5 rounded-full inline-flex items-center space-x-3 ">
                <svg width="16" height="19" viewBox="0 0 16 19" fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 1.5L7.5 16.5" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"/>
                    <path d="M14.5 18L1 18" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"/>
                    <path d="M7.5 16.5L11.0832 12.9168" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"/>
                    <path d="M7.5 16.5L3.91677 12.9168" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"/>
                </svg>
                <span class="uppercase">Catalogue</span>
            </a>
        </div>
    </div>
</div>