E-Course: Prompt Mastery Masterclass: Buat Landing Page 10 Menit dengan ChatGPT

Sebelum kita mulai membuat landing page, kita harus tahu apa itu prompt dan bagaimana AI bisa membantu kita.

• Prompt adalah instruksi yang kita berikan ke ChatGPT agar menghasilkan teks yang kita inginkan.
• Dengan prompt yang tepat, kita bisa membuat headline, copywriting, CTA, bahkan desain layout landing page.

• Dulu, bikin landing page butuh desainer, copywriter, dan developer.
• Sekarang, cukup dengan ChatGPT + sedikit sentuhan manual, kita bisa membuat landing page yang profesional dan langsung siap dipakai.

Landing page bukan sekadar halaman biasa, tapi harus punya alur yang meyakinkan pengunjung untuk mengambil tindakan.

Struktur umumnya seperti ini:

1. ✅ Headline & Subheadline → Menarik perhatian & menjelaskan manfaat utama.
2. ✅ Gambar atau Video → Memperjelas produk/jasa yang ditawarkan.
3. ✅ Deskripsi & Manfaat → Menunjukkan solusi untuk masalah pelanggan.
4. ✅ Testimoni atau Bukti Sosial → Meningkatkan kepercayaan.
5. ✅ Call to Action (CTA) → Mendorong pengunjung untuk bertindak (beli, daftar, dll).
   
   Di modul ini, kita belajar dasar-dasarnya dulu. Setelah itu, kita akan mulai praktek membuat semua bagian landing page dengan bantuan ChatGPT.

Sekarang kita masuk ke bagian paling pertama yang dilihat pengunjung saat membuka landing page: Headline dan Hook!

Kenapa ini penting?
📌 80% orang hanya membaca headline sebelum memutuskan lanjut atau tidak
📌 Kalau headline-nya biasa-biasa aja, pengunjung akan langsung close tab tanpa baca lebih lanjut

Di modul ini, kita akan belajar cara membuat headline yang bikin pengunjung penasaran & ingin tahu lebih lanjut dengan bantuan ChatGPT.

Headline adalah kalimat pertama yang menarik perhatian pengunjung.

• Harus jelas, menarik, dan langsung menunjukkan manfaat
• Tidak boleh terlalu panjang atau bertele-tele
• Harus membuat orang penasaran & ingin lanjut membaca
  

Contoh:
❌ "Belajar Membuat Landing Page" → terlalu umum, kurang menarik
✅ "Bikin Landing Page Keren dalam 10 Menit Tanpa Coding!" → lebih spesifik & menarik

Prompt ChatGPT untuk membuat headline:
"Buatkan 5 headline landing page untuk [topik kamu], gunakan bahasa yang persuasif dan menarik perhatian."

Setelah headline menarik perhatian, kita butuh subheadline yang menjelaskan lebih lanjut kenapa pengunjung harus lanjut membaca.

Contoh:
🟢 Headline: "Bikin Landing Page Keren dalam 10 Menit Tanpa Coding!"
🟢 Subheadline: "Gunakan ChatGPT & AI untuk membuat landing page profesional dengan mudah, tanpa ribet!"

Prompt ChatGPT untuk subheadline:
"Buatkan subheadline yang memperjelas manfaat dari headline ini: '[masukkan headline]'. 

Notes: lebih spesifik dan menarik" 

Tipe-tipe headline yang terbukti efektif:

• Langsung ke Manfaat → “Dapatkan Website Profesional dalam 5 Menit, Tanpa Ribet!”
• Gunakan Angka & Waktu → “Rahasia Bikin Landing Page yang Menghasilkan 3X Lebih Banyak Penjualan!”
• Tunjukkan Solusi Masalah → “Capek Bikin Landing Page yang Gak Laku? Ini Solusinya!”
• Gunakan Testimoni → “Lebih dari 5.000 Pebisnis Sudah Menggunakan AI untuk Bikin Landing Page Mereka!”

1. Coba gunakan prompt yang sudah kita pelajari
2. Buat 3-5 variasi headline & subheadline
3. Pilih yang paling menarik & tes ke audiensmu

Setelah punya headline yang menarik, sekarang kita masuk ke isi utama landing page: copywriting!

📌 Copywriting adalah seni menulis teks yang meyakinkan orang untuk bertindak (beli, daftar, klik, dll).
📌 Dengan ChatGPT, kita bisa membuat copywriting yang powerful dalam hitungan menit!

