@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">Projects</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">Projects</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="detail-section news-articles pt-0">
        <div class="container">
            <div class="row about-row">
                <div class="items detail-content-box col-md-12 col-12 col-sm-12">
                    <div class="featured-image latest-item mt-0">
                        <a href="{{ route('frontend.projects-detail') }}" title="">
                            <img src="{{ asset('images/slide-01.jpg') }}" alt="">
                            <span class="text-overlays">
                                <h2 class="titles feat-title">Health and Nutrition Campaigns</h2>
                                <span class="btn rounded-btn alt-btn">Read More</span>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="items detail-content-box recent-updates col-md-9 col-9 col-sm-8">
                    <div class="row normal-post news-list project-list">
                        @for ($i = 0; $i < 1; $i++)
                            <div class="items col-4">
                                <div class="post-items">
                                    <a href="{{ route('frontend.projects-detail') }}" title="">
                                        <figure class="article-img">
                                            <img src="{{ asset('images/slide-02.jpg') }}" alt="">
                                        </figure>
                                        <h2 class="titles post-title">Clean Water and Sanitation Project</h2>
                                        <span class="description">Access to clean water and proper sanitation is a basic human right, yet millions of people in rural and underserved communities...</span>
                                        <span class="btn rounded-btn">Read More</span>
                                    </a>
                                </div>
                            </div>

                            <div class="items col-4">
                                <div class="post-items">
                                    <a href="{{ route('frontend.projects-detail') }}" title="">
                                        <figure class="article-img">
                                            <img src="{{ asset('images/slide-03.jpg') }}" alt="">
                                        </figure>
                                        <h2 class="titles post-title">Environmental Conservation Efforts</h2>
                                        <span class="description"> Protecting the environment is essential for the sustainability of communities and the well-being of future generations....</span>
                                        <span class="btn rounded-btn">Read More</span>
                                    </a>
                                </div>
                            </div>

                            <div class="items col-4">
                                <div class="post-items">
                                    <a href="{{ route('frontend.projects-detail') }}" title="">
                                        <figure class="article-img">
                                            <img src="{{ asset('images/slide-05.jpg') }}" alt="">
                                        </figure>
                                        <h2 class="titles post-title">Youth Leadership and Empowerment</h2>
                                        <span class="description">The youth of today are the leaders of tomorrow, and their active participation in community development is crucial for sustainable progress...</span>
                                        <span class="btn rounded-btn">Read More</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