@extends('client.raffles.layouts.app')
@section('content')
    <div class="services-banner">
        <img src="{{ $page->banner }}" width="1425" height="356" alt="Gallery ">

    </div>

    <section class="section ">
        <div class="flex flex-col gap-5 justify-center items-center text-center">
            <h2 class="text-60 md:text-30 text-sec">Gallery</h2>
            <div class="title-line mx-auto"></div>


        </div>
    </section>
    <section class="pt-40 pb-40 ">
        <div class="container">

            <div class="gallery" id="gallery">
                @foreach ($page->images as $image)
                    <img src="{{ asset($image) }}" alt="img1">
                @endforeach
            </div>



        </div>
        <div class="lightbox" id="lightbox">
            <span class="close-btn" onclick="closeLightbox()">✖</span>
            <button class="nav-button prev" onclick="changeSlide(-1)">❮</button>
            <img id="lightbox-img" src="" alt="fullscreen">
            <button class="nav-button next" onclick="changeSlide(1)">❯</button>
        </div>

    </section>
@endsection