Deskripsi produk/jasa harus jelas, padat, dan fokus ke manfaat untuk pelanggan. Jangan hanya menjelaskan fitur, tapi juga bagaimana produk/jasa ini bisa menyelesaikan masalah mereka.

Contoh:
❌ "Kami menyediakan layanan pembuatan landing page berbasis AI." → Terlalu umum, kurang menarik.
✅ "Buat landing page yang terlihat profesional hanya dalam 10 menit dengan bantuan AI! Tanpa coding, tanpa ribet."

Prompt ChatGPT untuk deskripsi produk/jasa:
"Buatkan deskripsi produk/jasa untuk [nama produk] dengan gaya copywriting yang persuasif, singkat, dan fokus pada manfaatnya."

Ada 2 teknik powerful yang bisa kita gunakan untuk membuat copywriting persuasif:

Prompt ChatGPT untuk AIDA:
"Buat copywriting dengan teknik AIDA untuk produk [nama produk]."

Prompt ChatGPT untuk PAS:
"Buat copywriting dengan teknik PAS untuk masalah [masalah yang ingin dipecahkan]."

CTA (Call-to-Action) adalah ajakan agar pengunjung melakukan tindakan (klik tombol, daftar, beli, dll).

✅ Contoh CTA yang kuat:

• “Coba Sekarang Gratis!”
• “Buat Landing Page Pertama Kamu dalam 5 Menit!”
• “Daftar Sekarang & Dapatkan Bonus Template!”
  

Prompt ChatGPT untuk CTA:
"Buatkan 5 contoh CTA yang menarik dan persuasif untuk produk [nama produk]."

• Gunakan AIDA atau PAS untuk membuat copywriting produk/jasamu.
• Buat beberapa versi CTA dan pilih yang paling menarik.
• Uji hasilnya dengan audiens atau A/B testing.

Sekarang kita sudah punya headline yang menarik dan copywriting yang persuasif. Tapi ada satu hal lagi yang tidak kalah penting: Desain dan Struktur Landing Page!

💡 Kenapa Desain Landing Page Itu Penting?
📌 94% first impression pengunjung dipengaruhi oleh desain.
📌 Desain yang buruk = pengunjung langsung pergi tanpa membaca isi.
📌 Struktur yang rapi dan jelas meningkatkan konversi hingga 200%!

Di modul ini, kita akan belajar cara membuat desain landing page yang profesional tanpa harus jadi desainer!

Landing page yang efektif biasanya terdiri dari beberapa elemen utama:

1️⃣ Header (Headline + Subheadline + CTA utama)
👉 Bagian pertama yang dilihat pengunjung.
👉 Harus langsung menarik perhatian dan menunjukkan manfaat utama.

2️⃣ Section Problem & Solution
👉 Jelaskan masalah yang dialami audiens.
👉 Beri tahu bahwa produk/jasa kamu adalah solusi terbaik.

3️⃣ Benefit (Keunggulan Produk/Jasa)
👉 Jelaskan apa yang membuat produk/jasa kamu unik.
👉 Gunakan bullet points agar mudah dibaca.

4️⃣ Testimoni & Social Proof
👉 Tampilkan review atau testimoni dari pelanggan.
👉 Bisa juga sertakan logo perusahaan yang pernah menggunakan produkmu.

5️⃣ Call-to-Action (CTA) Kedua
👉 Ingatkan pengunjung untuk mengambil tindakan sekarang juga!
👉 Bisa berupa tombol “Daftar Sekarang” atau “Coba Gratis Sekarang”.

6️⃣ FAQ (Pertanyaan yang Sering Ditanyakan)
👉 Jawab pertanyaan umum untuk mengatasi keraguan pengunjung.

7️⃣ Footer (Kontak, Copyright, Disclaimer, dll.)
👉 Berisi informasi tambahan atau legalitas bisnis.

Prompt ChatGPT untuk Struktur Landing Page:
"Buatkan struktur landing page yang ideal untuk produk/jasa [nama produk]."

Tidak perlu jadi desainer, cukup gunakan prinsip ini agar landing page terlihat profesional:

✅ Gunakan Warna yang Konsisten
🔹 Pilih 1 warna utama + 1 warna aksen.
🔹 Contoh: Biru (utama) + Kuning (aksen) → Profesional & Friendly.

✅ Gunakan Font yang Mudah Dibaca
🔹 Heading: Gunakan font tebal seperti Montserrat atau Poppins.
🔹 Body Text: Gunakan font simple seperti Open Sans atau Roboto.

