@extends('frontend.index')
@section('content')
    <section class="page-box">
        <div class="container page-info">
            <div class="page-bg">
                <div class="row title-row">
                    <div class="items col-sm-6 col-md-6 offset-md-1">
                        <h1 class="titles section-title wow animate__animated animate__fadeIn">Photo Gallery</h1>

                    </div>
                    <div class="items col-sm-6 col-md-4">
                        <ul class="breadcrumbs float-end d-table wow animate__animated animate__fadeIn">
                            <li class="first"><a href="{{ route('frontend.home') }}" title="Home">Home</a></li>
                            <li class="active">Photo Gallery</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="detail-section news-articles pt-0">
        <div class="container">
            <div class="row about-row mt-4">

                <div class="items detail-content-box recent-updates col-md-9 col-9 col-sm-8">
                    <div class="row about-row normal-post news-list project-list full-post">
                        @for ($i = 0; $i < 1; $i++)
                            <div class="items col-md-4 col-sm-4">
                                <div class="post-items">
                                    <a href="{{ route('frontend.photo-detail') }}" title="">
                                        <figure class="article-img">
                                            <img src="{{ asset('images/slide-01.jpg') }}" alt="">
                                        </figure>
                                        <span class="dates mb-2">32 Images</span>
                                        <h2 class="titles post-title">Capturing the joy and curiosity of children engaged in educational and playful activities that enhance their learning and development.</h2>
                                        <span class="btn rounded-btn">View Photos</span>
                                    </a>
                                </div>
                            </div>

                            <div class="items col-md-4 col-sm-4">
                                <div class="post-items">
                                    <a href="{{ route('frontend.photo-detail') }}" title="">
                                        <figure class="article-img">
                                            <img src="{{ asset('images/slide-02.jpg') }}" alt="">
                                        </figure>
                                        <span class="dates mb-2">20 Images</span>
                                        <h2 class="titles post-title">Showcasing women participating in skill-building, vocational training, and entrepreneurial activities to achieve independence and confidence.</h2>
                                        <span class="btn rounded-btn">View Photos</span>
                                    </a>
                                </div>
                            </div>

                            <div class="items col-md-4 col-sm-4">
                                <div class="post-items">
                                    <a href="{{ route('frontend.photo-detail') }}" title="">
                                        <figure class="article-img">
                                            <img src="{{ asset('images/slide-03.jpg') }}" alt="">
                                        </figure>
                                        <span class="dates mb-2">18 Images</span>
                                        <h2 class="titles post-title">Highlighting community medical camps, wellness initiatives, and nutrition awareness programs that improve health outcomes.</h2>
                                        <span class="btn rounded-btn">View Photos</span>
                                    </a>
                                </div>
                            </div>
                        @endfor
                    </div>
                    @include ('frontend.partials.pagination')
                </div>

                <div class="right-side col-md-3 col-3 col-sm-4">
                    @include ('frontend.partials.side-news')
                </div>


            </div>

        </div>
    </section>
@endsection