Contoh prompt untuk membuat landing page dengan AI



 Kali ini kita akan membedah cara membuat prompt yang sesuai ekspektasi untuk membuat sebuah landing page, contohnya seperti ini:

Berikut adalah prompt siap pakai untuk membuat landing page CN Mart. Salin seluruh teks pada kotak di bawah ini, lalu kirimkan ke AI pembuat website atau coding assistant pilihan Anda.

Catatan: Informasi promo, harga, stok, metode pembayaran, dan akun media sosial belum dikonfirmasi. Prompt ini secara sengaja meminta AI untuk tidak membuat klaim tersebut sebagai fakta.

Buatkan landing page website modern, premium, dan conversion-focused untuk business center/minimarket bernama “CN Mart”, bagian dari SMK Citra Negara Depok.

INFORMASI BISNIS

• Nama: CN Mart
• Kategori bisnis: Business Center / minimarket edukatif
• Deskripsi bisnis: CN Mart merupakan unit Business Center SMK Citra Negara yang menyediakan kebutuhan harian untuk warga sekolah dan masyarakat sekitar.
• Alamat: Jl. Raya Tanah Baru No. 99, Kemiri Jaya, Beji, Depok, Jawa Barat 16421
• Email: info@citranegara.sch.id
• Telepon: (021) 77201052
• WhatsApp Informasi: 081325269477
• Jam operasional:
  - Senin–Jumat: 07.00–15.30 WIB
  - Sabtu: 07.00–13.00 WIB
  - Minggu: Tutup
• Website induk: https://smk.citranegara.sch.id/
• Produk utama:
  - Kebutuhan sehari-hari
  - Makanan dan minuman
  - Snack dan jajanan
  - Sembako
  - Produk kebersihan rumah
  - Produk perawatan diri
  - Produk promo pilihan

TEKNOLOGI

• Gunakan HTML5, CSS3, dan JavaScript vanilla seperlunya.
• Buat seluruh landing page dalam satu file index.html yang siap dibuka langsung di browser.
• Jangan gunakan framework, package, atau library berat.
• Desain wajib responsif untuk desktop, tablet, dan mobile.
• Tambahkan smooth scrolling.
• Gunakan Font Awesome CDN atau SVG ringan untuk ikon.
• Optimalkan performa dan gunakan loading="lazy" untuk gambar di luar hero section.
• Kode harus rapi, mudah dibaca, dan diberi komentar seperlunya.

WARNA BRAND

• Kuning utama: #fbf220
• Hijau utama: #699d13
• Putih: #FFFFFF
• Warna teks gelap: #1F2937
• Abu-abu terang untuk latar section: #F8FAFC
• Abu-abu teks pendukung: #6B7280

ARAH DESAIN

• Modern retail / minimarket website.
• Cerah, bersih, ramah, profesional, dan terpercaya.
• Gunakan kuning #fbf220 untuk aksen utama, badge promo, elemen dekoratif, serta tombol CTA penting.
• Gunakan hijau #699d13 untuk heading, tombol sekunder, ikon, status, dan elemen kepercayaan.
• Pastikan teks tetap mudah dibaca pada background kuning; jangan gunakan teks putih di atas kuning terang.
• Banyak white space agar tampilan tidak penuh.
• Gunakan rounded corners modern, soft shadow, serta hover effect yang halus.
• UI/UX harus setara landing page bisnis modern tahun 2025–2026.
• Seluruh konten menggunakan Bahasa Indonesia yang ramah dan profesional.

GAMBAR

Gunakan gambar Unsplash berkualitas tinggi dengan tema modern minimarket interior, grocery shopping, fresh fruits and vegetables, snacks and beverages, household essentials, shopping basket, dan friendly store service. Gunakan URL gambar Unsplash yang relevan dan dapat dimuat langsung. Tambahkan overlay gelap atau gradasi bila gambar digunakan sebagai background agar teks tetap terbaca.

STRUKTUR LANDING PAGE

1. NAVBAR
• Buat sticky navbar dengan background putih, blur ringan, dan shadow tipis saat halaman di-scroll.
• Logo teks: “CN Mart”, dengan ikon keranjang belanja sederhana.
• Tambahkan teks kecil “Business Center SMK Citra Negara” pada desktop.
• Menu: Beranda, Kategori, Promo, Keunggulan, Testimoni, FAQ, Kontak.
• Tombol CTA: “Tanya Informasi”.
• Semua CTA WhatsApp mengarah ke:
  https://wa.me/6281325269477?text=Halo%2C%20saya%20ingin%20menanyakan%20informasi%20CN%20Mart.
