<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>TapakMP</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Favicons -->
  <link href="{{ asset('assets/img/favicon.png') }}" rel="icon">
  <link href="{{ asset('assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/vendor/aos/aos.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/vendor/glightbox/css/glightbox.min.css') }}" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="{{ asset('assets/css/main.css') }}" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Constructo
  * Template URL: https://bootstrapmade.com/constructo-bootstrap-construction-template/
  * Updated: Aug 30 2025 with Bootstrap v5.3.8
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body class="index-page">

  <header id="header" class="header sticky-top">

    <div class="topbar d-flex align-items-center dark-background">
      <div class="container d-flex justify-content-center justify-content-md-between">
        <div class="contact-info d-flex align-items-center">
          <i class="bi bi-envelope d-flex align-items-center"><a href="mailto:contact@example.com">mpcabangjember@gmail.com</a></i>
          <i class="bi bi-phone d-flex align-items-center ms-4"><span>081776198245</span></i>
        </div>
        <div class="social-links d-none d-md-flex align-items-center">
          <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
          <a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
          <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
        </div>
      </div>
    </div><!-- End Top Bar -->

    <div class="branding d-flex align-items-cente">

      <div class="container position-relative d-flex align-items-center justify-content-between">
        <a href="index.html" class="logo d-flex align-items-center">
          <!-- Uncomment the line below if you also wish to use an image logo -->
          <!-- <img src="{{ asset('assets/img/logo.webp') }}" alt=""> -->
          <h1 class="sitename">TapakMP</h1>
        </a>

        <nav id="navmenu" class="navmenu">
          <ul>
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="about.html">Tentang</a></li>
            <li><a href="services.html">Fitur Utama</a></li>
            <li><a href="projects.html">Panduan</a></li>
            <li><a href="contact.html">Kontak</a></li>
          </ul>
          <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
        </nav>

      </div>

    </div>

  </header>

  <main class="main">

    <!-- Hero Section -->
    <section id="hero" class="hero section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="hero-content" data-aos="fade-right" data-aos-delay="200">
              <span class="subtitle">PPS Betako Merpati Putih Cabang Jember</span>
              <h1>Langkah Baru Tata Kelola PPS Betako Merpati Putih Cabang Jember.</h1>
              <p>Membangun organisasi yang lebih tertib, transparan, dan terintegrasi melalui TapakMP.</p>

              <div class="hero-buttons">
                <a href="#" class="btn-primary">Masuk Sistem</a>
                <a href="#" class="btn-secondary">Jadwal Latihan</a>
              </div>

              <div class="trust-badges">
                <div class="badge-item">
                  <i class="bi bi-building-check"></i>
                  <div class="badge-text">
                    <span class="count">25+</span>
                    <span class="label">Years Experience</span>
                  </div>
                </div>
                <div class="badge-item">
                  <i class="bi bi-trophy"></i>
                  <div class="badge-text">
                    <span class="count">300+</span>
                    <span class="label">Anggota Aktif</span>
                  </div>
                </div>
                <div class="badge-item">
                  <i class="bi bi-people"></i>
                  <div class="badge-text">
                    <span class="count">12+</span>
                    <span class="label">Kolat Aktif</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6" data-aos="fade-left" data-aos-delay="300">
            <div class="hero-image">
              <img src="{{ asset('assets/img/construction/mpfoto.jpeg') }}" alt="fotoMP" class="img-fluid">
              <div class="image-badge">
                <span></span>
                <p>Pewaris Tradisi Bangsa</p>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /Hero Section -->

    <!-- About Section -->
    <section id="about" class="about section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row align-items-center g-5">
          <div class="col-lg-6">
            <div class="about-content" data-aos="fade-right" data-aos-delay="200">
              <h2>Melestarikan Tradisi, Membentuk Karakter Bangsa</h2>
              <p class="lead">PPS Betako Merpati Putih Cabang Jember terus berkomitmen untuk mencetak pesilat yang tangguh secara fisik dan mental.
                Seiring dengan perkembangan zaman, kami menghadirkan TapakMP sebagai langkah nyata digitalisasi organisasi untuk mempermudah manajemen
                anggota dan transparansi keuangan di seluruh wilayah Jember</p>
              <p>Melalui sistem ini, setiap anggota dan pengurus dapat saling terintegrasi dalam satu platform yang akurat. Kami percaya bahwa tata kelola
                yang tertib adalah fondasi utama untuk mencapai prestasi yang lebih tinggi, baik di tingkat daerah maupun nasional.</p>
              <div class="achievement-boxes row g-4 mt-4">
                <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="400">
                  <div class="achievement-box">
                    <h3>300+</h3>
                    <p>Anggota Aktif</p>
                  </div>
                </div>
                <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="500">
                  <div class="achievement-box">
                    <h3>100%</h3>
                    <p>Warisan Asli</p>
                  </div>
                </div>
                <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="600">
                  <div class="achievement-box">
                    <h3>12</h3>
                    <p>Kelompok Latihan</p>
                  </div>
                </div>
              </div>


              <div class="cta-container mt-5" data-aos="fade-up" data-aos-delay="800">
                <a href="about.html" class="btn btn-primary">Akses Ruang Anggota</a>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="about-image position-relative" data-aos="fade-left" data-aos-delay="200">
              <img src="{{ asset('assets/img/construction/project-3.webp') }}" alt="Construction Team" class="img-fluid main-image rounded">
              <div class="image-overlay">
                <img src="{{ asset('assets/img/construction/project-7.webp') }}" alt="Construction Project" class="img-fluid rounded">
              </div>
              <div class="experience-badge" data-aos="zoom-in" data-aos-delay="500">
                <span>25+</span>
                <p>Years of Experience</p>
              </div>
            </div>
          </div>
        </div>

      </div>

    </section><!-- /About Section -->

    <!-- Services Section -->
    <section id="services" class="services section">

      <!-- Section Title -->
      <div class="container section-title">
        <h2>Fitur Utama</h2>
        <p>Fitur utama dari website ni merupakan sebagai berikut : </p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4">
          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
            <div class="service-card">
              <div class="service-icon">
                <i class="bi bi-building"></i>
              </div>
              <h3>Manajemen Kenaggotaan</h3>
              <p>Kelola data profil seluruh pesilat Merpati Putih Cabang Jember secara digital untuk memudahkan koordinasi antar kelompok latihan (Kolat).</p>
              <div class="service-features">
                <span><i class="bi bi-check-circle"></i> Profil Digital Anggota</span>
                <span><i class="bi bi-check-circle"></i> Update Status Keanggotaan</span>
                <span><i class="bi bi-check-circle"></i> Informasi Kolat Asal</span>
              </div>
            </div>
          </div><!-- End Service Item -->

          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
            <div class="service-card featured">
              <div class="service-badge">Transparasi Keuangan</div>
              <div class="service-icon">
                <i class="bi bi-house"></i>
              </div>
              <h3>Laporan Keuangan</h3>
              <p>Pantau pergerakan iuran dan kas organisasi secara transparan. Memastikan pengelolaan dana cabang terdokumentasi dengan baik.</p>
              <div class="service-features">
                <span><i class="bi bi-check-circle"></i> Catatan Iuran SPP</span>
                <span><i class="bi bi-check-circle"></i> Rekapitulasi Kas Cabang</span>
                <span><i class="bi bi-check-circle"></i> Laporan Dana Masuk dan Keluar</span>
              </div>
            </div>
          </div><!-- End Service Item -->

          <div class="col-lg-4" data-aos="fade-up" data-aos-delay="400">
            <div class="service-card">
              <div class="service-icon">
                <i class="bi bi-gear"></i>
              </div>
              <h3>Presensi Latihan Rutin</h3>
              <p>Sistem absensi digital untuk mencatat kehadiran anggota di setiap sesi latihan guna memantau keaktifan pesilat di tiap Kolat.</p>
              <div class="service-features">
                <span><i class="bi bi-check-circle"></i> Input Kehadiran Cepat</span>
                <span><i class="bi bi-check-circle"></i> Rekap Absensi Bulanan</span>
                <span><i class="bi bi-check-circle"></i> Pantau Keaktifan Anggota</span>
              </div>
            </div>
          </div><!-- End Service Item -->
        </div>

    </section><!-- /Services Section -->

    <!-- Projects Section -->
    <section id="projects" class="projects section">

      <!-- Section Title -->
      <!-- End Section Title -->

    <!-- /Projects Section -->

    <!-- Testimonials Section -->
    <!-- /Testimonials Section -->

    <!-- Certifications Section -->
    <section id="certifications" class="certifications section">

      <!-- Section Title -->
      <!-- End Section Title -->

      <!-- /Certifications Section -->

    <!-- Team Section -->
    <!-- /Team Section -->

    <!-- Call To Action Section -->
    <section id="call-to-action" class="call-to-action section light-background">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row g-5 align-items-center">

          <div class="col-lg-6">
            <div class="cta-hero-content" data-aos="fade-right" data-aos-delay="200">
              <div class="badge-wrapper">
                <span class="cta-badge">
                  <i class="bi bi-shield-check"></i>
                  Terintegrasi & Aman Sejak 2026
                </span>
              </div>

              <h2>Siap Melangkah Bersama TapakMP?</h2>
              <p>Pastikan data Anda atau Kelompok Latihan (Kolat)
                Anda terdata secara resmi di Cabang Jember. Hubungi admin
                kami jika Anda mengalamikendala akses atau ingin mendaftarkan akun baru.</p>

              <div class="feature-highlights">
                <div class="highlight-item">
                  <i class="bi bi-check-circle-fill"></i>
                  <span>Bantuan pendaftaran akun anggota baru</span>
                </div>
                <div class="highlight-item">
                  <i class="bi bi-check-circle-fill"></i>
                  <span>Dukungan teknis kendala <i>login</i> dan <i>password</i></span>
                </div>
                <div class="highlight-item">
                  <i class="bi bi-check-circle-fill"></i>
                  <span>Layanan panduan input data keuangan & absensi</span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class="cta-form-section" data-aos="fade-left" data-aos-delay="300">
              <div class="form-container">
                <div class="form-header">
                  <h3>Hubungi Admin Cabang</h3>
                  <p>Lengkapi data di bawah untuk bantuan administrasi sistem</p>
                </div>

                <form action="forms/get-a-quote.php" method="post" class="php-email-form">
                  <div class="row g-3">
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="text" name="name" class="form-control" placeholder="Nama Lengkap" required="">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <input type="email" name="email" class="form-control" placeholder="Alamat Email Aktif" required="">
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="form-group">
                        <input type="tel" name="phone" class="form-control" placeholder="Nomor WhatsApp" required="">
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="form-group">
                        <select name="type" class="form-control" required="">
                          <option value="">Pilih Jenis Bantuan</option>
                          <option value="residential">Pendaftaran akun baru</option>
                          <option value="commercial">Masalah Login</option>
                          <option value="renovation">Laporan Keuangan</option>
                          <option value="other">Lainnya</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="form-group">
                        <textarea name="message" class="form-control" rows="4" placeholder="Detail Pesan atau Kendala" required=""></textarea>
                      </div>
                    </div>
                  </div>

                  <div class="loading">Loading</div>
                  <div class="error-message"></div>
                  <div class="sent-message">Kirim Pesan Sekarang!</div>

                  <div class="form-actions">
                    <button type="submit" class="btn btn-primary">
                      <i class="bi bi-send"></i>
                      Kirim Pesan
                    </button>

                    <div class="contact-alternative">
    <span>Atau hubungi kami secara langsung melalui:</span>
    <a href="https://wa.me/6281617376290" class="phone-link" target="_blank" rel="noopener noreferrer">
        <i class="bi bi-whatsapp"></i>
        +62 816-1737-6290
    </a>
