@extends('front.layouts.master')  
@section('title','İsola Mimarlık | Galeri')
@section('content')

  <main class="main">

    <!-- Page Title -->
    <div class="page-title" data-aos="fade">
      <div class="container">
        <nav class="breadcrumbs">
          <ol>
            <li><a href="index.html">Anasayfa</a></li>
            <li class="current">Galeri</li>
          </ol>
        </nav>
        <h1>Galeri</h1>
      </div>
    </div><!-- End Page Title -->

    <!-- Portfolio Section -->
    <section id="portfolio" class="portfolio section">

      <div class="container">

        <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">

          <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
            <li data-filter="*" class="filter-active">Hepsi</li>
            <li data-filter=".filter-kitchen">Mutfak</li>
            <li data-filter=".filter-bathroom">Banyo</li>
            <li data-filter=".filter-door">Kapı</li>
          </ul><!-- End Portfolio Filters -->

          <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-kitchen">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/mutfak1_1.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Mutfak 1</h4>
                  <a href="{{asset('front/')}}/assets/img/mutfak1_1.jpeg" title="Mutfak 1" data-gallery="portfolio-gallery-kitchen" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-kitchen">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/mutfak1_2.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Mutfak 1</h4>
                  <a href="{{asset('front/')}}/assets/img/mutfak1_2.jpeg" title="Mutfak 1" data-gallery="portfolio-gallery-kitchen" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--> </div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-kitchen">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/mutfak1_3.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Mutfak 1</h4>
                  <a href="{{asset('front/')}}/assets/img/mutfak1_3.jpeg" title="Mutfak 1" data-gallery="portfolio-gallery-kitchen" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-kitchen">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/mutfak1_4.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Mutfak 1</h4>
                  <a href="{{asset('front/')}}/assets/img/mutfak1_4.jpeg" title="Mutfak 1" data-gallery="portfolio-gallery-kitchen" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                 <!-- <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-kitchen">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/mutfak2_1.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Mutfak 2</h4>
                  <a href="{{asset('front/')}}/assets/img/mutfak2_1.jpeg" title="Mutfak 2" data-gallery="portfolio-gallery-kitchen" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-kitchen">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/mutfak2_2.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Mutfak 2</h4>
                  <a href="{{asset('front/')}}/assets/img/mutfak2_2.jpeg" title="Mutfak 2" data-gallery="portfolio-gallery-kitchen" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-door">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/kapi1.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Kapı 1</h4>
                  <a href="{{asset('front/')}}/assets/img/kapi1.jpeg" title="Kapı 1" data-gallery="portfolio-gallery-door" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-door">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/kapi2.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Kapı 2</h4>
                  <a href="{{asset('front/')}}/assets/img/kapi2.jpeg" title="Kapı 2" data-gallery="portfolio-gallery-door" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                 <!-- <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-door">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/kapi3.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Kapı 3</h4>
                  <a href="{{asset('front/')}}/assets/img/kapi3.jpeg" title="Kapı 3" data-gallery="portfolio-gallery-door" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-door">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/kapi5.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Kapı 4</h4>
                  <a href="{{asset('front/')}}/assets/img/kapi5.jpeg" title="Kapı 4" data-gallery="portfolio-gallery-door" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-door">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/kapi10.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Kapı</h4>
                  <a href="{{asset('front/')}}/assets/img/kapi10.jpeg" title="Kapı" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

            <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-bathroom">
              <div class="portfolio-content h-100">
                <img src="{{asset('front/')}}/assets/img/banyo1.jpeg" class="img-fluid" alt="">
                <div class="portfolio-info">
                  <h4>Banyo 1</h4>
                  <a href="{{asset('front/')}}/assets/img/banyo1.jpeg" title="Banyo 1" data-gallery="portfolio-gallery-bathroom" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
                  <!--<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
--></div>
              </div>
            </div><!-- End Portfolio Item -->

          </div><!-- End Portfolio Container -->

        </div>

      </div>

    </section><!-- /Portfolio Section -->

    <!-- Clients Section
    <section id="clients" class="section clients">

      <div class="container section-title" data-aos="fade-up">
        <h2>Clients</h2>
        <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas</p>
      </div>

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="swiper init-swiper">
          <script type="application/json" class="swiper-config">
            {
              "loop": true,
              "speed": 600,
              "autoplay": {
                "delay": 5000
              },
              "slidesPerView": "auto",
              "pagination": {
                "el": ".swiper-pagination",
                "type": "bullets",
                "clickable": true
              },
              "breakpoints": {
                "320": {
                  "slidesPerView": 2,
                  "spaceBetween": 40
                },
                "480": {
                  "slidesPerView": 3,
                  "spaceBetween": 60
                },
                "640": {
                  "slidesPerView": 4,
                  "spaceBetween": 80
                },
                "992": {
                  "slidesPerView": 6,
                  "spaceBetween": 120
                }
              }
            }
          </script>
          <div class="swiper-wrapper align-items-center">
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-1.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-2.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-3.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-4.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-5.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-6.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-7.png" class="img-fluid" alt=""></div>
            <div class="swiper-slide"><img src="{{asset('front/')}}/assets/img/clients/client-8.png" class="img-fluid" alt=""></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>

      </div>

    </section>/Clients Section -->

  </main>

 @endsection