<?php 
include_once("../inc/inc_koneksi.php");
include_once("../inc/inc_fungsi.php");
 
 ?>
    <section class="hero-wrap hero-wrap-2"style="background-image: url('<?= str_replace('../', '', ambil_gambar('17')) ?>');background-repeat:no-repeat;
background-size:cover;
/*background-size:100%;*/
background-position:center;" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text align-items-end justify-content-center">
          <div class="col-md-9 ftco-animate pb-5 text-center">
            
            <h1 class="mb-3 bread">About Us</h1>
            <p class="breadcrumbs"><span class="mr-2"><a href="index.html">Home <i class="ion-ios-arrow-forward"></i></a></span> <span>About us <i class="ion-ios-arrow-forward"></i></span></p>
          </div>
        </div>
      </div>
    </section>
  

  <section class="ftco-section ftco-no-pt ftco-no-pb">
      <div class="container">
        <div class="row d-flex">
          <div class="col-md-6 d-flex">
            <div class="img img-video d-flex align-self-stretch align-items-center justify-content-center justify-content-md-end" style="background-image:url(<?=str_replace("../", "",  ambil_gambar('18')) ?>); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;">
              <a href="<?php echo buat_btn_halaman('18'); ?>" class="icon-video popup-vimeo d-flex justify-content-center align-items-center">
                <span class="icon-play"></span>
              </a>
            </div>
          </div>
          <div class="col-md-6 pl-md-5 py-md-5">
            <div class="row justify-content-start pt-3 pb-3">
              <div class="col-md-12 heading-section ftco-animate">
                <span class="subheading"><?php echo ambil_judul('18') ?></span>
                <h2 class="mb-4"><?php echo ambil_kutipan('18') ?></h2>
                <p><?php echo ambil_isi('18') ?></p>
                <div class="tabulation-2 mt-4">
                  <ul class="nav nav-pills nav-fill d-md-flex d-block">
                    <li class="nav-item mb-md-0 mb-2">
                      <a class="nav-link active py-2" data-toggle="tab" href="#home1"><?php echo ambil_judul('19') ?></a>
                    </li>
                    <li class="nav-item px-lg-2 mb-md-0 mb-2">
                      <a class="nav-link py-2" data-toggle="tab" href="#home2"><?php echo ambil_judul('20') ?></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link py-2 mb-md-0 mb-2" data-toggle="tab" href="#home3"><?php echo ambil_judul('21') ?></a>
                    </li>
                  </ul>
                  <div class="tab-content bg-light rounded mt-2">
                    <div class="tab-pane container p-0 active" id="home1">
                      <p><?php echo ambil_isi('19') ?></p>
                    </div>
                    <div class="tab-pane container p-0 fade" id="home2">
                      <p><?php echo ambil_isi('20') ?></p>
                    </div>
                    <div class="tab-pane container p-0 fade" id="home3">
                      <p><?php echo ambil_isi('21') ?></p>
                    </div>
                  </div>
                </div>
                <div class="years d-flex mt-4 mt-md-5">
                  <h4>
                    <span class="number mr-2" data-number="<?php echo ambil_kutipan('8') ?>">0</span>
                    <span><?php echo ambil_isi('8') ?></span>
                  </h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
 
   <section class="ftco-consultation ftco-section ftco-no-pt ftco-no-pb img" style="background-image: url('<?= str_replace('../', '', ambil_gambar('22')) ?>');">
            <div class="overlay"></div>
        <div class="container">
            <div class="row d-md-flex justify-content-end">
                <div class="col-md-6 half p-3 py-5 pl-md-5 ftco-animate heading-section heading-section-white">
                    <span class="subheading">Buat Perjanjian</span>
                    <h2 class="mb-4">Konsultasi Gratis</h2>
                    <form action="#" class="consultation" name="booking">
                <div class="form-group">
                  <input type="text" name="nama" class="form-control " placeholder="Nama" id="b_name">
                </div>
                <div class="form-group">
                  <input type="text" name="email" class="form-control" placeholder="Email" id="b_email">
                </div>
                <div class="form-group">
                  <input type="text" name="no_telp" class="form-control" placeholder="No Telpon" id="b_telpon">
                </div>
                <div class="form-group">
                  <textarea name="massage" cols="30" rows="7" class="form-control" placeholder="Pesan" id="b_massage"></textarea>
                </div>
                <div class="form-group">
                  <button type="button" id="sendwa" class="btn btn-dark py-3 px-4">Send</button>
                </div>
              </form>
                </div>
            </div>
        </div>
    </section>
    <section class="ftco-section testimony-section">
      <div class="container">
        <div class="row justify-content-center mb-5">
          <div class="col-md-7 text-center heading-section ftco-animate">
            <span class="subheading">Testimonial</span>
            <h2 class="mb-4">Happy Clients</h2>
          </div>
        </div><script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-f89aa2fc-b793-46d5-9d24-f37c9c8f13a3"></div>
        
      </div>
    </section>
 
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/jquery-migrate-3.0.1.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <!-- <script src="assets/js/bootstrap.min.js"></script> -->
  <script src="assets/js/jquery.easing.1.3.js"></script>
  <script src="assets/js/jquery.waypoints.min.js"></script>
  <script src="assets/js/jquery.stellar.min.js"></script>
  <script src="assets/js/owl.carousel.min.js"></script>
  <script src="assets/js/jquery.magnific-popup.min.js"></script>
  <script src="assets/js/aos.js"></script>
  <script src="assets/js/jquery.animateNumber.min.js"></script>
  <script src="assets/js/scrollax.min.js"></script> 
  <script src="assets/js/main.js"></script>
   <script type="text/javascript">
      $("#sendwa").click(function(){  
 var name = $("#b_name").val();
 var email = $("#b_email").val();
 var telpon = $("#b_telpon").val();
 var massage = $("#b_massage").val();

 if (!name) {
  $("#b_name").attr("placeholder", "Wajib Di Isi");
  $("#b_name").focus();

 }else{
  $("#b_name").attr("placeholder", "");
 }

 if (!email) {
  $("#b_email").attr("placeholder", "Wajib Di Isi");
  $("#b_email").focus();

 }else{

  $("#b_email").attr("placeholder", "");

 }

 if (!telpon) {
  $("#b_telpon").attr("placeholder", "Wajib Di Isi");
  $("#b_telpon").focus();

 }else{

  $("#b_telpon").attr("placeholder", "Wajib Di Isi");
 }
 if (!massage) {

  $("#b_massage").attr("placeholder", "Wajib Di Isi");
  $("#b_massage").focus();

 }else{

  $("#b_massage").attr("placeholder", "Wajib Di Isi");;
 }

      
       
 if (name != '' && email != '' && telpon != '' && massage != '' ) {
  // $("#daftar").html("Daftar...").attr("disabled", "disabled");
        var dataForm =$('form[name="booking"]').serialize(); 
              $.ajax({
                type: "POST", 
                url: "page/send.php",
                data: dataForm+"&type=send", 
                success: function(response){    
                    alert(response);
                  // $("#notif").html(response);
                  

                },
                error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
                  // $("#loader").hide(); 
                  // $("#btn-search").html("SEARCH").removeAttr("disabled");

                 }
              }); 
 }else{
 
 }

 

});
  </script>