✅ Gunakan Gambar Berkualitas
🔹 Jangan pakai gambar asal-asalan.
🔹 Gunakan gambar yang relevan & berkualitas tinggi (bisa dari Unsplash, Pexels).

✅ Gunakan Whitespace dengan Baik
🔹 Jangan buat landing page terlalu padat, beri ruang agar nyaman dibaca.

✅ Pastikan Mobile-Friendly
🔹 70% pengunjung datang dari HP, jadi pastikan desainnya responsif!

Prompt ChatGPT untuk Desain:
"Buatkan tips desain landing page yang profesional dan menarik untuk produk/jasa [nama produk]."

Untuk membuat landing page dengan cepat dan gratis, kita bisa menggunakan:

🟢 Elementor Free → Drag & drop builder, mudah digunakan.
🟢 Kadence Blocks → Tambahkan elemen desain tanpa ribet.
🟢 Spectra (ex-Ultimate Addons for Gutenberg) → Ringan dan cepat.

Cara buatnya:
1️⃣ Instal WordPress + Elementor Free.
2️⃣ Buat Halaman Baru > Pilih “Edit dengan Elementor”.
3️⃣ Gunakan template gratis atau mulai dari nol.
4️⃣ Tambahkan elemen yang sudah kita pelajari tadi.
5️⃣ Preview & Publish!

• Gunakan struktur yang sudah kita pelajari.
• Terapkan prinsip desain yang profesional.
• Buat dan publikasikan di WordPress dengan Elementor atau Kadence Blocks.

Sekarang kita sudah punya landing page yang menarik dan profesional. Tapi, bagaimana caranya supaya lebih banyak orang yang benar-benar klik tombol CTA dan melakukan tindakan?

Di modul ini, kita akan belajar cara mengoptimalkan landing page agar lebih banyak konversi (daftar, beli, atau klik tombol).

Optimasi konversi adalah strategi untuk meningkatkan jumlah pengunjung yang melakukan tindakan di landing page, misalnya:
✔ Mendaftar
✔ Mengisi formulir
✔ Membeli produk

Kenapa ini penting?
✅ Lebih banyak konversi = lebih banyak pelanggan.
✅ Hemat biaya iklan (karena lebih banyak orang yang tertarik).
✅ Landing page jadi lebih efektif!

✅ Perbaiki CTA agar lebih menarik.
✅ Tambahkan testimoni atau social proof.
✅ Gunakan urgensi & kelangkaan.
✅ Pastikan loading cepat & mobile-friendly.
✅ Lakukan A/B Testing untuk meningkatkan konversi.

Setelah landing page kita siap dan dioptimasi, langkah berikutnya adalah memastikan bahwa setiap calon pelanggan yang masuk tidak terlewatkan.

Di modul ini, kita akan belajar cara menghubungkan landing page dengan WhatsApp & email marketing, sehingga setiap prospek bisa langsung mendapatkan follow-up otomatis.

📌 Tidak semua orang langsung membeli setelah melihat landing page.
📌 Dengan WhatsApp & email, kita bisa membangun komunikasi dan nurturing supaya mereka tertarik membeli.
📌 Follow-up yang baik bisa meningkatkan konversi hingga 3x lipat!

Contoh skenario:
✅ Pengunjung mengisi form di landing page → Dapat pesan otomatis di WhatsApp/email.
✅ Pengunjung tertarik tapi belum beli → Dapat email reminder & promo eksklusif.
✅ Pengunjung sudah beli → Dapat email onboarding atau bonus materi.

(1) Buat Link WhatsApp Otomatis
Kita bisa menggunakan link WhatsApp dengan pesan otomatis.

https://wa.me/6281234567890?text=Halo,%20saya%20tertarik%20dengan%20kursus%20Anda.

📌 Format link WhatsApp: 👉 Gantilah nomor dan teks sesuai kebutuhanmu.

📌 Bisa juga pakai generator link WhatsApp:
🔗 https://create.wa.link

🔹 (2) Tambahkan Tombol WhatsApp di Landing Page
📌 Jika pakai Elementor:
✔ Tambahkan widget Button → Pilih Link WhatsApp
📌 Jika pakai Gutenberg:
✔ Tambahkan Button → Masukkan link WhatsApp
📌 Bisa juga pakai plugin seperti Click to Chat

🔹 (3) Gunakan WhatsApp Auto-Reply (Chatbot Sederhana)
📌 Gunakan WhatsApp Business API atau tools seperti:
✔ WA Auto-Responder
✔ WATI (WhatsApp Business API)
✔ ManyChat (untuk WhatsApp)

