@aware(['page'])
<div>
    <div class="theme-max-w mx-auto px-5 py-8">
        <div class="bg-white shadow-lg grid grid-cols-1 md:grid-cols-2">

            <div class="block md:hidden h-48 sm:h-56 w-full relative">
                <div class="absolute inset-0 bg-gray-200"></div>
                <img class="absolute inset-0 w-full h-full object-cover lazy" src="" data-src="{{asset('storage/'.$image)}}" alt="" />
            </div>

            <div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-center space-y-8 order-2 md:order-1">
                <h1 class="theme-text-blue text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight">{{$title}}</h1>

                <div class="relative space-y-11">
                    @foreach($timelines as $timeline)
                        <div class="relative pl-14">
                            <div class="absolute left-0 top-0 w-10 h-10 theme-bg-blue rounded-full flex items-center justify-center z-10">
                                <i class="{{$timeline['icon']}} text-white text-base"></i>
                            </div>
                            @if(!$loop->last)
                                <div class="absolute left-[1.15rem] top-10 w-[2px] h-[calc(100%+0.75rem)] bg-gray-300"></div>
                            @endif
                            <h2 class="text-lg font-semibold text-gray-900 mb-1">{{$timeline['title']}}</h2>
                            <p class="text-gray-600 text-sm">
                                {{$timeline['description']}}
                            </p>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="hidden md:block relative order-1 md:order-2">
                <div class="absolute inset-0 bg-gray-200"></div>
                <img class="absolute inset-0 w-full h-full object-cover angled-image lazy" src="" data-src="{{asset('storage/'.$image)}}" alt="" />
            </div>
        </div>
    </div>
</div>