{include file="`$lokasitemplate`komponen/home/header.html"}
    
    <section class="homepage" style="background-image: url({$lokasiwebtemplate}img/pnd.jpg);">
      <div class="container d-flex justify-content-center">
        <div class="col-lg-8 text-center">
          <h1 class="mb-5 text-white" data-aos="fade-up">Temukan Perjalanan Terbaik Anda</h1>
          <a href="{$fulldomain}destinasi" class="btn btn-primary shadow px-4 py-3" data-aos="flip-left">Jelajahi Wisata</a>
        </div>
      </div>
    </section>


    <section class="bg-light py-5">
      <div class="container">
        <div class="mb-4">
          <div class="text-primary">BERITA</div>
          <h2 class="text-black">Informasi terbaru pangandaran</h2>
        </div>
        <div class="row">
          <div class="col-lg-8">
            <div class="row">
              {foreach from=$datadepaninfowisata key=id item=a}
                <div class="col-12 mb-4" data-aos="fade-up">
                  <a href="{$a.link}" class="text-decoration-none">
                    <div class="card bg-white border-0 hover shadow-lg">
                      <div class="card-body">
                        <div class="row">
                          <div class="col-lg-5 d-flex align-items-center">
                            <figure class="crop-foto-berita">
                              <img src="{$a.gambar}" class="card-img-top w-100" alt="Gambar Informasi terbaru pangandaran {$a.nama}">
                            </figure>
                          </div>
                          <div class="col-lg-7 d-flex align-items-center mt-3 mt-lg-0">
                            <div>
                              <h5 class="card-title text-black mb-0">{$a.nama}</h5>
                              <small class="text-muted mt-2"><i class="fal fa-calendar mr-2"></i>{$a.tanggal}</small>
                              <div class="crop-ringkas mt-2">
                                <p class="mb-0 text-dark">{$a.ringkas}</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              {/foreach}
            </div>
          </div>
          <div class="col-lg-4">
            <div class="shadow-lg bg-white p-4" data-aos="fade-up">
              <h5 class="text-black mb-4">Tulisan Populer</h5>
              <ul class="list-unstyled">
                {foreach from=$populer key=id item=c}
                <li><a href="{$c.link}" class="text-dark">{$c.nama}</a><br><small><i class="fal fa-calendar mr-2"></i>{$c.tanggal}</small><hr></li>
                {/foreach}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>


    <section class="py-5">
      <div class="container">
        <div class="mb-4">
          <div class="text-primary">DESTINASI</div>
          <h2 class="text-black">Destinasi wisata pangandaran</h2>
        </div>
        <div class="row">
          {foreach from=$datadepandestinasiwisata key=id item=a}
          <div class="col-md-6 col-lg-4 mb-4 mb-lg-0" data-aos="fade-up">
            <div class="card p-3 border-0 shadow-lg">
              <a href="{$a.link}" class="crop">
                <figure class="crop-foto">
                  <img src="{$a.gambar}" class="card-img-top" alt="Gambar Destinasi wisata {$a.nama}">
                </figure>
              </a>
              <div class="mt-4">
                <h5 class="mb-2"><a href="{$a.link}" class="text-dark">
                  {$a.nama}
                </a></h5>
                <div class="crop-content">{$a.ringkas}</div>
              </div>
            </div>
          </div>
          {/foreach}
        </div>
      </div>
    </section>


    <section class="py-5 bg-light">
      <div class="container">
        <div class="mb-4">
          <div class="text-primary">AKOMODASI</div>
          <h2 class="text-black">Akomodasi wisata pangandaran</h2>
        </div>
        <div class="row">
          {foreach from=$datadepanakomodasi key=id item=a}
          <div class="col-md-6 col-lg-4 mb-4 mb-lg-0" data-aos="fade-up">
            <div class="card border-0 radius shadow-lg p-3" data-aos="fade-up">
              <a href="#">
                <figure class="crop-foto">
                  <img src="{$a.gambar}" class="card-img-top w-100" alt="{$lokasiwebtemplate}/img/logodipangandarandf.png">
                </figure>
              </a>
              <a href="#" class="h6 text-decoration-none text-black my-3 mb-0">{$a.nama}</a>
              <div class="text-black mb-3"><span class="h4 text-primary">Rp. {$a.publishrate}</span>/Malam</div>
               <div>
                {$a.ringkas}
              </div>
              <!-- <div>
                <i class="fal fa-bed"></i><span class="mx-2">:</span> 2 Kasur
              </div>
               <div>
                <i class="fal fa-users"></i><span class="mx-2">:</span> 3 orang
              </div> -->
              <div>
                 <i class="fal fa-map-marked"></i><span class="mx-2">:</span> {$a.jarakpantai}m dari pantai
              </div>
              <a href="{$a.link}" class="btn btn-light shadow-sm mt-3">Selengkapnya</a>
            </div>
          </div>
          {/foreach}
        </div>
        <div class="text-center mt-4">
         <a href="{$fulldomain}akomodasi" class="btn btn-light shadow-sm mt-3">Akomodasi lainnya</a>
       </div>
      </div>
    </section>
    
{include file="`$lokasitemplate`komponen/home/footer.html"}