@extends('layoutsutama.master3')
@section('content')
        <!-- dari sini -->

<section class="relative pb-36 pt-44">
    <div class="container mx-auto px-4 max-w-7xl">
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-14">
            
            <!-- LEFT: Banner Image -->
             <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
            <!-- <div class="lg:col-span-3"> -->
                <!-- <div class="bg-white rounded-xl shadow-lg overflow-hidden"> -->
                    <img src="{{ asset('assets/images/category/WEB5K.webp') }}" alt="Merbabu Sky Run"
                        class="w-full object-cover aspect-[16/7]">
                </div>
            <!-- </div> -->
            <!-- </div> -->
            </div>

            <!-- RIGHT: Event Info Card -->
             <!-- <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
            <div class="lg:col-span-2 ml-0 lg:ml-4">
                <div class="bg-white rounded-xl shadow-lg p-6 h-full flex flex-col justify-between">
                    <div class="space-y-4">
                        <h2 class="text-xl font-bold">MERBABU SKY RUN 2025</h2>
                        <div class="text-sm text-gray-700 space-y-3">
                            <div class="flex items-start gap-2">
                                <span>📅</span>
                                <span>September 6, 2025 - September 7, 2025</span>
                            </div>
                            <div class="flex items-start gap-2">
                                <span>📍</span>
                                <span>SUNSETFALLS GARDENS & RESORT</span>
                            </div>
                        </div>
                    </div>
                    <div class="pt-6 mt-6 border-t text-xs text-gray-600">
                        <p class="font-medium">Organizer By</p>
                        <p class="font-bold text-black">SUNSETFALLS</p>
                    </div>
                </div>
            </div>
            </div>
            </div> -->

        </div>
    </div>
</section>






@endsection