@aware(['page'])
<div>
    <div class="theme-max-w mx-auto px-5">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="my-auto">
                <div class="space-y-3 font-content mb-3">
                    <div class="flex justify-between border-b pb-2 text-sm sm:text-base">
                        <span class="font-semibold text-gray-700">Project</span>
                        <span class="text-gray-600 text-right">{{$project}}</span>
                    </div>
                    <div class="flex justify-between border-b pb-2 text-sm sm:text-base">
                        <span class="font-semibold text-gray-700 ">Location</span>
                        <span class="text-gray-600 text-right ">{{$location}}</span>
                    </div>
                    <div class="flex justify-between border-b pb-2 text-sm sm:text-base">
                        <span class="font-semibold text-gray-700">Area</span>
                        <span class="text-gray-600 text-right">{{$area}}</span>
                    </div>
                    <div class="flex justify-between border-b pb-2 text-sm sm:text-base">
                        <span class="font-semibold text-gray-700">Completed</span>
                        <span class="text-gray-600 text-right">{{$completed}}</span>
                    </div>
                </div>
                <div class="mb-3 text-gray-600 text-sm font-paragraph">{!! $content !!}</div>
                <a href="{{$link}}">
                    <button class="font-button bg-black text-white px-5 py-2 text-sm rounded hover:bg-gray-800 transition mb-3 mt-5">{{$buttonText}}</button>
                </a>
            </div>

            <div class="flex justify-center items-start mt-0 md:mt-26 pt-0 md:pt-32 p-4">
                <a href="{{asset('storage/'.$image1)}}" data-lightbox="project-details">
                    <img src="" data-src="{{asset('storage/'.$image1)}}" alt="" class="rounded-lg w-full object-cover shadow-md lazy"/>
                </a>
            </div>

            <div class="flex justify-center items-start p-4">
                <a href="{{asset('storage/'.$image2)}}" data-lightbox="project-details">
                    <img src="" data-src="{{asset('storage/'.$image2)}}" alt="" class="rounded-lg w-full object-cover shadow-md lazy" />
                </a>
            </div>
        </div>
    </div>
</div>