@extends('layouts.parting')
@section('content')
    <section id="hero" class="heading-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="ratio ratio-21x9">
                        <img class="w-100 rounded-4 object-fit-cover" src="assets_client/image/gambar-02.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="berita" class="auto-section">
        <div class="container-lg berita">
            <form class="row justify-content-center align-items-center gap-3 mb-5">
                <div class="col-lg-8 text-center">
                    <h1 class="text-primary fw-bold mb-lg-5">Merekam Setiap Momen, Mengabadikan Setiap Cerita.</h1>
                    <p>Setiap kegiatan yang kami dokumentasikan adalah cerita yang hidup. Temukan kembali momen-momen
                        penting yang membentuk perjalanan kami.</p>
                </div>
                <!--<div class="col-lg-4 col-md-6">-->
                <!--    <div class="input-group flex-nowrap">-->
                <!--        <input type="text" class="form-control border-primary border-width-2 text-primary py-2 px-4"-->
                <!--            placeholder="Informasi yang anda inginkan" aria-label="Username"-->
                <!--            aria-describedby="addon-wrapping">-->
                <!--        <button class="input-group-text btn-primary bg-primary border-0 btn-sm text-white"><i-->
                <!--                class="bi bi-search"></i></button>-->
                <!--    </div>-->
                <!--</div>-->
            </form>
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="masonry">
                        @foreach ($galeri as $item)
                            <div class="item-masonry">
                                <img class="rounded-4 object-fit-cover" src="{{ asset('storage/galeri/' . $item->gambar) }}"
                                    alt="galery" role="button" data-bs-toggle="modal" data-bs-target="#galeryShow">
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="galeryShow" tabindex="-1" aria-labelledby="galeryShowLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-dialog-centered">
            <div class="container w-100 vh-100 d-flex justify-content-center align-items-center">
                <img class="w-100 h-100 object-fit-contain"
                    src="https://cdn.prod.website-files.com/6573182aee3779106619e1b4/6597067d7a2c1df98ba2514e_Landing-banner-screens%20(2)%20(1).webp"
                    alt="galery" role="button" data-bs-toggle="modal" data-bs-target="#galeryShow">
            </div>
        </div>
    </div>
@endsection