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

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

        <!-- Google Web Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Montserrat:wght@200;400;600&display=swap" rel="stylesheet"> 

        <!-- Icon Font Stylesheet -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

        <!-- Libraries Stylesheet -->
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

        <!-- Customized Bootstrap Stylesheet -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="css/style.css" rel="stylesheet">

        

    </head>

    <body>

        <!-- Spinner Start -->
        <div id="spinner" class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50  d-flex align-items-center justify-content-center">
            <div class="spinner-grow text-primary" role="status"></div>
        </div>
        <!-- Spinner End -->


        <!-- Navbar start -->
        <div class="container-fluid border-bottom bg-light wow fadeIn" data-wow-delay="0.1s">
            <div class="container topbar bg-primary d-none d-lg-block py-2" style="border-radius: 0 40px">
                <div class="d-flex justify-content-between">
                    <div class="top-info ps-2">
                        <small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#" class="text-white">Jatiwaringin,Mauk</a></small>
                        <small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">paudalmubarok@gmail.com</a></small>
                    </div>
                    <div class="top-link pe-2">
                        <a href="" class="btn btn-light btn-sm-square rounded-circle"><i class="fab fa-facebook-f text-secondary"></i></a>
                        <a href="" class="btn btn-light btn-sm-square rounded-circle"><i class="fab fa-twitter text-secondary"></i></a>
                        <a href="" class="btn btn-light btn-sm-square rounded-circle"><i class="fab fa-instagram text-secondary"></i></a>
                        <a href="" class="btn btn-light btn-sm-square rounded-circle me-0"><i class="fab fa-linkedin-in text-secondary"></i></a>
                    </div>
                </div>
            </div>
            <div class="container px-0">
                <nav class="navbar navbar-light navbar-expand-xl py-3">
                    <a href="index.php" class="navbar-brand"><h1 class="text-primary display-6">Mub<span class="text-secondary">arok</span></h1></a>
                    <button class="navbar-toggler py-2 px-3 ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                        <span class="fa fa-bars text-primary"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarCollapse">
                        <div class="navbar-nav mx-auto">
                            <a href="index.php" class="nav-item nav-link active">Beranda</a>
                            <a href="tentang" class="nav-item nav-link">Tentang kami</a>
                            <a href="kegiatan" class="nav-item nav-link">Kegiatan</a>
                            <a href="layanan" class="nav-item nav-link">Layanan</a>
                            <a href="program" class="nav-item nav-link">Programs</a>
                            <div class="nav-item dropdown">
                            </div>
                            <a href="kontak" class="nav-item nav-link">Hubungi kami</a>
                            <a href="#" class="admin-btn ms-3" data-bs-toggle="modal" data-bs-target="#adminLoginModal">
    <i class="fas fa-user-shield"></i>Admin
