@extends('frontend.layouts.app')

@section('title', 'Gallery - Ali Foods Catering')

@section('content')

<!-- Page Header -->
@include('frontend.sections.page-banner',[
    'title' => 'Our Gallery',
    'subtitle' => 'Every event tells a story. Browse our gallery to see the quality, creativity, and excellence behind every celebration.'
])

<section class="gallery-section">
    <div class="container">

        <div class="row g-4">

            @foreach($gallery as $item)

            <div class="col-lg-4 col-md-6">

                <a href="{{ asset($item->image) }}"
                   data-lightbox="gallery"
                   data-title="{{ $item->title }}">

                    <div class="gallery-card">

                        <img src="{{ asset($item->image) }}" alt="">

                        <div class="gallery-overlay">

                            <h4>{{ $item->title }}</h4>

                            <span>{{ $item->category }}</span>

                        </div>

                    </div>

                </a>

            </div>

            @endforeach

        </div>

    </div>
</section>


@endsection