• Pada mobile, gunakan hamburger menu yang berfungsi dengan animasi sederhana.

2. HERO SECTION
• Headline: “Belanja Kebutuhan Harian Lebih Mudah di CN Mart”
• Subheadline: “Temukan pilihan kebutuhan sehari-hari, makanan, minuman, dan produk favorit Anda di Business Center SMK Citra Negara.”
• CTA utama: “Tanya Informasi” menuju WhatsApp.
• CTA sekunder: “Lihat Produk Pilihan” untuk smooth scroll ke section produk.
• Tambahkan hero image besar bertema minimarket modern atau grocery shopping.
• Tambahkan badge: “Business Center SMK Citra Negara”.
• Tambahkan tiga poin kepercayaan: Produk Pilihan, Belanja Praktis, dan Lokasi Mudah Dijangkau.

3. PROMO PILIHAN
• Judul: “Promo Pilihan”
• Subjudul: “Temukan penawaran menarik untuk kebutuhan belanja Anda.”
• Tampilkan tiga kartu promo visual.
• Karena data promo aktual belum tersedia, semua kartu wajib memakai badge “Contoh Promo”.
• Contoh judul: Hemat untuk Produk Pilihan, Paket Belanja Harian, dan Promo Snack & Minuman.
• Setiap kartu memuat gambar relevan, badge kuning, judul, deskripsi singkat, dan tombol “Tanya Promo” menuju WhatsApp.
• Jangan mencantumkan nominal diskon atau harga spesifik yang terkesan sebagai data resmi.

4. KATEGORI PRODUK
• Judul: “Semua Kebutuhan Ada di Sini”
• Subjudul: “Pilihan produk untuk memenuhi kebutuhan sehari-hari Anda.”
• Tampilkan enam kartu: Makanan & Minuman, Sembako, Snack & Jajanan, Kebersihan Rumah, Perawatan Diri, dan Produk Pilihan.
• Setiap kartu memiliki ikon/gambar, judul, deskripsi singkat, serta link “Tanyakan Produk”.
• Tambahkan hover effect: kartu sedikit terangkat, shadow meningkat, dan ikon beraksen kuning/hijau.

5. PRODUK PILIHAN
• Judul: “Produk Pilihan Pelanggan”
• Subjudul: “Beragam kebutuhan untuk melengkapi aktivitas harian Anda.”
• Tampilkan enam kartu produk contoh: Beras Pilihan, Minyak Goreng, Air Mineral, Kopi Sachet, Snack Keluarga, dan Sabun Cuci Piring.
• Setiap kartu berisi gambar Unsplash, nama, kategori, keterangan “Ketersediaan dan harga dapat ditanyakan langsung.”, serta tombol “Tanya Stok” menuju WhatsApp.
• Jangan tampilkan harga palsu atau informasi stok palsu.

6. KEUNGGULAN
• Judul: “Kenapa Memilih CN Mart?”
• Tampilkan empat kartu:
  - Produk Pilihan: Beragam pilihan kebutuhan harian untuk warga sekolah dan masyarakat sekitar.
  - Belanja Praktis: Memudahkan Anda mendapatkan kebutuhan penting dalam satu tempat.
  - Lokasi Strategis: Berada di lingkungan SMK Citra Negara, Beji, Depok.
  - Pelayanan Ramah: Kami siap membantu memberikan informasi produk yang Anda butuhkan.
• Gunakan ikon modern dengan kombinasi hijau #699d13 dan kuning #fbf220.

7. CARA BELANJA
• Judul: “Belanja di CN Mart, Mudah dan Praktis”
• Tampilkan tiga langkah:
  1) Pilih kebutuhan Anda — Temukan kategori produk yang ingin Anda cari.
  2) Hubungi untuk informasi — Tanyakan stok, produk, atau informasi lainnya melalui WhatsApp.
  3) Kunjungi CN Mart — Datang langsung ke lokasi Business Center SMK Citra Negara.
• Gunakan timeline horizontal di desktop dan vertikal di mobile.
• Tambahkan nomor langkah besar dengan background kuning dan teks hijau.