Prompt ChatGPT untuk pesan follow-up WhatsApp:
"Buatkan pesan otomatis WhatsApp untuk follow-up calon pelanggan yang baru saja mengisi form di landing page."

🔹 (1) Pilih Email Marketing Gratis
📌 Rekomendasi platform gratis:
✔ Mailchimp (Gratis untuk 500 kontak)
✔ Brevo (ex-Sendinblue) (Gratis untuk 300 email/hari)
✔ MailerLite (Gratis untuk 1.000 kontak)

🔹 (2) Tambahkan Form Email di Landing Page
📌 Jika pakai Elementor:
✔ Gunakan widget Form → Hubungkan ke Mailchimp
📌 Jika pakai Gutenberg:
✔ Gunakan HTML Block → Masukkan form dari Mailchimp

🔹 (3) Buat Email Otomatis untuk Follow-Up
Setelah mereka mengisi form, mereka bisa langsung mendapatkan email otomatis, misalnya:
📩 Email #1: “Terima kasih! Ini langkah berikutnya…”
📩 Email #2 (H+1): “Kenapa kursus ini cocok untuk kamu?”
📩 Email #3 (H+3): “Bonus spesial kalau daftar sekarang!”

Prompt ChatGPT untuk email follow-up:
"Buatkan 3 email follow-up untuk calon pelanggan yang tertarik dengan kursus pembuatan landing page menggunakan ChatGPT."

✅ Tambahkan tombol WhatsApp dengan pesan otomatis.
✅ Gunakan chatbot sederhana untuk auto-reply.
✅ Hubungkan landing page ke email marketing gratis.
✅ Buat email follow-up otomatis untuk meningkatkan konversi.

Sekarang, kita sudah punya landing page yang siap jualan. Tapi, kalau tidak ada yang mengunjungi, hasilnya tetap nol besar.

Di modul ini, kita akan belajar cara mendatangkan banyak pengunjung ke landing page dengan strategi promosi efektif.

Kalau ingin hasil lebih cepat, kita bisa menggunakan iklan berbayar.

Prompt ChatGPT untuk copywriting iklan:
"Buatkan copywriting iklan Facebook untuk [produk/jasa anda], yang menarik dan persuasif."

Prompt ChatGPT untuk iklan Google Ads:
"Buatkan teks iklan Google Ads untuk [nama produk/jasa anda]."

✅ Posting promosi di media sosial.
✅ Buat video edukasi di TikTok & YouTube.
✅ Optimalkan SEO agar ditemukan di Google.
✅ Jika ada budget, coba jalankan iklan.

1. Membuat Landing Page Sederhana
Perintah:

"Buatkan landing page sederhana dengan tema [tema yang diinginkan], menggunakan HTML, CSS, dan JavaScript. Sertakan elemen-elemen seperti header, hero section, fitur, CTA, dan footer."

Contoh:

"Buatkan landing page untuk kursus belajar ngaji online dengan desain modern, menggunakan HTML, CSS, dan Tailwind CSS. Sertakan bagian hero, manfaat belajar, testimoni, pricing, dan CTA."

2. Menambahkan Fitur Kustom
Perintah:

"Tambahkan fitur [fitur yang diinginkan] ke landing page, dan buat tampilannya menarik dengan [framework atau gaya desain yang diinginkan]."

Contoh:

"Tambahkan form pendaftaran yang terhubung ke WhatsApp dan animasi scroll di landing page kursus ngaji ini."

3. Mengoptimalkan Desain dan Responsivitas
Perintah:

"Optimalkan landing page agar mobile-friendly dengan Tailwind CSS atau Bootstrap. Pastikan tampilan rapi dan cepat dimuat."

Contoh:

"Pastikan landing page kursus mengaji ini responsif di semua perangkat dan tambahkan efek smooth scroll."

4. Menambahkan Form dan Integrasi
Perintah:

"Buatkan form pendaftaran yang terhubung ke Google Sheets / WhatsApp API untuk menangkap lead pengguna."

Contoh:

"Tambahkan form pendaftaran di landing page ini yang otomatis menyimpan data ke Google Sheets dan mengirim notifikasi ke WhatsApp admin."

5. Meminta Review dan Revisi
Perintah:

"Review kode landing page ini dan berikan saran untuk meningkatkan kecepatan, desain, dan SEO-nya."

Contoh:

