Pricing Cards

...

Pilihan Paket dan Harga (Pricing Cards)

Berikut adalah komponen kartu harga modern dengan status Featured / Paling Populer, daftar fitur centang, dan tombol aksi.

Starter
Cocok untuk proyek personal dan pengujian awal API.
Gratis / selamanya
  • 1 Nomor WhatsApp Aktif
  • Hingga 500 Pesan / Hari
  • Dukungan Multi-Device Pro
Mulai Gratis
Enterprise
Solusi server mandiri untuk instansi & volume tinggi.
Kustom / tahun
  • Dedicated Server On-Premise
  • Unlimited Nomor & Token
  • SLA Garansi 99.9%
Hubungi Sales
HTML
<div class="pricing-grid">
  <!-- 1. Paket Starter -->
  <div class="pricing-card">
    <div>
      <div class="pricing-header">
        <div class="pricing-name">Starter</div>
        <div class="pricing-desc">Cocok untuk proyek personal dan pengujian awal API.</div>
      </div>
      <div class="pricing-price-box">
        <span class="pricing-price">Gratis</span>
        <span class="pricing-period">/ selamanya</span>
      </div>
      <ul class="pricing-features">
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>1 Nomor WhatsApp Aktif</span>
        </li>
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>Hingga 500 Pesan / Hari</span>
        </li>
        <li class="opacity-50">
          <span class="pricing-cross"><i data-lucide="x" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span class="line-through">Dukungan Multi-Device Pro</span>
        </li>
      </ul>
    </div>
    <a href="#daftar" class="btn btn-secondary pricing-btn">Mulai Gratis</a>
  </div>

  <!-- 2. Paket Pro (Paling Populer) -->
  <div class="pricing-card featured">
    <span class="pricing-badge">Paling Populer</span>
    <div>
      <div class="pricing-header">
        <div class="pricing-name">Developer Pro</div>
        <div class="pricing-desc">Pilihan terbaik untuk startup, aplikasi bisnis & e-commerce.</div>
      </div>
      <div class="pricing-price-box">
        <span class="pricing-price">Rp 99.000</span>
        <span class="pricing-period">/ bulan</span>
      </div>
      <ul class="pricing-features">
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span class="font-semibold text-slate-800 dark:text-white">5 Nomor Multi-Device</span>
        </li>
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>Tanpa Batas Kuota Pesan</span>
        </li>
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>Kirim Gambar, Dokumen & Audio</span>
        </li>
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>Auto Reconnect 24/7</span>
        </li>
      </ul>
    </div>
    <a href="#langganan" class="btn btn-primary btn-glow pricing-btn">Pilih Paket Pro</a>
  </div>

  <!-- 3. Paket Enterprise -->
  <div class="pricing-card">
    <div>
      <div class="pricing-header">
        <div class="pricing-name">Enterprise</div>
        <div class="pricing-desc">Solusi server mandiri untuk instansi & volume tinggi.</div>
      </div>
      <div class="pricing-price-box">
        <span class="pricing-price">Kustom</span>
        <span class="pricing-period">/ tahun</span>
      </div>
      <ul class="pricing-features">
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>Dedicated Server On-Premise</span>
        </li>
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>Unlimited Nomor & Token</span>
        </li>
        <li>
          <span class="pricing-check"><i data-lucide="check" style="width: 0.75rem; height: 0.75rem;"></i></span>
          <span>SLA Garansi 99.9%</span>
        </li>
      </ul>
    </div>
    <a href="https://wa.me/6281234567890?text=Halo%20saya%20tertarik%20paket%20Enterprise" class="btn btn-wa pricing-btn">
      <iconify-icon icon="logos:whatsapp-icon" style="font-size: 1.1rem;"></iconify-icon>
      Hubungi Sales
    </a>
  </div>
</div>

Apakah panduan ini membantu?

Bantu kami meningkatkan dokumentasi dengan memberikan respon Anda.

Bagikan: