<?php
include 'koneksi.php';

$queryUsers = "SELECT COUNT(*) AS total_users FROM users WHERE status = 'active' AND role = 'user'";
$resultUsers = mysqli_query($conn, $queryUsers);
$rowUsers = mysqli_fetch_assoc($resultUsers);
$totalUsers = $rowUsers['total_users'];

$queryLandingPage = "SELECT COUNT(*) AS total_landingpage FROM landingpage";
$resultLandingPage = mysqli_query($conn, $queryLandingPage);
$rowLandingPage = mysqli_fetch_assoc($resultLandingPage);
$totalLandingPage = $rowLandingPage['total_landingpage'];

$queryAdmin = "SELECT COUNT(*) AS total_admins FROM users WHERE status = 'active' AND role = 'admin'";
$resultAdmin = mysqli_query($conn, $queryAdmin);
$rowAdmin = mysqli_fetch_assoc($resultAdmin);
$totalAdmin = $rowAdmin['total_admins'];

$queryartikel = "SELECT * FROM detail_artikel ORDER BY tanggal DESC LIMIT 3"; 
$result = $conn->query($queryartikel);

?>

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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Portal UMKM - Buat Landing Page Profesional Gratis Disini!</title>
  <meta name="description" content="Buat landing page profesional gratis untuk UMKM Anda dengan mudah di Portal UMKM. Tingkatkan visibilitas bisnis dan jangkau lebih banyak pelanggan sekarang!">
  <meta name="keywords" content="Portal UMKM, landing page gratis, buat website UMKM, landing page profesional, bisnis online, UMKM digital, pemasaran UMKM, website gratis untuk UMKM">
  <meta name="author" content="Portal UMKM">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://portalumkm.com/">

  <meta name="google-site-verification" content="e9f6S8EGZWNTqWTr7HenznoRKYDMXP6VPmjjcpqOZPU" />
  <meta name="msvalidate.01" content="7FD794BF2AAC41A7F1D8248099D2ED62" />
  <meta name="yandex-verification" content="d49629d3a04a87f2" />

  <!-- Open Graph Meta Tags (Untuk berbagi di media sosial) -->
  <meta property="og:title" content="Portal UMKM">
  <meta property="og:description" content="Buat landing page profesional gratis untuk UMKM Anda dengan mudah di Portal UMKM. Tingkatkan visibilitas bisnis dan jangkau lebih banyak pelanggan sekarang!">
  <meta property="og:image" content="https://portalumkm.com/assets/img/beranda.JPG">
  <meta property="og:url" content="https://portalumkm.com/">
  <meta property="og:type" content="website">

  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Portal UMKM">
  <meta name="twitter:description" content="Buat landing page profesional gratis untuk UMKM Anda dengan mudah di Portal UMKM. Tingkatkan visibilitas bisnis dan jangkau lebih banyak pelanggan sekarang!">
  <meta name="twitter:image" content="https://portalumkm.com/assets/img/beranda.JPG">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="header fixed-top">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">

      <a href="/" class="logo d-flex align-items-center">
        <img src="assets/img/logo.png" alt="Portal UMKM">
        <span>Portal UMKM</span>
      </a>

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#beranda">Beranda</a></li>
          <li><a class="nav-link scrollto" href="#keunggulan">Keunggulan</a></li>
          <li><a class="nav-link scrollto" href="#langkah">Langkah Memulai</a></li>
          <li><a class="nav-link scrollto" href="#pertanyaan">Pertanyaan</a></li>
          <li><a href="blog">Blog</a></li>
          <li><a class="getstarted scrollto" href="login">Masuk</a></li>
          <!--<li id="google_translate_element" title="Ubah Bahasa" class="ms-3"></li>-->
          </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="beranda" class="hero d-flex align-items-center">

    <div class="container">
      <div class="row">
        <div class="col-lg-6 d-flex flex-column justify-content-center">
          <h1>Buat Landing Page Profesional Gratis!</h1>
          <h2>Optimalkan Bisnis Anda dengan Landing Page Builder untuk menjangkau lebih banyak pelanggan.</h2>
          <div>
            <div class="text-center text-lg-start">
              <a href="/uploads/assets/panduan-penggunaan.pdf" target="blank" class="btn-get-started scrollto d-inline-flex align-items-center justify-content-center align-self-center">
                <span>Pelajari Lebih Lanjut</span>
                <i class="bi bi-cloud-arrow-down"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-6 hero-img" >
          <img src="assets/img/hero-img.png" class="img-fluid" alt="Portal UMKM">
        </div>
      </div>
    </div>

  </section><!-- End Hero -->

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

      <div class="container">
        <div class="row gx-0">

          <div class="col-lg-6 d-flex flex-column justify-content-center" >
            <div class="content">
            <h3>Apa itu Portal UMKM?</h3>
            <h2>Platform Landing Page untuk Pelaku UMKM di Indonesia.</h2>
            <p>
              Portal UMKM adalah solusi bagi pelaku usaha kecil dan menengah untuk membuat landing page yang interaktif dan profesional dengan mudah, tanpa perlu keahlian coding. Dengan platform ini, Anda dapat menampilkan produk atau layanan secara menarik dan meningkatkan visibilitas bisnis secara online.
            </p>
              <div class="text-center text-lg-start">
                <a href="register" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center">
                  <span>Daftar Sekarang</span>
                  <i class="bi bi-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>

          <div class="col-lg-6 d-flex align-items-center" >
            <img src="assets/img/about.JPG" class="img-fluid" alt="Portal UMKM">
          </div>

        </div>
      </div>

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

    <!-- ======= Counts Section ======= -->
    <section id="counts" class="counts py-5">
      <div class="container">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 text-center">

          <div class="col">
            <div class="count-box p-4">
              <i class="bi bi-people fs-1 text-primary"></i>
              <h3 class="mt-3 fw-bold">
                <span data-purecounter-start="0" data-purecounter-end="<?php echo $totalUsers; ?> " data-purecounter-duration="1" class="purecounter"></span>
              </h3>
              <p class="text-muted"> Pengguna Aktif</p>
            </div>
          </div>

          <div class="col">
            <div class="count-box p-4">
              <i class="bi bi-journal-richtext fs-1 text-warning"></i>
              <h3 class="mt-3 fw-bold">
                <span data-purecounter-start="0" data-purecounter-end="<?php echo $totalLandingPage; ?> " data-purecounter-duration="1" class="purecounter"></span>
              </h3>
              <p class="text-muted">   Landing Page Dibuat</p>
            </div>
          </div>

          <div class="col">
            <div class="count-box p-4">
              <i class="bi bi-hand-index fs-1 text-success"></i>
              <h3 class="mt-3 fw-bold">
                <span data-purecounter-start="0" data-purecounter-end="6 " data-purecounter-duration="1" class="purecounter"></span>
              </h3>
              <p class="text-muted">Pilihan Tema</p>
            </div>
          </div>

          <div class="col">
            <div class="count-box p-4">
              <i class="bi bi-code-slash fs-1 text-danger"></i>
              <h3 class="mt-3 fw-bold">
                <span data-purecounter-start="0" data-purecounter-end="<?php echo $totalAdmin; ?> " data-purecounter-duration="1" class="purecounter"></span>
              </h3>
              <p class="text-muted">Tim Pengelola</p>
            </div>
          </div>

        </div>
      </div>
    </section>

    <!-- ======= Features Section ======= -->
    <section id="keunggulan" class="features">

      <div class="container">

        <header class="section-header">
          <p>Informasi</p>
          <h2>Keunggulan</h2>
        </header>

        <div class="row">

         

          <div class="col-lg-6 mt-5 mt-lg-0 d-flex">
            <div class="row align-self-center gy-4">

              <div class="col-md-6" >
                <div class="feature-box d-flex align-items-center">
                  <i class="bi bi-check"></i>
                  <h3>Tanpa Keahlian Coding</h3>
                </div>
              </div>

              <div class="col-md-6" >
                <div class="feature-box d-flex align-items-center">
                  <i class="bi bi-check"></i>
                  <h3>Tidak Perlu Hosting</h3>
                </div>
              </div>

              <div class="col-md-6">
                <div class="feature-box d-flex align-items-center">
                  <i class="bi bi-check"></i>
                  <h3>Optimasi On-Page SEO</h3>
                </div>
              </div>

              <div class="col-md-6">
                <div class="feature-box d-flex align-items-center">
                  <i class="bi bi-check"></i>
                  <h3>Mudah & Praktis</h3>
                </div>
              </div>

              <div class="col-md-6">
                <div class="feature-box d-flex align-items-center">
                  <i class="bi bi-check"></i>
                  <h3>Tanpa Biaya Layanan</h3>
                </div>
              </div>

              <div class="col-md-6">
                <div class="feature-box d-flex align-items-center">
                  <i class="bi bi-check"></i>
                  <h3>Dukungan & Konsultasi Gratis</h3>
                </div>
              </div>

            </div>
          </div>

          <div class="col-lg-6">
            <img src="assets/img/features.png" class="img-fluid" alt="Portal UMKM">
          </div>

        </div> <!-- / row -->
      </div>

    </section><!-- End Features Section -->

        <!-- ======= Langkah Section ======= -->
        <section id="langkah" class="features">

        <div class="container">

          <header class="section-header">
            <p>Informasi</>
            <h2>Langkah Mudah untuk Memulai</h2>
          </header>

            <div class="row feature-icons">
              <div class="col-xl-4 text-center">
                <img src="assets/img/features-3.png" class="img-fluid p-4" alt="Portal UMKM">
              </div>

              <div class="col-xl-8 d-flex content">
                <div class="row align-self-center gy-4">

                  <div class="col-md-6 icon-box">
                  <i class="bi bi-person-check"></i>                
                  <div>
                      <h3>1. Daftar & Masuk</h3>
                      <p>Buat akun gratis dan masuk untuk memulai.</p>
                    </div>
                  </div>

                  <div class="col-md-6 icon-box" >
                  <i class="bi bi-shop"></i>
                  <div>
                      <h3>2. Lengkapi Data Usaha</h3>
                      <p>Isi informasi usaha Anda dengan mudah.</p>
                    </div>
                  </div>

                  <div class="col-md-6 icon-box" >
                  <i class="bi bi-box-seam"></i>
                  <div>
                      <h3>3. Tambahkan Produk/Jasa</h3>
                      <p>Deskripsikan produk atau layanan yang Anda tawarkan.</p>
                    </div>
                  </div>

                  <div class="col-md-6 icon-box" >
                  <i class="bi bi-patch-check"></i>          
                  <div>
                      <h3>4. Tampilkan Keunggulan & Testimoni</h3>
                      <p>Soroti nilai unik bisnis Anda dan tampilkan ulasan pelanggan.</p>
                    </div>
                  </div>

                  <div class="col-md-6 icon-box">
                  <i class="bi bi-search"></i>
                  <div>
                      <h3>5. Optimasi SEO & Atur Copywriting</h3>
                      <p>Tingkatkan visibilitas di mesin pencari dan atur copywriting landing page sesuai kebutuhan.</p>
                    </div>
                  </div>

                  <div class="col-md-6 icon-box">
                    <i class="bi bi-rocket-takeoff"></i>
                    <div>
                      <h3>6. Selesai</h3>
                      <p>Dengan satu klik, landing page Anda sudah siap!</p>
                    </div>
                  </div>

                </div>
              </div>

            </div>

          </div><!-- End Feature Icons -->

        </div>

        </section><!-- End Features Section -->

    <!-- ======= F.A.Q Section ======= -->
    <section id="pertanyaan" class="faq">

      <div class="container">

        <header class="section-header">
          <p>Informasi</p>
          <h2>Pertanyaan yang Sering Diajukan</h2>
        </header>

        <div class="row">
          <div class="col-lg-6">
            <!-- F.A.Q List 1-->
            <div class="accordion accordion-flush" id="faqlist1" >
              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">
                  Apa itu landing page, dan mengapa saya membutuhkannya?
                  </button>
                </h3>
                <div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
                  <div class="accordion-body">
                  Landing page adalah halaman web khusus untuk pemasaran atau promosi yang dirancang dengan tujuan tertentu. Halaman ini berisi informasi singkat tentang produk, layanan, atau penawaran, serta dilengkapi dengan call-to-action (CTA) untuk mendorong pengunjung mengambil tindakan, seperti mendaftar, mengunduh, atau membeli. Dengan fokus pada satu tujuan utama, landing page efektif dalam meningkatkan konversi.                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-2">
                  Bagaimana cara membuat landing page secara gratis?
                  </button>
                </h3>
                <div id="faq-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
                  <div class="accordion-body">
                  Anda dapat memulai dengan mendaftar akun gratis di sini. Setelah itu, lengkapi data yang diperlukan, lalu pilih template yang sesuai dengan kebutuhan Anda.                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-3">
                  Apakah saya perlu memiliki keahlian teknis untuk membuat landing page?
                  </button>
                </h3>
                <div id="faq-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
                  <div class="accordion-body">
                  Tidak! Platform kami dirancang agar mudah digunakan oleh siapa saja, termasuk tanpa pengalaman dalam desain web atau coding. Cukup isi data yang diperlukan, pilih template, dan landing page Anda siap digunakan.                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-6">

          <!-- F.A.Q List 2-->
          <div class="accordion accordion-flush" id="faqlist2" >

            <div class="accordion-item">
              <h3 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-1">
                Bisakah landing page digunakan untuk mempromosikan berbagai jenis produk/layanan?
                </button>
              </h3>
              <div id="faq2-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
                <div class="accordion-body">
                Tentu saja, selama produk atau layanan yang dipromosikan berasal dari UMKM dan mematuhi peraturan yang berlaku. Jika terdapat produk ilegal atau melanggar kebijakan, akun terkait dapat ditangguhkan.
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h3 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-2">
                Apakah tersedia panduan penggunaan untuk membuat landing page?
                </button>
              </h3>
              <div id="faq2-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
                <div class="accordion-body">
                Ya, kami menyediakan panduan lengkap dalam bentuk dokumentasi untuk membantu Anda menggunakan layanan ini dengan mudah.
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h3 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-3">
                Apakah ada dukungan teknis jika saya mengalami kendala?
                </button>
              </h3>
              <div id="faq2-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
                <div class="accordion-body">
                Tentu, Anda dapat menghubungi kontak yang telah tersedia.   
                </div>
              </div>
            </div>

          </div>
          </div>


        </div>

      </div>

    </section><!-- End F.A.Q Section -->

    <!-- ======= Recent Blog Posts Section ======= -->
    <section id="recent-blog-posts" class="recent-blog-posts">

      <div class="container">

        <header class="section-header">
          <p>Informasi</p>
          <h2>Artikel Terbaru</h2>
        </header>

        <div class="row">
          <?php while ($row = $result->fetch_assoc()) { ?>
              <div class="col-lg-4 mt-3">
                  <div class="post-box border p-3">
                      <div class="post-img">
                          <img src="uploads/artikel/<?= $row['gambar_artikel']; ?>" class="img-fluid fixed-img" alt="<?= $row['judul_artikel']; ?>" width="100%" height="250" style="object-fit: cover; aspect-ratio: 16/9; border-radius: 8px;">
                      </div>
                      <span class="post-date d-block mt-2"><?= date("d M Y", strtotime($row['tanggal'])); ?></span>
                      <h3 class="post-title"><?= $row['judul_artikel']; ?></h3>
                      <p class="post-excerpt">
                          <?= substr(strip_tags($row['deskripsi_artikel']), 0, 60); ?>...
                      </p>
                      <a href="blog/<?= $row['slug']; ?>" class="readmore stretched-link mt-auto">
                          <span>Baca Selengkapnya</span> <i class="bi bi-arrow-right"></i>
                      </a>
                  </div>
              </div>
          <?php } ?>
      </div>

      </div>

    </section><!-- End Recent Blog Posts Section -->

    <!-- ======= CTA: Buat Landing Page ======= -->
    <section id="cta-landingpage" class="cta-section py-5 bg-dark text-white text-center">
      <div class="container">
        <h2 class="fw-bold">Bangun Landing Page UMKM Anda Sekarang!</h2>
        <p class="lead">Bantu bisnis Anda lebih dikenal dengan landing page profesional dan menarik. Mulai dalam hitungan menit tanpa perlu keahlian coding!</p>
        <a href="login" class="btn-custom">Buat Sekarang</a>
      </div>
    </section>

  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer" class="footer">

    <div class="footer-top">
      <div class="container">
        <div class="row gy-4">
          <div class="col-lg-5 col-md-12 footer-info">
            <a href="/" class="logo d-flex align-items-center">
              <img src="assets/img/logo.png" alt="Logo Portal UMKM">
              <span>Portal UMKM</span>
            </a>
            <p>PortalUMKM.com adalah platform gratis untuk membuat landing page profesional bagi pelaku UMKM di Indonesia.            </p>
          </div>

          <div class="col-lg-4 col-6 footer-links">
            <h4>Halaman</h4>
            <ul>
              <li><i class="bi bi-chevron-right"></i> <a href="/">Beranda</a></li>
              <li><i class="bi bi-chevron-right"></i> <a href="blog">Blog</a></li>
              <li><i class="bi bi-chevron-right"></i> <a href="/blog/syarat-dan-ketentuan">Syarat dan Ketentuan</a></li>            
            </ul>
          </div>

          <div class="col-lg-3 col-md-12 footer-contact text-start">
            <h4 class="mb-3">Kontak</h4>
            <p>
                JL KH Wahid Hasyim
                Jawa Timur, 64483<br>
                Indonesia
            </p>
            <p>
                <strong>WA:</strong> <a href="https://wa.me/6288805517338" class="text-decoration-none text-black">+62 888 0551 7338</a><br>
                <strong>Email:</strong> <a href="mailto:ahmadansori1111@gmail.com" class="text-decoration-none text-black">ahmadansori1111@gmail.com</a>
            </p>
        </div>
   
        </div>
      </div>
    </div>

    <div class="container">
      <div class="copyright">
        &copy; <?php echo date("Y"); ?> <strong><span>Portal UMKM</span></strong>. All Rights Reserved
      </div>
     
    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>
  <script src="assets/js/custom.js"></script>

</body>

</html>