@extends('template.master')
@section('body')

@section('title', 'Whats New')
@section('description', 'Semua Produk Onebox Contact Center Omnichanel')

<!-- /header -->
<section class="atas-wrapper bg-soft-primary">
    <div class="container pt-10 pb-7 pt-md-10 pb-md-10 text-center">
      <div class="row">
        <div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
          <h1 class="display-1 mb-3">Klien</h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center">
              <li class="breadcrumb-item"><a href="{{url('/')}}" title="Beranda">Beranda</a></li>
              <li class="breadcrumb-item active">Klien</li>
            </ol>
          </nav>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </section>

<<section class="portfolio-wrapper bg-light mt-44" id="portfolio">
    <div class="container pb-10 pt-0 text-center">
        <div class="portfolio">

            <div class="row mb-5">

                <div class="tt-el-caption text-center">
                    <h3>Telah dipercaya oleh <strong>berbagai perusahaan </strong></h3>
                    </p>
                </div>
            </div>

            <!-- /.row -->
            <div class="client-wrapper">
                <div class="row justify-content-around">
                    <div class="col-lg-10">
                        <div id="portofolio" class="splide" role="group" aria-label="Splide Basic HTML Example">
                            <div class="splide__track mt-5">
                                <ul class="splide__list">
                                    <li class="splide__slide">
                                        <div class="container">
                                            <div class="row row-cols-4 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 row-cols-xxl-6 justify-content-center">
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c1.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c2.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c3.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c4.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c5.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c6.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c7.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c8.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c9.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c10.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c11.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c12.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c13.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c14.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c15.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c16.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c17.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c18.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="splide__slide">
                                        <div class="container">
                                            <div class="row row-cols-4 row-cols-sm-2 row-cols-md-3 row-cols-xl-5 row-cols-xxl-5 justify-content-center">

                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c19.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c20.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c21.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c22.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c23.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c24.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c25.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c26.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="img">
                                                        <img src="./assets/img/client/png/c27.png" alt="portofolio" loading="lazy">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        {{-- <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-6 row-cols-xxl-6">
                                @if (!empty($menu))
                                    @foreach ($menu as $item)
                                        <div class="col">
                                            <div class="img">
                                                <img src="https://cms.ciptadrasoft.com/upload/externalLogo/{!! $item['ImageMenu'] !!}" alt="Image Menu" loading="lazy">
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div> --}}
                    </div>
                    <div class="col-lg-2 gariss mt-5">
                        <div class="swiper-container dots-closer mb-6" data-margin="30" data-dots="true">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <blockquote class="icon icon-top text-end">
                                            <p>Melayani lebih baik, bekerja lebih cepat dan mudah</p>
                                        </blockquote>
                                    </div>
                                    <!--/.swiper-slide -->
                                    <div class="swiper-slide">
                                        <blockquote class="icon icon-top text-end">
                                            <p>Feedback pelanggan, Peta masalah, dan layanan lebih terukur</p>
                                        </blockquote>
                                    </div>
                                    <!--/.swiper-slide -->
                                    <div class="swiper-slide">
                                        <blockquote class="icon icon-top text-end">
                                            <p>Melayani semua channel dalam satu layar</p>
                                        </blockquote>
                                    </div>
                                    <!--/.swiper-slide -->
                                </div>
                                <!--/.swiper-wrapper -->
                            </div>
                            <!-- /.swiper -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection