@include('htmlpage.frontent.layout.app')
<section class="g-padding-y-125--sm">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
        @foreach ($projects as $index => $project)
          @if($index === 0)
          <div class="main_title text-end">
          <h1 class="main_title" style="text-align: end;"><h1 class="main_title">{{ $project->categoryModel->title }}</h1><br></h1>
          </div>
          @endif
          @if ($index % 2 != 0)
 <a class="text-light" href="{{ route('singleproject', ['url' => $project->url]) }}">
          <div class="single-gallery animate-on-scroll animate__animated animate__fadeInUp">
             
            <img class="img-fluid" src="{{ asset('storage/app/public/' . $project->image_path) }}" alt="{{ $project->alt }}">
            <div class="light-box mt-4 me-4 text-end  text-light">
              
             <br>

              <span class="fs-4" style="font-family: Abel sans-serif;"> {{ $project->project_name }}</span>
              <br> <span class="fs-5" style="font-family: Abel sans-serif;"> {{ $project->location }}</span>
            </div>
          
          </div>  </a>
          @endif
          @endforeach
        </div>
        <div class="col-md-6">
         @foreach ($projects as $index => $project)
          @if ($index % 2 == 0)
          <a href="{{ route('singleproject', ['url' => $project->url]) }}" class="">
          <div class="single-gallery animate-on-scroll animate__animated animate__fadeInUp">
            <img class="img-fluid" src="{{ asset('storage/' . $project->image_path) }}" alt="{{ $project->alt }}">
            <div class="light-box mt-4 me-4 text-end  text-light">
              
             <br>

              <span class="fs-4" style="font-family: Abel sans-serif;"> {{ $project->project_name }}</span>
              <br> <span class="fs-5" style="font-family: Abel sans-serif;"> {{ $project->location }}</span>
            </div>
          </div>
          </a>
          @endif
          @endforeach
        </div>
      </div>
         <div class="text-center mb-5">
                          <a href="/project"
                              class="text-uppercase s-btn s-btn--md s-btn--black-brd g-radius--50 text-white mt-5">Back </a>
                      </div>
    </div>
  </section>

  @include('htmlpage.frontent.layout.footer')