"Tolong periksa apakah kode landing page ini sudah optimal untuk SEO dan kecepatan loading."

Kamus Landing Page Profesional: Panduan Lengkap

1. Teknologi yang Digunakan

• Frontend: HTML, CSS, JavaScript (React, Vue.js, TailwindCSS, Bootstrap)
• Backend: Node.js, PHP, Python (Flask/Django), Golang
• CMS: WordPress + Elementor, Webflow, Framer
• Hosting: Vercel, Netlify, Cloudflare Pages, AWS, DigitalOcean
• Tracking & Analytics: Google Analytics, Facebook Pixel, Hotjar, Microsoft Clarity
• A/B Testing: Google Optimize, VWO, Optimizely
• Email & Automation: Mailchimp, ActiveCampaign, ConvertKit, Zapier

2. Desain (UI/UX)

• Layout: Clean, minimalis, mobile-friendly, dan mengikuti prinsip F-pattern atau Z-pattern.
  • Output: Desain F-pattern cocok untuk halaman dengan banyak teks, meningkatkan keterbacaan hingga 30%.
  • Output: Desain Z-pattern lebih efektif untuk halaman yang memiliki CTA di bagian bawah, meningkatkan klik hingga 25%.
• Warna: Kontras tinggi untuk CTA (Call-to-Action), warna utama 2-3 jenis saja.
  • Output: Tombol CTA dengan warna kontras bisa meningkatkan konversi hingga 15%.
• Tata Letak: Gunakan whitespace untuk meningkatkan keterbacaan.
  • Output: Menggunakan whitespace yang baik bisa meningkatkan engagement hingga 20%.
• Aksesibilitas: Gunakan teks alternatif pada gambar, warna yang ramah daltonisme, dan font yang mudah dibaca.

3. Tipografi & Font

• Font Heading: Montserrat, Poppins, Playfair Display, Roboto Slab
• Font Body: Open Sans, Lato, Roboto, Nunito
• Prinsip: Kombinasi serif + sans-serif untuk kesan profesional & modern
  • Output: Kombinasi yang tepat dapat meningkatkan keterbacaan hingga 18% dan memperpanjang waktu kunjungan halaman.

4. Copywriting yang Efektif

• Headline: Harus jelas, langsung ke inti, dan menarik perhatian dalam 3 detik pertama.
  • Contoh: “Tingkatkan Penjualan 2X Lipat dengan Landing Page Optimal!”
  • Output: Headline yang menarik bisa meningkatkan konversi hingga 70%.
• Subheadline: Menjelaskan manfaat atau solusi yang ditawarkan.
• Body Copy: Fokus pada masalah target audience dan bagaimana produk/jasa menjadi solusinya.
• CTA (Call-to-Action): Gunakan kata kerja yang kuat seperti “Dapatkan Sekarang”, “Coba Gratis”, “Gabung Sekarang”.
  • Output: CTA yang spesifik bisa meningkatkan klik hingga 30%.
• Social Proof: Testimoni, jumlah pengguna, studi kasus.
  • Output: Menampilkan testimoni dapat meningkatkan kepercayaan dan konversi hingga 50%.

5. Fitur Penting

• Hero Section: Menampilkan headline utama + CTA yang jelas.
• Formulir Opt-in: Minimalis dengan 1-3 input field (nama, email, nomor WhatsApp).
  • Output: Formulir dengan lebih sedikit input field meningkatkan konversi hingga 40%.
• Trust Elements: Testimoni, logo partner, penghargaan, rating, jumlah pelanggan.
  • Output: Logo partner dan penghargaan meningkatkan kredibilitas dan dapat menambah konversi hingga 20%.
• Countdown Timer: Untuk urgensi (misalnya promo terbatas).
  • Output: Dapat meningkatkan penjualan hingga 35% karena efek urgensi.
• Live Chat: WhatsApp API, Intercom, Tidio untuk komunikasi langsung.
  • Output: Bisa meningkatkan interaksi hingga 50% dan mempercepat keputusan pembelian.
• Exit Intent Pop-up: Menangkap pengunjung yang hampir pergi dengan penawaran menarik.
  • Output: Bisa mengurangi bounce rate hingga 30% dan meningkatkan lead capture hingga 20%.
• Sticky Header dengan CTA: CTA tetap terlihat saat pengguna scroll.
  • Output: Meningkatkan klik pada CTA hingga 25%.
• Multistep Form: Form pendaftaran yang dibagi menjadi beberapa langkah.
  • Output: Meningkatkan completion rate hingga 30%.