</div>
                  </div>
                </form>
              </div>

              <div class="trust-indicators" data-aos="fade-up" data-aos-delay="400">
                <div class="row g-3">
                  <div class="col-4">
                    <div class="trust-item">
                      <div class="trust-icon">
                        <i class="bi bi-clock"></i>
                      </div>
                      <div class="trust-content">
                        <span class="trust-number">08.00 - 17.00</span>
                        <span class="trust-label">Respon Admin</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="trust-item">
                      <div class="trust-icon">
                        <i class="bi bi-star-fill"></i>
                      </div>
                      <div class="trust-content">
                        <span class="trust-number">4.9</span>
                        <span class="trust-label">Customer Rating</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-4">
                    <div class="trust-item">
                      <div class="trust-icon">
                        <i class="bi bi-hammer"></i>
                      </div>
                      <div class="trust-content">
                        <span class="trust-number">350+</span>
                        <span class="trust-label">Projects Done</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

    </section><!-- /Call To Action Section -->

  </main>

  <footer id="footer" class="footer dark-background">

    <div class="container footer-top">
      <div class="row gy-4">
        <div class="col-lg-5 col-md-12 footer-about">
          <a href="index.html" class="logo d-flex align-items-center">
            <span class="sitename">MyWebsite</span>
          </a>
          <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
          <div class="social-links d-flex mt-4">
            <a href=""><i class="bi bi-twitter-x"></i></a>
            <a href=""><i class="bi bi-facebook"></i></a>
            <a href=""><i class="bi bi-instagram"></i></a>
            <a href=""><i class="bi bi-linkedin"></i></a>
          </div>
        </div>

        <div class="col-lg-2 col-6 footer-links">
          <h4>Useful Links</h4>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Terms of service</a></li>
            <li><a href="#">Privacy policy</a></li>
          </ul>
        </div>

        <div class="col-lg-2 col-6 footer-links">
          <h4>Our Services</h4>
          <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Product Management</a></li>
            <li><a href="#">Marketing</a></li>
            <li><a href="#">Graphic Design</a></li>
          </ul>
        </div>

        <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
          <h4>Contact Us</h4>
          <p>A108 Adam Street</p>
          <p>New York, NY 535022</p>
          <p>United States</p>
          <p class="mt-4"><strong>Phone:</strong> <span>+1 5589 55488 55</span></p>
          <p><strong>Email:</strong> <span>info@example.com</span></p>
        </div>

      </div>
    </div>

    <div class="container copyright text-center mt-4">
      <p>© <span>Copyright</span> <strong class="px-1 sitename">Constructo</strong> <span>All Rights Reserved</span></p>
      <div class="credits">
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you've purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> | <a href="https://bootstrapmade.com/tools/">DevTools</a>
      </div>
    </div>

  </footer>

  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  <script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
  <script src="{{ asset('assets/vendor/aos/aos.js') }}"></script>
  <script src="{{ asset('assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
  <script src="{{ asset('assets/vendor/glightbox/js/glightbox.min.js') }}"></script>

  <!-- Main JS File -->
  <script src="{{ asset('assets/js/main.js') }}"></script>

</body>

</html>
