@props([
    'title' => 'Slide',
    'fromColor' => 'blue-100',
    'toColor' => 'blue-50',
    'height' => 'xl:h-fit h-full',
    'width' => 'xl:w-fit w-full',
    'image' => '',
])

<div
    class="flex items-center justify-center overflow-hidden transition-shadow duration-300 cursor-pointer swiper-slide hover:shadow-xl">
    <div
        class="{{ $height }} {{ $width }} bg-gradient-to-tr from-{{ $fromColor }} to-{{ $toColor }} 
        flex items-center justify-center text-blue-900 font-semibold text-xl">
        <section>
            <div>
                <img src="{{ asset($image) }}" class="z-10 object-cover w-[300px] h-[200px]" alt="">
            </div>
        </section>
    </div>
</div>