• Gamifikasi (Spin the Wheel, Reward System): Memberikan kupon diskon atau hadiah bagi pengunjung.
  • Output: Meningkatkan engagement hingga 35% dan lead collection hingga 50%.
• Social Sharing & Referral Program: Memudahkan pengunjung berbagi landing page dan mendapatkan insentif.
  • Output: Bisa meningkatkan traffic organik hingga 20%.
• AI-Powered Chatbot: Chatbot berbasis AI untuk menjawab pertanyaan pengunjung secara real-time.
  • Output: Bisa meningkatkan interaksi hingga 50%.

6. Animasi & Interaktivitas

• Hover Effects: Efek saat pengguna mengarahkan kursor ke elemen (misalnya tombol berubah warna).
  • Teknologi: CSS, JavaScript (GSAP, Framer Motion)
  • Output: Meningkatkan keterlibatan pengguna hingga 15%.
• Scroll Animations: Elemen yang muncul atau berubah saat pengguna scroll ke bawah.
  • Teknologi: AOS (Animate On Scroll), GSAP
  • Output: Bisa meningkatkan engagement hingga 20%.
• Microinteractions: Efek kecil seperti ikon yang bergerak saat diklik.
  • Teknologi: CSS, Lottie, Framer Motion
  • Output: Meningkatkan pengalaman pengguna dan membuat landing page lebih menarik.
• Background Video: Menampilkan video singkat di bagian hero section.
  • Teknologi: HTML5 Video, WebM
  • Output: Bisa meningkatkan konversi hingga 80% jika digunakan dengan benar.
• Lazy Loading Animations: Elemen hanya muncul saat diperlukan untuk meningkatkan performa.
  • Teknologi: Intersection Observer API, GSAP
  • Output: Mempercepat loading page hingga 30%.

7. Optimasi Konversi (CRO)

Output: Retargeting bisa meningkatkan konversi hingga 30%.

Kecepatan Load: Gunakan CDN, optimalkan gambar, minifikasi CSS/JS.

Output: Setiap peningkatan kecepatan load 1 detik dapat meningkatkan konversi hingga 7%.

Mobile-First Design: Harus responsif di semua perangkat.

Output: Desain mobile-first bisa meningkatkan konversi hingga 50%.

A/B Testing: Uji berbagai elemen seperti warna tombol, teks CTA, dan tata letak.

Output: A/B testing pada CTA bisa menghasilkan peningkatan klik hingga 20%.

Retargeting Ads: Gunakan Facebook Ads atau Google Ads untuk menargetkan ulang pengunjung yang belum konversi.

Bonus Template Promt Ini siap pakai dan bisa disesuiakan oleh Anda.

📝 FORMAT TEMPLATE PROMPT:
Kamu adalah seorang developer web berpengalaman. Buat kode HTML & CSS (tanpa JavaScript) untuk landing page [produk/jasa/toko anda]. Halaman harus memiliki:

Header dengan logo di kiri dan menu navigasi di kanan (Home, Produk, Kontak).
Hero Section dengan [gambar produk/jasa anda], judul menarik, dan tombol "Lihat Koleksi".
Bagian Produk dengan 3 kartu produk (gambar, nama, harga, tombol beli).
Testimoni Pelanggan dalam bentuk carousel sederhana.
Footer dengan kontak dan sosial media.
Gunakan Tailwind CSS untuk styling. Pastikan desainnya modern dan responsif.

Kamu adalah seorang developer web berpengalaman. Buat kode HTML & CSS (tanpa JavaScript) untuk landing page toko online sepatu. Halaman harus memiliki:

Header dengan logo di kiri dan menu navigasi di kanan (Home, Produk, Kontak).
Hero Section dengan gambar sepatu besar, judul menarik, dan tombol "Lihat Koleksi".
Bagian Produk dengan 3 kartu produk (gambar, nama, harga, tombol beli).
Testimoni Pelanggan dalam bentuk carousel sederhana.
Footer dengan kontak dan sosial media.
Gunakan Tailwind CSS untuk styling. Pastikan desainnya modern dan responsif.

📝 FORMAT TEMPLATE PROMPT:
Kamu adalah seorang frontend developer profesional. Tulis kode lengkap untuk landing page startup teknologi dengan gaya [minimalis dan futuristik]. Gunakan [teknologi yang dipakai contoh: html,css,javascript].