</a>
                        </a>
                        </div>
                        <div class="d-flex me-4">
                            <div id="phone-tada" class="d-flex align-items-center justify-content-center">
                                <a href="" class="position-relative wow tada" data-wow-delay=".9s" >
                                    <i class="fab fa-whatsapp fa-2x text-success me-4"></i>
                                    <div class="position-absolute" style="top: -7px; left: 20px;">
                                        <span><i class="fa fa-comment-dots text-secondary"></i></span>
                                    </div>
                                </a>
                            </div>
                            <div class="d-flex flex-column pe-3 border-end border-primary">
                                <span class="text-primary">Punya Pertanyaan?</span>
                                <a href="https://wa.me/6289668378755" target="_blank" class="text-success text-decoration-none">
                                WhatsApp
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <!-- Navbar End -->


        <!-- Modal Search Start -->
        <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content rounded-0">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Search by keyword</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body d-flex align-items-center">
                        <div class="input-group w-75 mx-auto d-flex">
                            <input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
                            <span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Search End -->

        
        <!-- Page Header Start -->
        <div class="container-fluid page-header py-5 wow fadeIn" data-wow-delay="0.1s">
            <div class="container text-center py-5">
                <h1 class="display-2 text-white mb-4">Layanan</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center mb-0">
                        <li class="breadcrumb-item"><a href="#">Beranda</a></li>
                        <li class="breadcrumb-item"><a href="#">Pages</a></li>
                        <li class="breadcrumb-item text-white" aria-current="page">Layanan</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header End -->


        <!-- Service Start -->
        <div class="container-fluid service py-5">
            <div class="container py-5">
                <div class="mx-auto text-center wow fadeIn" data-wow-delay="0.1s" style="max-width: 700px;">
                    <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">Apa yang Kami Tawarkan</h4>
                    <h1 class="mb-5 display-3">Terima Kasih Telah Mempercayakan Anak Anda di PAUD Al Mubarok</h1>
                </div>
                <div class="row g-5">
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.1s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-gamepad fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Belajar & Bermain</a>
                                    <p class="my-3">Anak belajar sambil bermain dalam suasana yang menyenangkan, aman, dan penuh keceriaan. Melalui kegiatan bermain yang terarah dan sesuai dengan tahap perkembangan, anak tidak hanya memperoleh pengetahuan baru tetapi juga mengasah keterampilan motorik halus maupun kasar, belajar membangun hubungan sosial dengan teman sebaya, serta mengembangkan kemampuan emosionalnya secara alami. Proses belajar yang berbasis pada permainan ini menjadikan anak lebih aktif, kreatif, dan mampu bereksplorasi, sehingga mendukung tumbuh kembang mereka secara menyeluruh dan optimal sesuai dengan tujuan pendidikan anak usia dini.</p>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.3s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-sort-alpha-down fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Program A sampai Z</a>
                                    <p class="my-3">Kami menyediakan berbagai kegiatan edukatif yang dirancang khusus untuk mendukung tumbuh kembang anak usia dini. Program kegiatan tersebut mencakup pembelajaran seni yang melatih kreativitas dan imajinasi, kegiatan hafalan yang membantu menajamkan daya ingat serta membentuk dasar akhlak dan karakter, pembelajaran membaca dini untuk menumbuhkan minat literasi sejak kecil, aktivitas olahraga yang memperkuat kesehatan fisik serta koordinasi motorik, hingga pengenalan keterampilan dasar yang bermanfaat dalam kehidupan sehari-hari. Semua kegiatan ini disusun dengan pendekatan yang menyenangkan, interaktif, dan sesuai dengan tahap perkembangan anak, sehingga mereka dapat belajar dengan penuh keceriaan, percaya diri, dan merasa termotivasi untuk terus bereksplorasi.

