@aware(['page'])
<div>
    <div class="theme-max-w mx-auto my-4 px-5">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <img src="" data-src="{{asset('storage/'.$image)}}" alt="" class="w-full object-cover rounded-md lazy"/>
            </div>
            <div class="my-auto">
                <h1 class="mb-3 theme-text-blue text-2xl md:text-3xl lg:text-4xl font-semibold"> {{$title}} </h1>
                <div class="text-[#393939] text-lg font-semibold mb-3">{!! $description !!}</div>
                <div class="hs-accordion-group">
                    @foreach($accordions as $accordion)
                        <div class="hs-accordion bg-white border border-transparent rounded-xl mb-2">
                            <button class="hs-accordion-toggle inline-flex justify-between items-center gap-x-6 w-full font-semibold text-start text-gray-800 py-2 hover:text-gray-500">{{$accordion['title']}}
                                <i class="fa-solid fa-plus hs-accordion-active:hidden block"></i>
                            </button>
                            <div class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300">
                                <div class="py-2 content">
                                    {!! $accordion['content'] !!}
                                </div>
                            </div>
                        </div>
                        <hr class="border-[#1A3884]">
                    @endforeach
                </div>
                @if($buttonText)
                    <div class="text-center mt-4">
                        <a href="{{$link}}"><button class="px-6 py-2 theme-bg-blue text-white rounded hover:bg-blue-700 transition duration-300">{{$buttonText}}</button></a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>