8. TESTIMONI
• Judul: “Apa Kata Pengunjung?”
• Subjudul: “Contoh pengalaman positif dari pengunjung CN Mart.”
• Tampilkan minimal tiga kartu testimoni dengan avatar placeholder elegan.
• Semua testimoni wajib diberi label “Contoh Testimoni”.
• Contoh isi:
  - “Pilihan produknya membantu untuk kebutuhan harian di lingkungan sekolah.”
  - “Lokasinya mudah ditemukan dan suasananya nyaman untuk berbelanja.”
  - “Pelayanannya ramah dan informasinya jelas.”
• Jangan menyebut nama pelanggan asli atau membuat klaim yang tidak dapat diverifikasi.

9. FAQ
• Judul: “Pertanyaan yang Sering Ditanyakan”
• Buat accordion FAQ interaktif dengan pertanyaan:
  - Di mana lokasi CN Mart?
  - Kapan jam operasional CN Mart?
  - Produk apa saja yang tersedia di CN Mart?
  - Bagaimana cara menanyakan stok produk?
  - Apakah saya dapat menghubungi CN Mart melalui WhatsApp?
  - Apakah tersedia promo produk?
• Jawaban wajib sesuai data: lokasi berada di lingkungan SMK Citra Negara, informasi stok/harga/promo dapat ditanyakan via WhatsApp, dan jangan menjanjikan layanan pesan antar, metode pembayaran, maupun promo tertentu.

10. CTA
• Gunakan background hijau #699d13 dengan pola atau aksen kuning #fbf220.
• Headline: “Butuh Informasi Produk? Hubungi CN Mart”
• Subheadline: “Dapatkan informasi mengenai produk, stok, dan kebutuhan belanja Anda melalui kontak resmi kami.”
• Tombol: “Tanya via WhatsApp”.

11. KONTAK
• Judul: “Kunjungi CN Mart”
• Tampilkan:
  CN Mart — Business Center SMK Citra Negara
  Alamat: Jl. Raya Tanah Baru No. 99, Kemiri Jaya, Beji, Depok, Jawa Barat 16421
  Email: info@citranegara.sch.id
  Telepon: (021) 77201052
  WhatsApp Informasi: 081325269477
  Jam Operasional: Senin–Jumat 07.00–15.30 WIB; Sabtu 07.00–13.00 WIB; Minggu Tutup.
• Tambahkan tombol “Buka Google Maps” dan “Tanya via WhatsApp”.
• Tambahkan Google Maps embed untuk alamat tersebut.

12. FOOTER
• Tampilkan logo CN Mart, teks “Business Center SMK Citra Negara”, ringkasan singkat, link navigasi cepat, alamat, email, telepon, jam operasional, dan link https://smk.citranegara.sch.id/.
• Copyright: “© 2026 CN Mart – Business Center SMK Citra Negara. Semua Hak Dilindungi.”
• Tampilkan ikon media sosial hanya sebagai placeholder visual dan jangan arahkan ke akun yang tidak diketahui.

FITUR TAMBAHAN

• Sticky navbar, mobile navigation menu, smooth scrolling, scroll-to-top button, floating WhatsApp button, hover effect, dan lazy loading image.
• Tambahkan SEO meta tags:
  - Title: “CN Mart | Business Center SMK Citra Negara”
  - Description: “CN Mart adalah Business Center SMK Citra Negara di Beji, Depok untuk kebutuhan harian, makanan, minuman, dan produk pilihan.”
  - Keywords: CN Mart, Business Center, SMK Citra Negara, minimarket Depok, kebutuhan harian Beji.
• Tambahkan Open Graph tags dan Schema LocalBusiness JSON-LD menggunakan data CN Mart.
• Jangan membuat klaim harga, promo, layanan pesan antar, metode pembayaran, akun media sosial, atau nomor kontak lain yang belum dikonfirmasi.
• Jika membuat konten promo atau testimoni, beri label jelas “Contoh Promo” dan “Contoh Testimoni”.

OUTPUT YANG DIHARAPKAN

• Berikan kode lengkap satu file index.html.
• Gunakan desain polished, modern, responsif, dan production-ready.
• Pastikan menu mobile, accordion FAQ, scroll-to-top button, smooth scrolling, dan tombol WhatsApp berfungsi.
• Pastikan visual dominan menggunakan #fbf220 dan #699d13 secara seimbang dan tetap nyaman dibaca.
• Utamakan pengalaman pengguna yang jelas, ramah, dan membantu pengunjung memperoleh informasi produk CN Mart.

0 Comments