@aware(['page'])
<div>
    <div class="theme-max-w mx-auto my-4 px-5">
        <div class="relative bg-white rounded-3xl overflow-hidden shadow-lg min-h-[600px] flex flex-col md:flex-row">
            <div class="absolute inset-0">
                <img class="w-full h-full object-cover lazy" src="" data-src="{{asset('storage/'.$image)}}" alt=""/>
            </div>
            <div class="absolute left-6 sm:left-8 text-white z-10 top-6 md:top-auto md:bottom-8">
                <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-2">{{$title}}</h2>
                <a href="{{$link}}"><div class="text-md sm:text-lg md:text-xl font-semibold flex items-center gap-2">{{$linktext}} <span class="text-2xl">→</span></div></a>
            </div>
            <div class="relative md:absolute top-auto md:top-1/2 md:right-0 md:transform md:-translate-y-1/2 w-full md:w-[33%] bg-[#E6F0FA] rounded-t-none md:rounded-t-none md:rounded-l-3xl p-6 sm:p-8 z-20 mt-auto">
                <div class="uppercase text-xs text-gray-500 mb-1 tracking-wide">Product Category</div>
                <div class="text-xl sm:text-2xl md:text-3xl font-bold theme-text-blue mb-4 leading-tight"> {{$productTitle}} </div>
                <div class="content">
                    {!! $content !!}
                </div>
                <a href="{{$buttonLink}}"><button class="theme-bg-blue text-white px-6 py-2 rounded-full uppercase text-xs font-bold tracking-wide hover:bg-[#0D3E73] transition">{{$buttonText}}</button></a>
            </div>
        </div>
    </div>
</div>