Header: Logo kiri, menu navigasi kanan (Home, Features, Pricing, Contact).
Hero Section: Background gradient biru-hitam, teks besar "Boost Your Productivity", tombol "Try for Free".
Features Section: 3 kolom dengan ikon, judul, dan deskripsi fitur.
CTA (Call-to-Action): Form email untuk daftar newsletter.
Footer: Navigasi & hak cipta.
Gunakan best practice clean code dan pastikan responsif untuk mobile & desktop.

Kamu adalah seorang frontend developer profesional. Tulis kode lengkap untuk landing page startup teknologi dengan gaya minimalis dan futuristik. Gunakan html,css,javascript.

Header: Logo kiri, menu navigasi kanan (Home, Features, Pricing, Contact).
Hero Section: Background gradient biru-hitam, teks besar "Boost Your Productivity", tombol "Try for Free".
Features Section: 3 kolom dengan ikon, judul, dan deskripsi fitur.
CTA (Call-to-Action): Form email untuk daftar newsletter.
Footer: Navigasi & hak cipta.
Gunakan best practice clean code dan pastikan responsif untuk mobile & desktop.

📝 FORMAT TEMPLATE PROMPT:
Kamu adalah seorang developer frontend profesional. Buat kode HTML & Tailwind CSS untuk landing page [toko/produk/jasa anda] yang modern dan responsif.
Spesifikasi:

Header: Logo kiri, menu navigasi kanan (Home, Produk, Promo, Kontak).
Hero Section: [Gambar model dengan teks "Fashion Terbaru, Harga Terjangkau", tombol "Belanja Sekarang"].
Produk Unggulan: Grid 3 kolom, tiap produk memiliki gambar, nama, harga, dan tombol beli.
Testimoni Pelanggan: Carousel sederhana dengan 3 review.
CTA (Call-to-Action): Form email untuk daftar newsletter.
Footer: Informasi kontak, sosial media, dan kebijakan toko.
Gunakan desain minimalis & warna netral. Pastikan responsif di mobile & desktop.

Kamu adalah seorang developer frontend profesional. Buat kode HTML & Tailwind CSS untuk landing page toko online pakaian yang modern dan responsif.
Spesifikasi:

Header: Logo kiri, menu navigasi kanan (Home, Produk, Promo, Kontak).
Hero Section: Gambar model dengan teks "Fashion Terbaru, Harga Terjangkau", tombol "Belanja Sekarang".
Produk Unggulan: Grid 3 kolom, tiap produk memiliki gambar, nama, harga, dan tombol beli.
Testimoni Pelanggan: Carousel sederhana dengan 3 review.
CTA (Call-to-Action): Form email untuk daftar newsletter.
Footer: Informasi kontak, sosial media, dan kebijakan toko.
Gunakan desain minimalis & warna netral. Pastikan responsif di mobile & desktop.

📝 FORMAT TEMPLATE PROMPT:
Kamu adalah seorang UI/UX designer & frontend developer berpengalaman. Buat kode HTML & Bootstrap 5 untuk landing page [produk/jasa anda].
Spesifikasi:

Header: Logo kiri, menu navigasi kanan (Home, Portofolio, Harga, Hubungi).
Hero Section: Background ilustrasi, teks besar "Tingkatkan Branding dengan Desain Profesional", tombol "Lihat Portofolio".
Layanan yang Ditawarkan: 3 ikon dengan deskripsi (Logo Design, Social Media Post, Branding Kit).
Testimoni Klien: Grid 2 kolom, dengan nama, foto, dan ulasan klien.
Pricing Section: 3 kartu harga (Basic, Pro, Premium).
CTA (Call-to-Action): Tombol WhatsApp untuk konsultasi gratis.
Footer: Form kontak dan sosial media.
Gunakan palet warna profesional (biru, putih, abu-abu) dan desain modern.

Kamu adalah seorang UI/UX designer & frontend developer berpengalaman. Buat kode HTML & Bootstrap 5 untuk landing page jasa desain grafis.
Spesifikasi:

Header: Logo kiri, menu navigasi kanan (Home, Portofolio, Harga, Hubungi).
Hero Section: Background ilustrasi, teks besar "Tingkatkan Branding dengan Desain Profesional", tombol "Lihat Portofolio".
Layanan yang Ditawarkan: 3 ikon dengan deskripsi (Logo Design, Social Media Post, Branding Kit).
Testimoni Klien: Grid 2 kolom, dengan nama, foto, dan ulasan klien.
Pricing Section: 3 kartu harga (Basic, Pro, Premium).
CTA (Call-to-Action): Tombol WhatsApp untuk konsultasi gratis.
Footer: Form kontak dan sosial media.
Gunakan palet warna profesional (biru, putih, abu-abu) dan desain modern.

