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

<head>
    <title><?= website_config('title_landing') ?></title>
    <!-- Primary Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="<?= website_config('meta_description_landing') ?>" />
    <meta name="keywords" content="<?= website_config('meta_keywords_landing') ?>" />
    <meta name="author" content="<?= website_config('meta_author') ?>" />
    <meta name="robots" content="index, follow, max-snippet:-1, max-video-preview:-1, max-image-preview:large" />
    <link rel="canonical" href="<?= base_url() ?>" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<?= base_url() ?>" />
    <meta property="og:title" content="<?= website_config('title_landing') ?>" />
    <meta property="og:description" content="<?= website_config('meta_description_landing') ?>" />
    <meta property="og:image" content="<?= base_url() ?>uploads/website/<?= website_config('favicon') ?>" />
    <meta property="og:image:secure_url" content="<?= base_url() ?>uploads/website/<?= website_config('favicon') ?>" />
    <meta property="og:image:width" content="3000" />
    <meta property="og:image:height" content="3000" />
    <meta property="og:image:type" content="image/jpg" />
    <meta property="og:image:alt" content="<?= website_config('title_landing') ?>" />
    <meta property="og:locale" content="id_ID" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="<?= base_url() ?>" />
    <meta property="twitter:title" content="<?= website_config('title_landing') ?>" />
    <meta property="twitter:description" content="<?= website_config('meta_description_landing') ?>" />
    <meta property="twitter:image" content="<?= base_url() ?>uploads/website/<?= website_config('favicon') ?>" />

    <!-- Custom Tag -->
    <?= htmlspecialchars_decode(stripslashes(website_config('custom_tag')), ENT_QUOTES) ?>

    <!-- App favicon -->
    <link rel="icon" href="<?= base_url() ?>uploads/website/<?= website_config('favicon') ?>" type="image/x-icon" />
    <link rel="apple-touch-icon" href="<?= base_url() ?>uploads/website/<?= website_config('favicon') ?>" />
    <meta name="msapplication-TileImage" content="<?= base_url() ?>uploads/website/<?= website_config('favicon') ?>" />

    <!-- Page specific CSS -->
    <link href="<?= base_url() ?>assets/css/plugins/animate.min.css" rel="stylesheet" type="text/css">
    <link href="<?= base_url() ?>assets/css/plugins/swiper-bundle.css" rel="stylesheet">

    <!-- Google Font : Public Sans -->
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="<?= base_url() ?>assets/fonts/tabler-icons.min.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/fonts/feather.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/fonts/fontawesome.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/fonts/material.css">

    <!-- Template CSS Files -->
    <link rel="stylesheet" href="<?= base_url() ?>assets/css/style.css" id="main-style-link">
    <link rel="stylesheet" href="<?= base_url() ?>assets/css/style-preset.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/css/landing.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/css/custom.css">

    <script>
        ! function() {
            if (window.t4hto4) {
                console.log("WiserNotify pixel installed multiple time in this page");
            } else {
                window.t4hto4 = !0;
                var t = document,
                    e = window,
                    n = function() {
                        var e = t.createElement("script");
                        e.type = "text/javascript";
                        e.async = !0;
                        e.src = "https://pt.wisernotify.com/pixel.js?ti=1jclj6jkfc4hhry";
                        document.body.appendChild(e);
                    };
                "complete" === t.readyState ? n() : window.attachEvent ? e.attachEvent("onload", n) : e.addEventListener("load", n, !1);
            }
        }();
    </script>

    <style>
        .swiper-container {
            width: 100%;
            overflow: hidden;
        }

        .comminuties-slides,
        .swiper-slide {
            box-sizing: border-box;
        }
    </style>
</head>

