<?php 
include_once("../inc/inc_koneksi.php");
include_once("../inc/inc_fungsi.php");
 
 ?>
        <div class="hero-wrap js-fullheight" style="background-image: url('<?= str_replace('../', '', ambil_gambar('1')) ?>');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 js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
          <div class="col-md-6 ftco-animate">
            <h1 class="subheading" style="font-size: 30px;"><?php echo ambil_judul('1') ?></h1>
            <h1 style="font-size: 25px;"><?php echo ambil_kutipan('1') ?> <br>
                          <span
                             class="txt-rotate"
                             data-period="2000"
                             data-rotate='<?=ambil_isi('2') ?>'></span>
                        </h1>
            <!-- <h1 class="mb-4">Attorneys Fighting For Your Freedom</h1> -->
            <p class="mb-4"> <?php echo maximum_kata(ambil_isi('1'), 30) ?></p>
            <p><a href="#" class="btn btn-primary mr-md-4 py-2 px-4"><?=  buat_btn_halaman('1') ?> <span class="ion-ios-arrow-forward"></span></a></p>
          </div>
        </div>
      </div>
    </div>
    <section class="ftco-section ftco-no-pt">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 py-5">
              <div class="heading-section ftco-animate">
                <span class="subheading"><?php echo ambil_judul('3') ?></span>
                <h2 class="mb-4"><?php echo ambil_kutipan('3') ?> </h2>
                <p><?php echo ambil_isi('3') ?></p>
                <p><a href="#" class="btn btn-primary py-3 px-4"><?=  buat_btn_halaman('3') ?></a></p>
              </div>
                </div>
                <div class="col-lg-9 services-wrap px-4 pt-5">
                    <div class="row pt-md-3">
                        <div class="col-md-4 d-flex align-items-stretch">
                            <div class="services text-center">
                                <div class="icon d-flex justify-content-center align-items-center">
                                    <span class="fa fa-user"></span>
                                </div>
                                <div class="text">
                                    <h3><?php echo ambil_judul('4') ?></h3>
                                    <p><?php echo ambil_kutipan('4') ?></p>
                                </div>
                                <a href="#" class="btn-custom d-flex align-items-center justify-content-center"><span class="ion-ios-arrow-round-forward"></span></a>
                            </div>
                        </div>
                        <div class="col-md-4 d-flex align-items-stretch">
                            <div class="services text-center">
                                <div class="icon d-flex justify-content-center align-items-center">
                                    <span class="flaticon-lawyer"></span>
                                </div>
                                <div class="text">
                                    <h3><?php echo ambil_judul('5') ?></h3>
                                    <p><?php echo ambil_kutipan('5') ?></p>
                                </div>
                                <a href="#" class="btn-custom d-flex align-items-center justify-content-center"><span class="ion-ios-arrow-round-forward"></span></a>
                            </div>
                        </div>
                        <div class="col-md-4 d-flex align-items-stretch">
                            <div class="services text-center">
                                <div class="icon d-flex justify-content-center align-items-center">
                                    <span class="flaticon-lawyer"></span>
                                </div>
                                <div class="text">
                                    <h3><?php echo ambil_judul('6') ?></h3>
                                    <p><?php echo ambil_kutipan('6') ?></p>
                                </div>
                                <a href="#" class="btn-custom d-flex align-items-center justify-content-center"><span class="ion-ios-arrow-round-forward"></span></a>
                            </div>
                        </div>
                         
                    </div>
                </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('7')) ?>); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;">
                        <a href="<?php echo buat_btn_halaman('7'); ?>" 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">
                    <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('7') ?></span>
                    <h2 class="mb-4"><?php echo ambil_kutipan('7') ?></h2>
                    <p><?php echo ambil_isi('7') ?></p>
            
                    <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-section">
        <div class="container">
            <div class="row justify-content-center mb-5">
          <div class="col-md-10 text-center heading-section ftco-animate">
            <span class="subheading"><?=ambil_judul('9') ?></span>
            <h2 class="mb-4"><?=ambil_kutipan('9') ?></h2>
          </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="carousel-case owl-carousel ftco-owl">
              <div class="item">
                        <div class="case img d-flex align-items-center justify-content-center" style="background-image: url(<?=str_replace("../", "",  ambil_gambar('10')) ?>);background-repeat:no-repeat;
background-size:cover;
background-position:center;">
                            <div class="text text-center">
                                <h3><a href="#"><?=ambil_judul('10') ?></a></h3>
                                <span><?=ambil_kutipan('10') ?></span>
                            </div>
                        </div>
              </div>
              <div class="item">
                        <div class="case img d-flex align-items-center justify-content-center" style="background-image: url(<?=str_replace("../", "",  ambil_gambar('11')) ?>);background-repeat:no-repeat;
background-size:cover;
background-position:center;">
                            <div class="text text-center">
                                <h3><a href="#"><?=ambil_judul('11') ?></a></h3>
                                <span><?=ambil_kutipan('11') ?></span>
                            </div>
                        </div>
              </div>
              <div class="item">
                        <div class="case img d-flex align-items-center justify-content-center" style="background-image: url(<?=str_replace("../", "",  ambil_gambar('12')) ?>);background-repeat:no-repeat;