📝 FORMAT TEMPLATE PROMPT:
Kamu adalah seorang desainer web profesional. Buat kode HTML + CSS (tanpa framework) untuk landing page [produk/jasa/toko anda] yang menarik dan responsif.
Spesifikasi:

Header: Logo kiri, menu navigasi kanan (Home, Menu, Reservasi, Kontak).
Hero Section: Background gambar restoran, teks besar "Nikmati Hidangan Lezat Kami", tombol "Lihat Menu".
Menu Section: Grid 3x2 menampilkan foto makanan, nama, dan harga.
Testimoni Pelanggan: Slider dengan ulasan pengunjung.
Reservasi: Form input nama, tanggal, dan jumlah tamu.
Footer: Alamat, nomor telepon, dan media sosial.
Gunakan font elegan dan warna hangat (merah, oranye, coklat) untuk menciptakan nuansa cozy.

Kamu adalah seorang desainer web profesional. Buat kode HTML + CSS (tanpa framework) untuk landing page restoran yang menarik dan responsif.
Spesifikasi:

Header: Logo kiri, menu navigasi kanan (Home, Menu, Reservasi, Kontak).
Hero Section: Background gambar restoran, teks besar "Nikmati Hidangan Lezat Kami", tombol "Lihat Menu".
Menu Section: Grid 3x2 menampilkan foto makanan, nama, dan harga.
Testimoni Pelanggan: Slider dengan ulasan pengunjung.
Reservasi: Form input nama, tanggal, dan jumlah tamu.
Footer: Alamat, nomor telepon, dan media sosial.
Gunakan font elegan dan warna hangat (merah, oranye, coklat) untuk menciptakan nuansa cozy.

Kamu adalah seorang desainer web profesional. Buat kode HTML + CSS + Javascript (bootsrapt) + tailwind dan gsap animasi untuk landing page restoran yang menarik dan responsif.
Spesifikasi:

Header: Logo kiri, menu navigasi kanan (Home, Menu, Reservasi, Kontak).
Hero Section: Background gambar restoran, teks besar "Nikmati Hidangan Lezat Kami", tombol "Lihat Menu".
Menu Section: Grid 3x2 menampilkan foto makanan, nama, dan harga.
Testimoni Pelanggan: Slider dengan ulasan pengunjung.
Reservasi: Form input nama, tanggal, dan jumlah tamu.
Footer: Alamat, nomor telepon, dan media sosial.
Gunakan font elegan dan warna hangat (merah, oranye, coklat) untuk menciptakan nuansa cozy.

📝 FORMAT TEMPLATE PROMPT:
Kamu adalah seorang frontend developer & UI/UX designer profesional. Buat kode HTML + CSS + JavaScript dalam 1 file untuk landing page portofolio [bidang profesi anda] dengan tampilan elegan dan responsif.
Spesifikasi:

Header: Nama & tagline di tengah, menu navigasi kanan (About, Projects, Skills, Contact).
Hero Section: Foto profil bulat, teks "Hi, I'm [Nama]! A Passionate Web Developer", tombol "View Projects".
Projects Section: 3 kartu project dengan gambar, nama project, deskripsi, dan link GitHub.
Skills Section: List teknologi yang dikuasai (HTML, CSS, JavaScript, Golang, React.js).
Contact Form: Input nama, email, pesan.
Footer: Sosial media dan GitHub.
Gunakan desain minimalis dan warna monokrom modern (hitam, putih, abu-abu).

Kamu adalah seorang frontend developer & UI/UX designer profesional. Buat kode HTML + CSS + JavaScript dalam 1 file untuk landing page portofolio developer dengan tampilan elegan dan responsif.
Spesifikasi:

Header: Nama & tagline di tengah, menu navigasi kanan (About, Projects, Skills, Contact).
Hero Section: Foto profil bulat, teks "Hi, I'm [Nama]! A Passionate Web Developer", tombol "View Projects".
Projects Section: 3 kartu project dengan gambar, nama project, deskripsi, dan link GitHub.
Skills Section: List teknologi yang dikuasai (HTML, CSS, JavaScript, Golang, React.js).
Contact Form: Input nama, email, pesan.
Footer: Sosial media dan GitHub.
Gunakan desain minimalis dan warna monokrom modern (hitam, putih, abu-abu).