<body data-pc-preset="<?= website_config('color_theme') ?>" data-pc-sidebar-caption="<?= website_config('sidebar_caption') ?>" data-pc-direction="ltr" data-pc-theme="<?= website_config('mode_theme') ?>" class="landing-page">

    <!-- Main Content -->
    <!-- GTM - Body -->
    <?= htmlspecialchars_decode(stripslashes(website_config('gtm_body')), ENT_QUOTES) ?>

    <!-- Pre-loader -->
    <div class="loader" id="page-loader">
        <div class="p-4 text-center">
            <div class="custom-loader"></div>
            <h2 class="my-3 f-w-400">Loading..</h2>
            <p class="mb-0">Silakan tunggu sebentar</p>
        </div>
    </div>

    <!-- Header -->
    <header id="home">
        <!-- Navigation -->
        <nav class="navbar navbar-expand-md navbar-light default">
            <div class="container">
                <a class="pc-navbar-brand my-0 py-0 fs-3 fw-bolder" href="<?= base_url() ?>"><?= website_config('navbar_brand_landing') ?></a>
                <button class="navbar-toggler rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                    <ul class="navbar-nav ms-auto mt-lg-0 mt-2 mb-2 mb-lg-0 align-items-start">
                        <li class="nav-item px-1">
                            <a class="nav-link" href="<?= base_url() ?>">Dashboard</a>
                        </li>
                        <li class="nav-item dropdown px-1">
                            <a class="nav-link dropdown-toggle" href="javascript:;" data-bs-toggle="dropdown">Sitemap</a>
                            <ul class="dropdown-menu">
                                <?php $pages = $this->page_model->get_rows(); ?>
                                <?php foreach ($pages as $value) : ?>
                                    <li><a class="dropdown-item" href="<?= base_url() ?>page/site/<?= $value['slug'] ?>"><?= $value['title'] ?></a></li>
                                <?php endforeach; ?>
                            </ul>
                        </li>
                    </ul>
                    <ul class="navbar-nav mb-2 mb-lg-0 align-items-start">
                        <li class="dropdown px-1 me-2 mb-2 mb-md-0">
                            <a class="btn btn-icon btn-outline-dark border border-secondary border-opacity-25 dropdown-toggle arrow-none me-0 rounded" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="ph-duotone ph-sun-dim text-warning"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
                                <a href="#!" class="dropdown-item" onclick="layout_change('dark')">
                                    <i class="ph-duotone ph-moon"></i><span>Gelap</span>
                                </a>
                                <a href="#!" class="dropdown-item" onclick="layout_change('light')">
                                    <i class="ph-duotone ph-sun-dim"></i><span>Terang</span>
                                </a>
                                <a href="#!" class="dropdown-item" onclick="layout_change_default()">
                                    <i class="ph-duotone ph-cpu"></i><span>Default</span>
                                </a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a href="<?= base_url() ?>page/price_list" class="btn btn-primary"><i class="ph-duotone ph-tag me-2"></i> Daftar Layanan</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Home Section -->
        <div class="container-fluid">
            <div class="bg-dark mx-sm-3 home-section home-section-2">
                <img src="<?= base_url() ?>assets/images/landing/img-header-bg.svg" alt="background shape" class="img-fluid img-header-bg">
                <div class="swiper language-slides-hero">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="row align-items-center justify-content-center text-center">
                                <div class="col-sm-12 header-content mt-0">
                                    <span class="header-badge text-white wow animate__fadeInDown fw-normal" data-wow-delay="0.3s">
                                        <i class="ph-duotone ph-medal text-warning me-2"></i>
                                        <?= website_config('title') ?> - #1 SMM Panel Indonesia
                                    </span>
                                    <div class="row justify-content-center text-center">
                                        <div class="col-xl-7 col-lg-8 col-md-9 col-sm-10 col-11">
                                            <h1 class="my-3 wow animate__fadeInLeft text-white" data-wow-delay="0.4s">
                                                <?= text_gradient(website_config('description1_landing')) ?>
                                            </h1>
                                        </div>
                                    </div>
                                    <div class="row justify-content-center text-center">
                                        <div class="col-xxl-5 col-xl-6 col-lg-7 col-md-8 col-sm-10 col-11">
                                            <p class="f-16 mb-3 wow animate__fadeInLeft" data-wow-delay="0.6s">
                                                <?= text_gradient(website_config('description2_landing')) ?>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="wow animate__fadeInUp" data-wow-delay="0.8s">
                                        <a href="<?= base_url() ?>auth/login" class="btn btn-primary me-3">Masuk <i class="ph-duotone ph-sign-in"></i></a>
                                        <a href="<?= base_url() ?>auth/register" class="btn btn-outline-light">Daftar</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-sm-10">
                                <div class="img-header-main wow animate__fadeInUp" data-wow-delay="1s">
                                    <img src="<?= base_url() ?>uploads/website/<?= website_config('logo') ?>" alt="img" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Page-versions Section -->
    <section class="bg-white">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-8 col-xl-6">
                    <h2 class="wow animate__fadeInUp section-title" data-wow-delay="0.2s"><?= text_gradient(website_config('about_title_landing')) ?></h2>
                    <p class="mt-lg-4 mt-2 mb-4 mb-md-5 wow animate__fadeInUp" data-wow-delay="0.4s"><?= text_gradient(website_config('about_description_landing')) ?></p>
                </div>
            </div>
            <div class="row g-4 text-center">
                <div class="col-lg-4 col-md-6 wow animate__fadeInUp" data-wow-delay="0.2s">
                    <div class="card layout-card mb-0">
                        <div class="card-body">
                            <h5 class="fw-bold text-black mb-3"><?= website_config('about_1_title') ?></h5>
                            <p class="text-muted mb-3"><?= text_gradient(website_config('about_1_content')) ?></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow animate__fadeInUp" data-wow-delay="0.4s">
                    <div class="card layout-card mb-0">
                        <div class="card-body">
                            <h5 class="fw-bold text-black mb-3"><?= website_config('about_2_title') ?></h5>
                            <p class="text-muted mb-3"><?= text_gradient(website_config('about_2_content')) ?></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow animate__fadeInUp" data-wow-delay="0.6s">
                    <div class="card layout-card mb-0">
                        <div class="card-body">
                            <h5 class="fw-bold text-black mb-3"><?= website_config('about_3_title') ?></h5>
                            <p class="text-muted mb-3"><?= text_gradient(website_config('about_3_content')) ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Numbers Section -->
    <section class="bg-white pt-0">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card bg-dark counter-block mb-0 wow animate__fadeInUp" data-wow-delay="0.7s">
                        <img src="<?= base_url() ?>assets/images/landing/img-counter-bg.svg" alt="img" class="img-fluid img-counter-bg">
                        <div class="card-body p-4 p-md-5">
                            <div class="row align-items-center">
                                <div class="col-lg-12 my-3">
                                    <div class="row g-3 text-center">
                                        <div class="col-12 col-md-4">
                                            <span class="counter text-white"><?= currency(custom_statistic('total_user') ?: $this->user_model->get_count()) ?></span>
                                            <h4 class="f-w-400 mb-0 text-white text-opacity-50">Pengguna Aktif</h4>
                                        </div>
                                        <div class="col-12 col-md-4">
                                            <span class="counter text-white"><?= currency(custom_statistic('total_order') ?: $this->order_model->get_count()) ?></span>
                                            <h4 class="f-w-400 mb-0 text-white text-opacity-50">Pesanan Dikerjakan</h4>
                                        </div>
                                        <div class="col-12 col-md-4">
                                            <span class="counter text-white"><?= currency($this->service_model->get_count()) ?></span>
                                            <h4 class="f-w-400 mb-0 text-white text-opacity-50">Layanan Tersedia</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Features Section -->
    <section class="bg-white product-section pt-0">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-xl-10">
                    <h2 class="wow animate__fadeInUp section-title mb-0" data-wow-delay="0.2s"><?= text_gradient(website_config('feature_title')) ?></h2>
                </div>
                <div class="col-md-8 col-xl-6">
                    <p class="text-opacity-75 mt-lg-4 mt-2 mb-4 mb-md-5 wow animate__fadeInUp" data-wow-delay="0.4s"><?= text_gradient(website_config('feature_description')) ?></p>
                </div>
            </div>
            <div class="row justify-content-center d-flex product-cards-block">
                <div class="col-xl-10">
                    <div class="row justify-content-center gy-sm-4 gy-3">
                        <?php $data = $this->landing_config_model->get_rows(['where' => [['type' => 'features']]]); ?>
                        <?php foreach ($data as $value) : ?>
                            <div class="col-md-6">
                                <div class="card wow animate__fadeInUp" data-wow-delay="0.5s">
                                    <div class="card-body">
                                        <h4 class="mt-1 mb-2"><?= text_gradient($value['title']) ?></h4>
                                        <p class="mb-0"><?= text_gradient($value['content']) ?></p>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="bg-dark comminuties-section">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-8 col-xl-6">
                    <h2 class="text-white wow animate__fadeInUp section-title" data-wow-delay="0.2s"><?= text_gradient(website_config('testi_title')) ?></h2>
                    <p class="text-white text-opacity-75 mt-lg-4 mt-2 mb-4 mb-md-5 wow animate__fadeInUp" data-wow-delay="0.4s"><?= text_gradient(website_config('testi_description')) ?></p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 wow animate__fadeInUp" data-wow-delay="0.6s">
                    <div class="swiper-container comminuties-slides">
                        <div class="swiper-wrapper">
                            <?php $testimonials = $this->landing_config_model->get_rows(['where' => [['type' => 'testimonial_top']]]); ?>
                            <?php foreach ($testimonials as $value) : ?>
                                <div class="swiper-slide">
                                    <div class="card mb-0">
                                        <div class="card-body">
                                            <div class="d-flex align-items-start">
                                                <div class="chat-avtar flex-shrink-0">
                                                    <img class="rounded-circle img-fluid wid-40" src="<?= base_url() ?>assets/images/user/<?= $value['icon'] ?>" alt="User image">
                                                    <div class="bg-success chat-badge"></div>
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h5 class="mb-0"><?= $value['name'] ?></h5>
                                                    <span class="text-sm text-muted"><?= $value['title'] ?></span>
                                                </div>
                                            </div>
                                            <p class="mb-2 mt-3"><?= $value['content'] ?></p>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Section -->
    <section class="bg-white feature-section">
        <div class="container title mb-0">
            <div class="row justify-content-center text-center wow animate__fadeInUp" data-wow-delay="0.2s">
                <div class="col-md-8 col-xl-6">
                    <h2 class="mb-0 text-primary wow animate__fadeInUp section-title" data-wow-delay="0.1s">Kenapa Harus <?= website_config('title') ?>?</h2>
                    <p class="mt-lg-4 mt-2 mb-4 mb-md-5 wow animate__fadeInUp" data-wow-delay="0.2s"><?= website_config('title') ?> adalah pilihan top buat layanan sosial media kamu. Dengan desain keren, fitur lengkap, dan super fleksibel, kamu bisa boosting Akun dengan mudah dan cepat.</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row g-3">
                <div class="col-md-6 col-lg-4">
                    <div class="card border-0 shadow-none wow animate__fadeInUp mb-0" data-wow-delay="0.1s">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="avtar bg-light-primary flex-shrink-0">
                                    <i class="ph-duotone ph-thumbs-up"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>Harga Termurah di Indonesia</h5>
                                    <p class="mb-0">Sejak 2018, <?= website_config('title') ?> telah menjadi pusat para reseller jasa layanan sosial media. Kami menawarkan harga termurah di Indonesia, menjadikan layanan kami pilihan utama dibandingkan panel lainnya.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="card border-0 shadow-none wow animate__fadeInUp mb-0" data-wow-delay="0.2s">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="avtar bg-light-primary flex-shrink-0">
                                    <i class="ph-duotone ph-tag f-24"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>Layanan Terbaik</h5>
                                    <p class="mb-0"><?= website_config('title') ?> berkomitmen untuk memberikan layanan terbaik kepada Anda. Pengiriman super cepat, hanya dalam hitungan menit, menjadikan kami yang tercepat di pasar. Kepuasan Anda adalah prioritas kami.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="card border-0 shadow-none wow animate__fadeInUp mb-0" data-wow-delay="0.3s">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <div class="avtar bg-light-primary flex-shrink-0">
                                    <i class="ph-duotone ph-headset f-24"></i>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5>Pelayanan Terbaik 24 Jam</h5>
                                    <p class="mb-0">Di <?= website_config('title') ?>, pelayanan adalah prioritas utama. Kepuasan pelanggan adalah keharusan bagi kami. Jangan khawatir jika ada masalah, karena kami siap melayani Anda kapanpun, 24 jam sehari.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-bottom">
            <div class="container">
                <div class="row align-items-center text-center">
                    <div class="col my-1 wow animate__fadeInUp" data-wow-delay="0.4s">
                        <p class="mb-0"><?= text_gradient(website_config('footer')) ?></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Required Js -->
    <script src="<?= base_url() ?>assets/js/plugins/popper.min.js"></script>
    <script src="<?= base_url() ?>assets/js/plugins/simplebar.min.js"></script>
    <script src="<?= base_url() ?>assets/js/plugins/bootstrap.min.js"></script>
    <script src="<?= base_url() ?>assets/js/fonts/custom-font.js"></script>
    <script src="<?= base_url() ?>assets/js/pcoded.js"></script>
    <script src="<?= base_url() ?>assets/js/plugins/feather.min.js"></script>
    <script src="<?= base_url() ?>assets/js/custom.js"></script>

    <script>
        layout_change('<?= website_config('mode_theme') ?>');
        layout_sidebar_change('false');
        change_box_container('false');
        layout_caption_change('true');
        layout_rtl_change('false');
        preset_change("<?= website_config('color_theme') ?>");
    </script>

    <!-- Page Specific JS -->
    <script src="<?= base_url() ?>assets/js/plugins/wow.min.js"></script>
    <script src="<?= base_url() ?>assets/js/plugins/swiper-bundle.js"></script>
    <script>
        document.addEventListener('scroll', function() {
            const cOst = document.documentElement.scrollTop;
            const navbar = document.querySelector('.navbar');
            if (cOst == 0) {
                navbar.classList.add('top-nav-collapse');
            } else if (cOst > ost) {
                navbar.classList.add('top-nav-collapse');
                navbar.classList.remove('default');
            } else {
                navbar.classList.add('default');
                navbar.classList.remove('top-nav-collapse');
            }
            ost = cOst;
        });

        const wow = new WOW({
            animateClass: 'animate__animated'
        });
        wow.init();

        const swiperConfig = {
            loop: true,
            speed: 1000,
            autoplay: {
                delay: 2000
            },
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 10
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                1200: {
                    slidesPerView: 3,
                    spaceBetween: 20
                },
            },
        };

        new Swiper('.comminuties-slides', {
            ...swiperConfig,
            centeredSlides: false,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
        });

        new Swiper('.language-slides', {
            slidesPerView: 8,
            spaceBetween: 20,
            centeredSlides: true,
            thumbs: {
                swiper: new Swiper('.language-slides-hero', {
                    slidesPerView: 1,
                    autoplay: {
                        delay: 2000
                    }
                })
            },
            breakpoints: {
                0: {
                    slidesPerView: 2,
                    spaceBetween: 10
                },
                520: {
                    slidesPerView: 3,
                    spaceBetween: 10
                },
                720: {
                    slidesPerView: 4,
                    spaceBetween: 10
                },
                900: {
                    slidesPerView: 5,
                    spaceBetween: 10
                },
                1100: {
                    slidesPerView: 6,
                    spaceBetween: 10
                },
                1280: {
                    slidesPerView: 7,
                    spaceBetween: 20
                },
                1400: {
                    slidesPerView: 8,
                    spaceBetween: 20
                },
            },
        });
    </script>
</body>

</html>