Tabel Harga (Pricing Table)
Membangun tabel harga 3 paket dengan paket unggulan yang menonjol dan toggle bulanan/tahunan.
Kenapa Pricing Table Penting?
Hampir semua produk digital (Netflix, Spotify, kursus online) menampilkan harga dalam bentuk tabel perbandingan. Pola ini mengajarkan hierarki visual: bagaimana membuat satu opsi terlihat "paling menarik" tanpa terkesan memaksa.
Langkah Membangun
HTML: Tiga kartu paket (Basic, Pro, Enterprise), masing-masing berisi nama paket, harga, daftar fitur dengan ikon centang, dan tombol CTA. Kartu tengah diberi class unggulan.
CSS: Kartu unggulan dibuat lebih besar dengan transform: scale(1.05), border gradien, dan badge "Paling Populer". Daftar fitur memakai list-style: none dengan ikon ✓ hijau untuk fitur tersedia dan ✕ abu untuk yang tidak.
JS: Toggle bulanan/tahunan: satu switch mengubah semua harga sekaligus. Simpan harga dalam atribut data-bulanan dan data-tahunan pada tiap elemen harga, lalu JS membaca atribut yang sesuai dan mengupdate teks. Harga tahunan biasanya diberi diskon 20 persen.
Trik Psikologi Harga
- Decoy effect: Paket tengah dibuat paling menarik agar terlihat sebagai pilihan cerdas.
- Angka 9: Rp 99.000 terasa jauh lebih murah dari Rp 100.000.
- Fitur dicoret: Menampilkan fitur yang TIDAK didapat paket murah membuat paket mahal terasa bernilai.
Kesalahan Umum
- Terlalu banyak fitur hingga kartu menjadi sangat panjang (maksimal 6-7 fitur).
- Tombol CTA semua sama sehingga tidak ada arahan (tombol paket unggulan harus paling mencolok).
- Harga tahunan tidak konsisten dengan harga bulanan (pastikan perhitungannya benar).
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Tantangan: Perbandingan Fitur
Tambahkan baris "Total hemat per tahun" di bawah tiap kartu yang muncul hanya saat mode tahunan aktif, menunjukkan selisih harga bulanan x 12 dengan harga tahunan.