<?php 
$jam = date('H');
if ($jam >= 5 && $jam < 11) {
    $waktuSapa = "Selamat Pagi";
} elseif ($jam >= 11 && $jam < 15) {
    $waktuSapa = "Selamat Siang";
} elseif ($jam >= 15 && $jam < 18) {
    $waktuSapa = "Selamat Sore";
} else {
    $waktuSapa = "Selamat Malam";
}
$pesantext = $waktuSapa.', Ada yang mau saya tanyakan terkait Apklikasi ManjaPro';
?>
<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>ManjaPro</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="dist/img/logo-sm.png" type="image/gif" />
    <!-- ======== CSS here ======== -->
    <link rel="stylesheet" href="web/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="web/assets/css/lineicons.css" />
    <link rel="stylesheet" href="web/assets/css/animate.css" />
    <link rel="stylesheet" href="web/assets/css/main.css" />
  </head>
  <body>

    <!-- ======== preloader start ======== -->
    <div class="preloader">
      <div class="loader">
        <div class="spinner">
          <div class="spinner-container">
            <div class="spinner-rotator">
              <div class="spinner-left">
                <div class="spinner-circle"></div>
              </div>
              <div class="spinner-right">
                <div class="spinner-circle"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- preloader end -->

    <!-- ======== header start ======== -->
    <header class="header">
      <div class="navbar-area">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg-12">
              <nav class="navbar navbar-expand-lg">
                <a class="navbar-brand" href="index.html">
                  <img src="web/assets/img/logo/logo_wht.png" alt="Logo" />
                </a>
                <button
                  class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarSupportedContent"
                  aria-controls="navbarSupportedContent"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <span class="toggler-icon"></span>
                  <span class="toggler-icon"></span>
                  <span class="toggler-icon"></span>
                </button>

                <div
                  class="collapse navbar-collapse sub-menu-bar"
                  id="navbarSupportedContent"
                >
                  <ul id="nav" class="navbar-nav ms-auto">
                    <li class="nav-item">
                      <a class="page-scroll active" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="page-scroll" href="#features">Fitur</a>
                    </li>
                    <li class="nav-item">
                      <a class="page-scroll" href="#why">Harga</a>
                    </li>
                    <li class="nav-item">
                      <a href="/login" class="main-btn btn-hover bg-light fadeInUp text-primary" style="width: 100px;">Login</a>
                    </li>
                    <li class="nav-item">
                      <a href="/register">Register</a>
                    </li>
                  </ul>
                </div>
                <!-- navbar collapse -->
              </nav>
              <!-- navbar -->
            </div>
          </div>
          <!-- row -->
        </div>
        <!-- container -->
      </div>
      <!-- navbar area -->
    </header>
    <!-- ======== header end ======== -->

    <!-- ======== hero-section start ======== -->
    <section id="home" class="hero-section">
      <div class="container">
        <div class="row align-items-center position-relative">
          <div class="col-lg-6">
            <!--<div class="hero-content">-->
            <!--  <h1 class="wow fadeInUp" data-wow-delay=".4s">-->
            <!--    Satu Tampilan Kontrol Semua Kebutuhan-->
            <!--  </h1>-->
            <!--  <p class="wow fadeInUp" data-wow-delay=".6s" style="text-align: justify;">-->
            <!--    Aplikasi management user mikrotik dengan berbagai fitur yang sesuai kebutuhan pengguna, mulai dari PPPOE, Hotspot, Kirim Tagihan Otomatis, Isolir Otomatis, WhatsApp Gateway, Multi User Admin, Tiket Gangguan, Aplikasi Agen Hotspot, Invoice, Managemnet OLT, Support Lebih dari satu Mikrotik dan Berbagai banyak Automasi yang kami sediakan untuk memudahkan pekerjaan anda.-->
            <!--  </p>-->
            <!--  <a href="/register"-->
            <!--    class="main-btn border-btn btn-hover wow fadeInUp"-->
            <!--    data-wow-delay=".6s">Registrasi Sekarang</a>-->
            <!--  <a href="#features" class="scroll-bottom">-->
            <!--    <i class="lni lni-arrow-down"></i-->
            <!--  ></a>-->
            <!--</div>-->
            <div class="hero-content">
              <h1 class="wow fadeInUp" data-wow-delay=".4s">
                Satu Tampilan Kontrol Semua Kebutuhan
              </h1>
              <p class="wow fadeInUp" data-wow-delay=".6s" style="text-align: justify;">
                <strong>MANJAPRO</strong> (Manajemen Jaringan Profesional) adalah solusi all-in-one untuk manajemen pengguna Mikrotik. Dilengkapi dengan fitur lengkap seperti PPPOE, Hotspot, tagihan & isolir otomatis, WhatsApp Gateway, multi admin, tiket gangguan, aplikasi agen hotspot, invoice, manajemen OLT, dukungan multi Mikrotik, serta automasi canggih yang dirancang untuk mempermudah dan mempercepat pekerjaan Anda.  
                💡 Praktis, otomatis, dan efisien — <strong>MANJAPRO</strong> adalah partner terbaik untuk managemen jaringan Anda!
              </p>
              <a href="/register"
                class="main-btn border-btn btn-hover wow fadeInUp"
                data-wow-delay=".6s">Registrasi Sekarang</a>
              <a href="#features" class="scroll-bottom">
                <i class="lni lni-arrow-down"></i>
              </a>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="hero-img wow fadeInUp" data-wow-delay=".5s">
              <img src="web/assets/img/hero/hero-img.png" alt="" />
            </div>
          </div>
        </div>
        <!-- <center>
          <h2 class="wow fadeInUp mt-4" data-wow-delay=".6s">Gunakan dulu 1 Minggu baru Mulai Bayar</h2>
        </center> -->
      </div>
    </section>
    <!-- ======== hero-section end ======== -->

    <!-- ======== feature-section start ======== -->
    <section id="features" class="feature-section pt-120">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-4 col-md-8 col-sm-10">
            <div class="single-feature">
              <div class="icon">
                <i class="lni lni-laptop"></i>
              </div>
              <div class="content">
                <h3>Mudah di Gunakan</h3>
                <p>
                  Bisa custom fitur yang mau di gunakan jadi gak bikin ribet dan pusing karena banyak fitur.
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-8 col-sm-10">
            <div class="single-feature">
              <div class="icon">
                <i class="lni lni-users"></i>
              </div>
              <div class="content">
                <h3>Multi User Akses</h3>
                <p>
                  Bisa membuat Group akses sesuai kebutuhan (Admin, Teknisi, Penagih, dll).
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-8 col-sm-10">
            <div class="single-feature">
              <div class="icon">
                <i class="lni lni-map"></i>
              </div>
              <div class="content">
                <h3>Maps Monitoring</h3>
                <p>
                  Monitoring Pelanggan dan Topologi jadi mudah karena sudah muncul dalam 1 tampilan.
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-8 col-sm-10">
            <div class="single-feature">
              <div class="icon">
                <i class="lni lni-code-alt"></i>
              </div>
              <div class="content">
                <h3>Management Tagihan</h3>
                <p>
                  Pengelolaan tagihan sudah otomatis dan mulai kirim tagihan, peringatan tagihan, kirim invoice jika sudah melakukan pembayaran, isolir pelanggan.
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-8 col-sm-10">
            <div class="single-feature">
              <div class="icon">
                <i class="lni lni-ticket"></i>
              </div>
              <div class="content">
                <h3>Tiket Managemnet</h3>
                <p>
                  Sistem Tiketing yang profesional, setiap tiket bisa di di trancking status dari mulai di buat sampai selesai
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ======== feature-section end ======== -->

    <!-- ======== about-section start ======== -->
    <section id="about" class="about-section pt-150">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-6 col-lg-6">
            <div class="about-img">
              <img src="web/assets/img/about/about-1.png" alt="" class="w-100" />
              <img
                src="web/assets/img/about/about-left-shape.svg"
                alt=""
                class="shape shape-1"
              />
              <img
                src="web/assets/img/about/left-dots.svg"
                alt=""
                class="shape shape-2"
              />
            </div>
          </div>
          <div class="col-xl-6 col-lg-6">
            <div class="about-content">
              <div class="section-title mb-30">
                <h2 class="mb-25 wow fadeInUp" data-wow-delay=".2s">
                  Tersedia Apk Android untuk Agen Voucher
                </h2>
                <p class="wow fadeInUp" data-wow-delay=".4s">
                  Kami menyediakan Apk Pendukung untuk Agen Voucher yang sudah Support Printer Thermal Bluetooth, untuk mempermudah pembuatan Voucher Hotspot di sisi Agen dan Memudahkan Pemantauan di sisi Managemant.
                </p>
              </div>
              <a
                href="https://bilspro.com/apk/BilsProAgen.apk"
                class="main-btn btn-hover border-btn wow fadeInUp"
                data-wow-delay=".6s"
                download>Download Disini</a
              >
              <p>
                <a class="mt-4 wow fadeInUp" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" data-wow-delay=".6s">
                  Syarat & Ketentuan
                </a>
              </p>
              <div class="collapse" id="collapseExample">
                <div class="card card-body" style="border: none;">
                  <ul style="zoom: 80%;">
                    <li><p>Gunakan apk ini dengan Bijak</p></li>
                    <li><p>Jika disalahgunakan maka semua layanan nya akan kami berhentikan sepihak</p></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ======== about-section end ======== -->

    <!-- ======== feature-section start ======== -->
    <section id="why" class="feature-extended-section pt-100">
      <div class="feature-extended-wrapper">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-xxl-5 col-xl-6 col-lg-8 col-md-9">
              <div class="section-title text-center mb-60">
                <h2 class="mb-25 wow fadeInUp" data-wow-delay=".2s">
                  Paket Layanan
                </h2>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-4 col-md-6">
              <div class="single-feature-extended text-center">
                <div class="icon">
                  <i class="lni lni-database"></i>
                </div>
                <div class="content">
                  <h3>Paket Basic</h3><hr>
                  <p>Managemant PPPOE Max 200</p><hr>
                  <p>Managemant Hotspot Unlimited</p><hr>
                  <p>Apk Agen Hotspot Max 10</p><hr>
                  <p>Multi Level Akses</p><hr>
                  <h3>Rp. 200.000,- / Bln</h3><hr>
                  <a href="/register"
                      class="main-btn border-btn btn-hover wow fadeInUp"
                      data-wow-delay=".6s">Order Now</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6">
              <div class="single-feature-extended text-center">
                <div class="icon">
                  <i class="lni lni-layers"></i>
                </div>
                <div class="content">
                  <h3>Paket Intermediate</h3><hr>
                  <p>Managemant PPPOE Max 500</p><hr>
                  <p>Managemant Hotspot Unlimited</p><hr>
                  <p>Apk Agen Hotspot Max 20</p><hr>
                  <p>Multi Level Akses</p><hr>
                  <h3>Rp. 300.000,- / Bln</h3><hr>
                  <a href="/register"
                      class="main-btn border-btn btn-hover wow fadeInUp"
                      data-wow-delay=".6s">Order Now</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6">
              <div class="single-feature-extended text-center">
                <div class="icon">
                  <i class="lni lni-grid-alt"></i>
                </div>
                <div class="content">
                  <h3>Paket Advanced</h3><hr>
                  <p>Managemant PPPOE Max 800</p><hr>
                  <p>Managemant Hotspot Unlimited</p><hr>
                  <p>Apk Agen Hotspot Max 50</p><hr>
                  <p>Multi Level Akses</p><hr>
                  <h3>Rp. 450.000,- / Bln</h3><hr>
                  <a href="/register"
                      class="main-btn border-btn btn-hover wow fadeInUp"
                      data-wow-delay=".6s">Order Now</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6">
              <div class="single-feature-extended text-center">
                <div class="icon">
                  <i class="lni lni-network"></i>
                </div>
                <div class="content">
                  <h3>Paket Expert</h3><hr>
                  <p>Managemant PPPOE Max 1200</p><hr>
                  <p>Managemant Hotspot Unlimited</p><hr>
                  <p>Apk Agen Hotspot Max 70</p><hr>
                  <p>Multi Level Akses</p><hr>
                  <h3>Rp. 750.000,- / Bln</h3><hr>
                  <a href="/register"
                      class="main-btn border-btn btn-hover wow fadeInUp"
                      data-wow-delay=".6s">Order Now</a>
                </div>
              </div>
            </div><div class="col-lg-4 col-md-6">
              <div class="single-feature-extended text-center">
                <div class="icon">
                  <i class="lni lni-medium"></i>
                </div>
                <div class="content">
                  <h3>Paket Master</h3><hr>
                  <p>Managemant PPPOE Max 1600</p><hr>
                  <p>Managemant Hotspot Unlimited</p><hr>
                  <p>Apk Agen Hotspot Max 100</p><hr>
                  <p>Multi Level Akses</p><hr>
                  <h3>Rp. 1.000.000,- / Bln</h3><hr>
                  <a href="/register"
                      class="main-btn border-btn btn-hover wow fadeInUp"
                      data-wow-delay=".6s">Order Now</a>
                </div>
              </div>
            </div><div class="col-lg-4 col-md-6">
              <div class="single-feature-extended text-center">
                <div class="icon">
                  <i class="lni lni-laptop-phone"></i>
                </div>
                <div class="content">
                  <h3>Paket Custom</h3><hr>
                  <p>Managemant PPPOE Unlimited</p><hr>
                  <p>Managemant Hotspot Unlimited</p><hr>
                  <p>Apk Agen Hotspot Unlimited</p><hr>
                  <p>Multi Level Akses</p><hr>
                  <h3>Rp. ?,- / Bln</h3><hr>
                  <a href="/register"
                      class="main-btn border-btn btn-hover wow fadeInUp"
                      data-wow-delay=".6s">Order Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ======== feature-section end ======== -->

    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Form Registrasi</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Order</button>
          </div>
        </div>
      </div>
    </div>
    <!-- End Modal -->

    <!-- ======== footer start ======== -->
    <footer class="footer">
      <div class="container">
        <div class="widget-wrapper">
          <div class="row">
            <div class="col-xl-4 col-lg-4 col-md-6">
              <div class="footer-widget">
                <div class="logo mb-30">
                  <a href="index.html">
                    <img src="web/assets/img/logo/logo_wht.png" alt="" width="200px" />
                  </a>
                </div>
                <p class="desc mb-30 text-white">
                  Cikembar - Sukabumi - Jawa Barat<br>
                  Tlp. Support 1 : <a class="text-white" href="https://wa.me/6281242659178?text=<?php echo $pesantext; ?>" target="_blank"><i class="lni lni-whatsapp"></i> 0812-4265-9178</a><br>
                  Tlp. Support 2 : <a class="text-white" href="https://wa.me/6285603935233?text=<?php echo $pesantext; ?>" target="_blank"><i class="lni lni-whatsapp"></i> 0856-0393-5233</a>
                </p>
                <ul class="socials">
                  <li>
                    <a href="jvascript:void(0)">
                      <i class="lni lni-facebook-filled"></i>
                    </a>
                  </li>
                  <li>
                    <a href="jvascript:void(0)">
                      <i class="lni lni-twitter-filled"></i>
                    </a>
                  </li>
                  <li>
                    <a href="jvascript:void(0)">
                      <i class="lni lni-instagram-filled"></i>
                    </a>
                  </li>
                  <li>
                    <a href="jvascript:void(0)">
                      <i class="lni lni-support"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </footer>
    <!-- ======== footer end ======== -->

    <!-- ======== scroll-top ======== -->
    <a href="#" class="scroll-top btn-hover">
      <i class="lni lni-chevron-up"></i>
    </a>

    <!-- ======== JS here ======== -->
    <script src="web/assets/js/bootstrap.bundle.min.js"></script>
    <script src="web/assets/js/wow.min.js"></script>
    <script src="web/assets/js/main.js"></script>
  </body>
</html>