@aware(['page'])
<div class="p-8 md:py-16">
    <div class="max-w-5xl mx-auto">
        <div class="space-y-4 p-8 text-center">
            <h2 class="text-5xl font-bold">{{$heading}}</h2>
            <h3 class="text-2xl font-semibold text-gray-600">{{$subheading}}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="prose text-gray-700 w-full {{ $align == 'right' ? 'order-2' : '' }}">
                {!! $body !!}
            </div>
            <div id="image-parent" class="min-h-16 flex rounded-lg overflow-clip shadow-md {{ $align == 'right' ? 'order-1' : '' }}">
                @if ($image)
                    <img src="{{asset('storage/'.$image)}}" alt="{{$heading}}">
                @else
                    <img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
                @endif
            </div>
        </div>
    </div>
</div>