519 lines
22 KiB
PHP
519 lines
22 KiB
PHP
<!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>
|