@extends('frontend.frontend_layout')
@section('project-menu') current @endsection
@section('content')
<!--Page Header Start-->
<section class="page-header">
    <div class="page-header-bg" style="background-image: url({{ asset($pageBanner->project_page_banner) }})">
    </div>
    <div class="container">
        <div class="page-header__inner">
            <ul class="thm-breadcrumb list-unstyled">
                <li><a href="{{ url('/') }}">Home</a></li>
                <li><span>/</span></li>
                <li>Projects</li>
            </ul>
            <h2>Projects</h2>
        </div>
    </div>
</section>
<!--Page Header End-->

<!--project Page Start-->
<section class="project-page">
    <div class="container">
        <div class="row" style="margin-top: 60px; margin-bottom: 20px">
            <!--project Two Single Start-->
            <div class="section-title text-center">
                <h2 class="section-title__title">Popular Projects</h2>
            </div>
            @foreach ($projects as $project)
                <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="100ms">
                    <div class="causes-one__single">
                        <div class="causes-one__img-box">
                            <div class="causes-one__img">
                                <img src="{{ asset($project->image) }}" alt="Image">
                            </div>
                            <div class="causes-one__border-box"></div>
                        </div>
                        <div class="causes-one__content">
                            <div class="causes-one__title-box">
                                <h3 class="causes-one__title"><a href="{{ url('/project',$project->slug ) }}">{{ $project->title }}</a></h3>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            <!--project Two Single End-->           
        </div>
        <div class="row" style="margin-top: 30px; margin-bottom: 80px">
            <div class="section-title text-center">
                <h2 class="section-title__title">Upcoming Projects</h2>
            </div>
            <!--project Two Single Start-->
            @foreach ($upcoming_projects as $project)
                <div class="col-xl-4 col-lg-4 wow fadeInUp" data-wow-delay="100ms">
                    <div class="causes-one__single">
                        <div class="causes-one__img-box">
                            <div class="causes-one__img">
                                <img src="{{ asset($project->image) }}" alt="Image">
                            </div>
                            <div class="causes-one__border-box"></div>
                        </div>
                        <div class="causes-one__content">
                            <div class="causes-one__title-box">
                                <h3 class="causes-one__title"><a href="{{ url('/project',$project->slug ) }}">{{ $project->title }}</a></h3>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            <!--project Two Single End-->           
        </div>
    </div>
</section>
<!--project Page End-->
@endsection