.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.5s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-users fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Guru Profesional</a>
                                    <p class="my-3">Anak didampingi oleh guru-guru berpengalaman yang tidak hanya memiliki kompetensi di bidang pendidikan anak usia dini, tetapi juga menunjukkan kepedulian, kesabaran, serta pemahaman mendalam terhadap setiap kebutuhan perkembangan anak. Dengan pendekatan yang penuh kasih sayang dan metode pembelajaran yang sesuai tahap tumbuh kembang, para guru mampu menciptakan suasana belajar yang nyaman, aman, dan menyenangkan. Kehadiran guru sebagai pendamping sekaligus teladan membantu anak berkembang secara optimal dalam aspek kognitif, sosial, emosional, maupun spiritual.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-6 col-xl-3 wow fadeIn" data-wow-delay="0.7s">
                        <div class="text-center border-primary border bg-white service-item">
                            <div class="service-content d-flex align-items-center justify-content-center p-4">
                                <div class="service-content-inner">
                                    <div class="p-4"><i class="fas fa-user-nurse fa-6x text-primary"></i></div>
                                    <a href="#" class="h4">Kesehatan Mental Anak</a>
                                    <p class="my-3">Kami menciptakan lingkungan belajar yang positif, aman, dan penuh kasih sayang agar setiap anak merasa diterima, dihargai, serta nyaman berada di dalamnya. Melalui suasana yang hangat dan penuh dukungan, anak-anak didorong untuk membangun rasa percaya diri, berani mengekspresikan diri, dan belajar bersosialisasi secara sehat. Lingkungan yang kondusif ini juga berperan penting dalam menumbuhkan kesehatan mental yang baik sejak dini, sehingga anak dapat tumbuh menjadi pribadi yang bahagia, seimbang secara emosional, serta siap menghadapi tahap perkembangan berikutnya.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Service End -->


        <!-- Footer Start -->
        <div class="container-fluid footer py-5 wow fadeIn" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="row g-5">
                <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="footer-item">
                    <h2 class="fw-bold mb-3"><span class="text-primary mb-0">PAUD</span><span class="text-secondary"> Al Mubarok</span></h2>
                    <p class="mb-4">Sekolah Anak Usia Dini yang menyenangkan dan penuh kasih, berlokasi di Jatiwaringin, Mauk, Kabupaten Tangerang.</p>
                    <div class="border border-primary p-3 rounded bg-light">
                        <h5 class="mb-3">Jam Kunjungan</h5>
                        <p class="mb-1">Senin - Jumat: 08.00 - 11.00 WIB</p>
                        <p class="mb-0">Sabtu - Minggu: Libur</p>
                    </div>
                </div>
            </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <div class="footer-item">
                            <div class="d-flex flex-column p-4 ps-5 text-dark border border-primary" 
                            style="border-radius: 50% 20% / 10% 40%;">
                            <p>Senin: 08.00 - 11.00 WIB</p>
                            <p>Selasa: 08.00 - 11.00 WIB</p>
                            <p>Rabu: 08.00 - 11.00 WIB</p>
                            <p>Kamis: 08.00 - 11.00 WIB</p>
                            <p>Jumat: 08.00 - 10.00 WIB</p>
                            <p>Sabtu: Libur</p>
                            <p class="mb-0">Minggu: Libur</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <div class="footer-item">
                            <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">LOCATION</h4>
                            <div class="d-flex flex-column align-items-start">
                            <a class="text-body mb-3"><i class="fa fa-map-marker-alt text-primary me-2"></i> Jatiwaringin RT 004 RW 001, Mauk, Kab. Tangerang</a>
                            <a href="https://wa.me/6289668378755" class="text-body mb-3"><i class="fab fa-whatsapp text-primary me-2"></i> 0896-6837-8755 (WA)</a>
                            <a class="text-body mb-3"><i class="fa fa-clock text-primary me-2"></i> 07.00 - 11.00 WIB</a>
                                <div class="footer-icon d-flex">
                                    <a class="btn btn-primary btn-sm-square me-3 rounded-circle text-white" href=""><i class="fab fa-facebook-f"></i></a>
                                    <a class="btn btn-primary btn-sm-square me-3 rounded-circle text-white" href=""><i class="fab fa-twitter"></i></a>
                                    <a href="#" class="btn btn-primary btn-sm-square me-3 rounded-circle text-white"><i class="fab fa-instagram"></i></a>
                                    <a href="#" class="btn btn-primary btn-sm-square rounded-circle text-white"><i class="fab fa-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="footer-item">
        <h4 class="text-primary mb-4 border-bottom border-primary border-2 d-inline-block p-2 title-border-radius">
            Lokasi PAUD Al Mubarok
        </h4>
        <div class="rounded border border-primary overflow-hidden" style="width: 100%; height: 200px;">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d304.69055499849856!2d106.54165079149152!3d-6.085553325043288!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sid!2sid!4v1754514849019!5m2!1sid!2sid"
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
</div>

                               </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End -->

<!-- Copyright Start -->
<div class="container-fluid copyright bg-dark py-3">
    <div class="container text-center">
        <small class="text-white">
            &copy; 2025 PAUD Al Mubarok. All rights reserved. Template by  
            <a href="https://themewagon.com" class="text-white text-decoration-underline">ThemeWagon</a>.
        </small>
    </div>
</div>
<!-- Copyright End -->

        <!-- Copyright End -->


        <!-- Back to Top -->
        <a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a>   

        
    <!-- JavaScript Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/lightbox/js/lightbox.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
    </body>

</html>