@extends('template.master')

@section('body')
            <!-- /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">Contact Center</h1>
                      <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                          <li class="breadcrumb-item"><a href="#">Home</a></li>
                          <li class="breadcrumb-item"><a href="#">Product</a></li>
                          <li class="br
                          eadcrumb-item active" aria-current="page">Contact Center</li>
                        </ol>
                      </nav>
                    </div>
                    <!-- /column -->
                  </div>
                  <!-- /.row -->
                </div>
                <!-- /.container -->
            </section> --}}

              <!-- /header -->
              <section class="contact-wrapper position-relative min-vh-70 d-lg-flex align-items-center">
                <div class="container pt-3 pt-md-11">
                  <div class="row mb-5 align-items-center">
                      <div class="col-lg-6 position-relative mt-0 order-lg-2">
                          <div class="overlap-grid overlap-grid-2">
                              <img src="./assets/img/illustrations/illus1.svg" srcset="../assets/img/illustrations/illus1.svg 2x" alt="" style="width: 100%;">
                          </div>
                        </div>
                      <div class="col-lg-6">
                        <div class="tt-el-caption">
                          <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                              <li class="breadcrumb-item"><a href="#">Home</a></li>
                              <li class="breadcrumb-item"><a href="#">Product</a></li>
                              <li class="breadcrumb-item active" aria-current="page">Contact Center</li>
                            </ol>
                          </nav>
                          <h1 class="display-2 m-0"><span style="color: #3a9dc2 ;">Contact Center Omnichannel :</span></h1>
                          <h1 class="display-2 mb-0 mx-sm-n2 mx-md-0">meningkatkan layanan pelanggan, produktivitas, penjualan dengan operasional mudah, cepat dan lebih hemat</h1>


                      </div>

                        {{-- <blockquote class="icon icon-top text-start">
                          <p class="contact-petik">Solusi omnichannel untuk kemudahan meningkatan layanan  pelanggan,
                            produktivitas kerja, meningkatkan penjualan, dengan operasional
                            mudah, cepat and lebih hemat</p>
                      </blockquote> --}}
                      <p class="mb-4">Layanan informasi dan pengaduan pelanggan menangani dari semua kanal
                        layanan dalam satu layar sehingga lebih mudah, praktis, cepat dan terukur,
                        dapat terintegrasi dengan data pelanggan , knowledge produk dan layanan.
                        Kemudahan eskalasi, kolaborasi dengan dengan unit lain dalam melakukan
                        menyelesaikan layanan, tersedia versi mobile yang akan memudahkan</p>
                         </div>
                  </div>
              </div>
            </section>

            <section class="keyscreen-wrapper mt-8">
              <div class="container pb-7 pb-md-10 text-center">
                <div class="row">
                  <div class="col-md-11 col-xl-11 col-xxl-11 mx-auto">
                    <div class="tt-el-caption text-center">
                      <h4 class="display-7">Memudahkan dalam mengelola<span> interaksi pelanggan</span> di berbagai saluran</h4>
                    </div>
                    <div class="row">
                      <div class="col-lg-4 mx-auto">
                        <div class="accordion accordion-wrapper" id="accordionSimpleExample">
                          <ul class="nav nav-tabs nav-pills">
                            <li class="nav-item">
                              <a class="nav-link active" data-bs-toggle="tab" href="#tab1-1">
                                  <div class="card plain accordion-item">
                                    <div class="card-header" id="headingSimpleSatu">
                                      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseSimpleSatu" aria-expanded="true" aria-controls="collapseSimpleSatu"><i class="bx bx-devices"></i>Single Screen</button>
                                    </div>
                                    <div id="collapseSimpleSatu" class="accordion-collapse collapse show" aria-labelledby="headingSimpleSatu" data-bs-parent="#accordionSimpleExample">
                                      <div class="card-body">
                                        <p>Satu layar untuk melayani berbagai channel / media dan terintegrasi, serta kemudahan melihat riwayat komunikasi pelanggan dari berbagai channel</p>
                                      </div>
                                  </div>
                                </div>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-bs-toggle="tab" href="#tab1-2">
                                  <div class="card plain accordion-item">
                                    <div class="card-header" id="headingSimpleTwo">
                                      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleTwo" aria-expanded="false" aria-controls="collapseSimpleTwo"><i class="bx bx-shape-square"></i>Integrasi Omnichannel</button>
                                    </div>
                                    <!--/.card-header -->
                                    <div id="collapseSimpleTwo" class="accordion-collapse collapse" aria-labelledby="headingSimpleTwo" data-bs-parent="#accordionSimpleExample">
                                      <div class="card-body">
                                        <p>Layanan lebih baik dan cepat dengan dukungan informasi yang terintegrasi</p>
                                      </div>
                                      <!--/.card-body -->
                                    </div>
                                </div>
                                <!--/.accordion -->
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-bs-toggle="tab" href="#tab1-3">
                                  <div class="card plain accordion-item">
                                    <div class="card-header" id="headingSimpleThree">
                                      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleThree" aria-expanded="false" aria-controls="collapseSimpleThree"><i class="bx bx-pie-chart-alt"></i>Dashboard Trafic Omnichannel</button>
                                    </div>
                                    <!--/.card-header -->
                                    <div id="collapseSimpleThree" class="accordion-collapse collapse" aria-labelledby="headingSimpleThree" data-bs-parent="#accordionSimpleExample">
                                      <div class="card-body">
                                        <p>Memantau interaksi yang belum dilayani dari setiap channel layanan</p>
                                      </div>
                                      <!--/.card-body -->
                                    </div>
                                </div>
                              </a>
                            </li>

                            <li class="nav-item">
                              <a class="nav-link" data-bs-toggle="tab" href="#tab1-4">
                                  <div class="card plain accordion-item">
                                    <div class="card-header" id="headingSimpleFour">
                                      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleFour" aria-expanded="false" aria-controls="collapseSimpleFour"><i class="bx bx-map-alt"></i>Mapping Case Omnichannel</button>
                                    </div>
                                    <!--/.card-header -->
                                    <div id="collapseSimpleFour" class="accordion-collapse collapse" aria-labelledby="headingSimpleFour" data-bs-parent="#accordionSimpleExample">
                                      <div class="card-body">
                                        <p>Permasalahan Lebih Terlihat, Produktivitas & Beban Kerja Terukur, Kultur Kerja Meningkat</p>
                                      </div>
                                      <!--/.card-body -->
                                    </div>
                                </div>
                              </a>
                            </li>

                            <li class="nav-item">
                              <a class="nav-link" data-bs-toggle="tab" href="#tab1-5">
                                  <div class="card plain accordion-item">
                                    <div class="card-header" id="headingSimpleFive">
                                      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleFive" aria-expanded="false" aria-controls="collapseSimpleFive"><i class="bx bx-mobile-alt"></i>List case Mobile</button>
                                    </div>
                                    <!--/.card-header -->
                                    <div id="collapseSimpleFive" class="accordion-collapse collapse" aria-labelledby="headingSimpleFive" data-bs-parent="#accordionSimpleExample">
                                      <div class="card-body">
                                        <p>kemudahan layanan dari luar kantor, kemudahan penugasan dan progress orang lapangan</p>
                                      </div>
                                      <!--/.card-body -->
                                    </div>
                                </div>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-bs-toggle="tab" href="#tab1-6">
                                  <div class="card plain accordion-item">
                                    <div class="card-header" id="headingSimpleSix">
                                      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleSix" aria-expanded="false" aria-controls="collapseSimpleSix"><i class="bx bx-message-square"></i>Handling Case</button>
                                    </div>
                                    <!--/.card-header -->
                                    <div id="collapseSimpleSix" class="accordion-collapse collapse" aria-labelledby="headingSimpleSix" data-bs-parent="#accordionSimpleExample">
                                      <div class="card-body">
                                        <p>Kenyamanan interaksi sekaligus kolaborasi dengan tim internal and responsif menjawab pelanggan dengn ‘quick response’</p>
                                      </div>
                                      <!--/.card-body -->
                                    </div>
                                </div>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-lg-7 bg-tab2 mx-auto">
                        <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab1-1">
                          <img src="./assets/img/illustrations/Contact-center/list.png" srcset="./assets/img/illustrations/Contact-center/list.png 2x" alt="" style="width: 100%;">
                        </div>
                        <!--/.tab-pane -->
                        <div class="tab-pane fade" id="tab1-2">
                          <img src="./assets/img/illustrations/Contact-center/integrasi.png" srcset="./assets/img/illustrations/Contact-center/integrasi.png 2x" alt="" style="width: 100%;">
                        </div>
                        <!--/.tab-pane -->
                        <div class="tab-pane fade" id="tab1-3">
                          <img src="./assets/img/illustrations/Contact-center/dashboard.png" srcset="./assets/img/illustrations/Contact-center/dashboard.png 2x" alt="" style="width: 100%;">
                        </div>

                        <div class="tab-pane fade" id="tab1-4">
                          <img src="./assets/img/illustrations/Contact-center/mapping.png" srcset="./assets/img/illustrations/Contact-center/mapping.png 2x" alt="" style="width: 100%;">
                        </div>

                        <div class="tab-pane fade" id="tab1-5">
                          <img src="./assets/img/illustrations/Contact-center/mobile.png" srcset="./assets/img/illustrations/Contact-center/mobile.png 2x" alt="" style="width: 100%;">
                        </div>
                        <div class="tab-pane fade" id="tab1-6">
                          <img src="./assets/img/illustrations/Contact-center/heading.png" srcset="./assets/img/illustrations/Contact-center/heading.png 2x" alt="" style="width: 100%;">
                        </div>
                        <!--/.tab-pane -->
                      </div>
                    </div>
                  </div>
                </div>

              </div>
              <!-- /.container -->
          </section>

          <section class="untung-wrapper bg-light position-relative min-vh-70 d-lg-flex align-items-center">
              <div class="container">
                <div class="tt-el-caption text-center">
                  <h4 class="display-7">Manfaat menggunakan software Omnichannel <span> Onebox</span>
                  </h4>
                </div>
                <div class="row">
                  <div class="col-lg-6 mb-3">
                    <div class="card-produk-manfaat">
                        <div class="icon">
                          <i class="bx bx-desktop"></i>
                        </div>
                        <p>Meningkatlan layanan , petugas contact center lebih mudah dan cepat melayani  karena satu screen dan didukung sumber daya informasi yang dibutuhkan pelanggan</p>
                    </div>
                  </div>
                  <div class="col-lg-6 mb-3">
                    <div class="card-produk-manfaat">
                        <div class="icon">
                          <i class="bx bx-shopping-bag"></i>
                        </div>
                          <p>Menambah penjualan dengan akuisisi pelanggan lebih murah , jika  diintegrasikan dengan prospek manajmen  </p>
                    </div>
                  </div>
                  <div class="col-lg-6 mb-3">
                    <div class="card-produk-manfaat">
                        <div class="icon">
                          <i class="bx bx-bar-chart-square"></i>
                        </div>
                          <p>Layanan terukur,  penilaian kinerja  mudah dilakukan  produktifitas meningkat   </p>
                      </div>
                  </div>
                  <div class="col-lg-6 mb-3">
                    <div class="card-produk-manfaat">
                        <div class="icon">
                          <i class="bx bx-map-alt"></i>
                        </div>
                          <p>Kemudahan melihat peta layanan dan peta  masalah  baik dari sisi produk , team, wilayah/cabang   sehingga lebih mudah dilakukan evaluasi dan perbaikan </p>
                      </div>
                  </div>

                </div>
              </div>
            </section>

            <section class="card-prom wrapper cta-wrapper">
                <div class="container py-md-2">
                    <div class="row align-items-center">
                        <div class="card-pad container py-md-2">
                            <div class="card-solusi bg-gray rounded-4">
                                <div class="row align-items-center justify-content-between">
                                    <div class="col-lg-6">
                                        <h5>Transformasikan Bisnis Anda dengan Solusi Omnichannel Terintegrasi</h5>
                                        <p>Diskusikan dengan tim kami untuk memberikan solusi yang tepat untuk bisnis Anda</p>

                                        <div class="justify-content-center justify-content-lg-start mt-5" data-cues="slideInDown"
                                            data-group="page-title-buttons" data-delay="200">
                                            <a class="feature-button"
                                                href="https://wa.me/{{$profil[0]->Telp ?? ''}}?text=Halo Tim Onebox, Saya ingin mengajukan beberapa pertanyaan"
                                                target="_blank"><i class='bx bxl-whatsapp me-2' ></i>Hubungi Whatsapp Kami</a>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 text-end">
                                        <img src="{{asset('assets/img/illustrations/img-cta.png')}}" alt="cta-onebox">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!--/.row -->

                    <!--/.row -->
                </div>
            </section>
@endsection