background-size:cover;
background-position:center;">
                            <div class="text text-center">
                                <h3><a href="#"><?=ambil_judul('12') ?></a></h3>
                                <span><?=ambil_kutipan('12') ?></span>
                            </div>
                        </div>
              </div>
              <div class="item">
                        <div class="case img d-flex align-items-center justify-content-center" style="background-image: url(<?=str_replace("../", "",  ambil_gambar('13')) ?>);background-repeat:no-repeat;
background-size:cover;
background-position:center;">
                            <div class="text text-center">
                                <h3><a href="#"><?=ambil_judul('13') ?></a></h3>
                                <span><?=ambil_kutipan('13') ?></span>
                            </div>
                        </div>
              </div>
              <div class="item">
                        <div class="case img d-flex align-items-center justify-content-center" style="background-image: url(<?=str_replace("../", "",  ambil_gambar('14')) ?>);background-repeat:no-repeat;
background-size:cover;
background-position:center;">
                            <div class="text text-center">
                                <h3><a href="#"><?=ambil_judul('14') ?></a></h3>
                                <span><?=ambil_kutipan('14') ?></span>
                            </div>
                        </div>
              </div>
              <div class="item">
                        <div class="case img d-flex align-items-center justify-content-center" style="background-image: url(<?=str_replace("../", "",  ambil_gambar('15')) ?>);background-repeat:no-repeat;
background-size:cover;
background-position:center;">
                            <div class="text text-center">
                                <h3><a href="#"><?=ambil_judul('15') ?></a></h3>
                                <span><?=ambil_kutipan('15') ?></span>
                            </div>
                        </div>
              </div>
            </div>
            </div>
            <div class="col-md-12 text-center mt-4">
                <a href="case.html" class="btn btn-primary px-5">See All Successful Cases</a>
            </div>
        </div>
        </div>
    </section> -->

    <section class="ftco-section ">
        <div class="container-fluid px-md-5">
            <div class="row justify-content-center mb-5 pb-3">
          <div class="col-md-7 text-center heading-section ftco-animate">
            <span class="subheading">Our Attorney</span>
            <h2 class="mb-4">Our Legal Attorneys</h2>
          </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-sm-6">
                <div class="block-2 ftco-animate">
                <div class="flipper">
                  <div class="front" style="background-image: url('assets/images/<?=tutors_foto('2') ?>');">
                    <div class="box">
                      <h2><?=tutors_nama('2') ?>  </h2>
                      <!-- <p>Civil Lawyer</p> -->
                    </div>
                  </div>
                  <div class="back">
                    <!-- back content -->
                    <blockquote>
                      <p  style="font-size: 14px;"><?=tutors_isi('2') ?></p>
                    </blockquote>
                    <div class="author d-flex">
                      <div class="image align-self-center">
                        <img src="assets/images/<?=tutors_foto('2') ?> " alt="">
                      </div>
                      <div class="name align-self-center ml-3"><?=tutors_nama('2') ?> <!--  <span class="position">Civil Lawyer</span> --></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="block-2 ftco-animate">
                <div class="flipper">
                  <div class="front" style="background-image: url('assets/images/<?=tutors_foto('3') ?>');">
                    <div class="box">
                      <h2><?=tutors_nama('3') ?>  </h2>
                      <!-- <p>Civil Lawyer</p> -->
                    </div>
                  </div>
                  <div class="back">
                    <!-- back content -->
                    <blockquote>
                      <p   style="font-size: 14px;"><?=tutors_isi('3') ?></p>
                    </blockquote>
                    <div class="author d-flex">
                      <div class="image align-self-center">
                        <img src="assets/images/<?=tutors_foto('3') ?>" alt="">
                      </div>
                      <div class="name align-self-center ml-3"><?=tutors_nama('3') ?>  <!-- <span class="position">Civil Lawyer</span> --></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="block-2 ftco-animate">
                <div class="flipper">
                  <div class="front" style="background-image: url('assets/images/<?=tutors_foto('4') ?>');">
                    <div class="box">
                      <h2><?=tutors_nama('4') ?>  </h2>
                      <!-- <p>Civil Lawyer</p> -->
                    </div>
                  </div>
                  <div class="back">
                    <!-- back content -->
                    <blockquote>
                      <p   style="font-size: 14px;"><?=tutors_isi('4') ?></p>
                    </blockquote>
                    <div class="author d-flex">
                      <div class="image align-self-center">
                        <img src="assets/images/<?=tutors_foto('4') ?>" alt="">
                      </div>
                      <div class="name align-self-center ml-3"><?=tutors_nama('4') ?>  <!-- <span class="position">Civil Lawyer</span> --></div>
                    </div>
                  </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('16')) ?>);">
            <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>
        
<!-- 
    <section class="ftco-section ftco-no-pt ftco-no-pb bg-light">
      <div class="container">
        <div class="row d-flex justify-content-end">
            <div class="col-md-8 py-4 px-md-4 bg-primary">
                <div class="row">
                  <div class="col-md-6 ftco-animate d-flex align-items-center">
                    <h2 class="mb-0" style="color:white; font-size: 24px;">Subcribe to our Newsletter</h2>
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                    <form action="#" class="subscribe-form">
                      <div class="form-group d-flex">
                        <input type="text" class="form-control" placeholder="Enter email address">
                        <input type="submit" value="Subscribe" class="submit px-3">
                      </div>
                    </form>
                  </div>
              </div>
          </div>
        </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>