@extends("Site.Layouts.blank")
@section ("content")


    <section class="  relative">

        <!-- *=*=*=*=*=*=*=*=*=* Section Banner *=*=*=*=*=*=*=*=*=* -->
        <div class="w-full relative overflow-x-hidden overflow-y-hidden">
            <img class="w-full min-h-[320px] md:h-auto object-cover  " src="{{url($setting['Projects_page_banner'])}}" alt="banner">
            <div class="left_bottom-absolute min-w-full">
               <div class="Banner_text-wrapper project">

                 <div class="ps-16">
                     <div>
                         <h1> @lang('site.Projects') </h1>
                     </div>

                     <div class="pt-7 pb-4">
                         <ul class="font-light text-white flex flex-wrap gap-x-6 gap-y-2" >
                             <li class="hover:underline @if($selected_cat=='all') underline @endif" data-aos="zoom-in-up">
                                 <a href="{{url('Projects')}}"> @lang('site.All') </a>
                             </li>
                             @foreach($Categories as $Category)
                                 <li class=" hover:underline @if($selected_cat==$Category->id) underline @endif text-sm md:text-base" data-aos="zoom-in-up">
                                     <a href="{{$Category->path()}}">{{$Category->name}}</a>
                                 </li>
                             @endforeach
                         </ul>
                     </div>
                 </div>

               </div>



            </div>
        </div>

    </section>


    <main class="my-12  mx-3 sm:mx-6 lg:mx-16">

        <!-- *=*=*=*=*=*=*=*=*=* Section Images *=*=*=*=*=*=*=*=*=* -->
        <projects-images-section :projects="{{json_encode($projects->items())}}"></projects-images-section>

    </main>


    <div  class="table mx-auto my-7">
        {{$projects->links('Site.paginator')}}
    </div>


    <!-- *=*=*=*=*=*=*=*=*=* Section CONTACT US *=*=*=*=*=*=*=*=*=* -->
    @include('Site._contact_us')

@endsection


@section("script")
    <script>

    </script>
@endsection