Tools generator Landing Page berbasis AI yang dirancang khusus untuk marketer "Direct Response". NBE tidak hanya membuat layout, tapi menulis Sales Copy yang menghipnotis berdasarkan struktur psikologi manusia (Reptilian Brain).
Lupakan "Writer's Block". Dengan NBE, Anda bisa membuat Landing Page konversi tinggi untuk produk apa saja (Herbal, Digital, Jasa, Fashion) dalam waktu < 60 detik.
Instant Copy
AI menulis ribuan kata copywriting lengkap (Headline s/d FAQ) dalam 10 detik, disesuaikan dengan niche Anda.
Reptilian Brain
Copywriting menargetkan insting dasar manusia: Rasa Takut (Fear), Keserakahan (Greed), dan Ego.
Clean Code
HTML murni + Tailwind CSS. Tanpa database, ringan, loading cepat, dan siap di-upload ke mana saja.
⚡ Quick Start
1
Pilih Niche & Angle
Pilih kategori produk dan gaya bahasa (misal: "Brutal Truth" untuk obat keras, atau "Magnetic Story" untuk herbal).
2
Input Detail Produk
Masukkan nama produk dan deskripsi singkat (apa masalahnya, apa solusinya). Semakin spesifik, semakin bagus.
3
Generate & Edit
Klik Generate. Tunggu AI bekerja. Setelah selesai, masuk ke Editor Mode untuk mengubah teks, upload gambar, dan atur warna.
4
Download HTML
Download file `.html` dan upload ke hosting Anda (public_html) atau gunakan langsung.
🎯 Memahami "Marketing Angle"
Salah satu fitur terkuat NBE adalah kemampuan mengubah Tone of Voice. Memilih angle yang salah bisa membuat konversi rendah. Berikut panduan lengkapnya:
Angle Name
Karakteristik & Psikologi
Contoh Headline
Cocok Untuk
Magnetic Storytelling
Empatik, bercerita "From Zero to Hero", menyentuh hati. Menggunakan "Jebakan Cerita" agar orang betah membaca.
"Dulu Saya Malu Keluar Rumah Karena Jerawat, Sampai Saya Menemukan..."
Herbal, Jasa, Edukasi, Affiliate.
Brutal Truth
Menampar fakta, keras, jujur, "No Bullshit". Menyerang rasa denial (penyangkalan) pembaca.
"Berhenti Membuang Uang untuk Skincare Mahal yang Tidak Ada Hasilnya!"
Obat Keras, Solusi Vitalitas, Masalah Memalukan.
Fear & Scarcity
Fokus kerugian jika menunda (FOMO), menakut-nakuti dengan konsekuensi buruk.
"AWAS! Jangan Abaikan Nyeri Dada Ringan, Sebelum Menjadi Serangan Jantung!"
Kesehatan Akut, Keamanan (CCTV), Flash Sale.
Benefit Heavy
Fokus pada keuntungan (Gain), kesenangan, status sosial, dan hasil instan.
"Tampil Lebih Percaya Diri dengan Kulit Glowing dalam 7 Hari!"
Gadget, Fashion, Lifestyle, Kecantikan.
Logical Proof
Data driven, statistik, jurnal ilmiah, "masuk akal". Meyakinkan otak logis.
"Terbukti Secara Klinis: Kandungan X Efektif Mengurangi Y sebesar 80%."
Suplemen Medis, Software (SaaS), Investasi.
📝 Tips Input Produk (Prompting)
Kualitas output AI bergantung pada input Anda ("Garbage In, Garbage Out"). Semakin detail konteks yang Anda berikan, semakin tajam copy yang dihasilkan.
Formula Input Deskripsi yang Bagus:
"Produk ini adalah [NAMA], solusi untuk [MASALAH SPESIFIK]. Menggunakan bahan/teknologi [FITUR UTAMA]. Hasilnya membuat user bisa [HASIL AKHIR/TRANSFORMASI]. Target pasarnya adalah [SIAPA]."
Input Buruk
"Madu hutan asli. Murah. Beli sekarang."
Masalah: Terlalu umum, AI akan bingung mau menonjolkan apa.
Input Bagus
"Madu Zestmag, solusi nyeri lambung dan GERD kronis. Menggunakan 100% madu hutan + ekstrak kunyit. Bisa makan pedas lagi tanpa rasa perih dalam 7 hari. Untuk pekerja kantoran stress yang sering telat makan."
Hasil: AI akan fokus ke "Makan Pedas", "GERD", dan "Pekerja Kantoran".
🎨 Editor & Styling
Di panel editor, Anda bisa mengubah tampilan secara realtime tanpa coding.
1. Brand Color
Klik kotak warna di bagian atas editor. Warna ini akan mengubah:
Warna Tombol (CTA)
Warna Highlight Harga
Warna Border & Aksen
Warna Sticky Button Mobile
2. Style Template
Pilih "Style" di dropdown sebelah warna untuk mengubah nuansa:
Brutal (Default)
Font tebal (Inter), warna kontras merah/hitam. Agresif. Cocok untuk produk pria/solusi keras.
Modern Clean
Putih bersih, shadow halus, warna biru/ungu. Profesional. Cocok untuk jasa/digital.
Luxury
Gelap, emas, font serif (Merriweather). Elegan. Cocok untuk jam tangan/fashion mahal.
🖼️ Cara Upload Gambar
Konsep "Static Generator"
NBE tidak memiliki database server. Ini demi keamanan dan kecepatan Anda (File HTML jadi milik Anda 100%). Oleh karena itu, gambar harus di-hosting di tempat lain.
Anda harus menggunakan URL Gambar (Link) yang berakhiran ekstensi gambar. Berikut cara termudah:
1
Siapkan Foto
Pastikan foto produk jelas, pencahayaan bagus, dan ukuran tidak terlalu besar (rekomendasi: di bawah 500KB agar loading cepat).
Setelah upload, cari tombol "Copy Direct Link" atau klik kanan pada gambar -> "Copy Image Address". Wajib berakhiran .jpg / .png / .webp.
🏗️ Anatomi Landing Page
NBE menyusun Landing Page dalam 8 Bagian Strategis (Framework AIDA + Social Proof):
1. The Hook (Headline)
Terdiri dari Top Warning (Scarcity) dan Headline utama. Tujuannya menghentikan scroll user dalam 3 detik pertama.
2. The Problem (Pain & Agitation)
Bagian "Story" dan "Masalah". AI akan mengaduk-aduk emosi pembaca. Menggunakan teknik "Knife Twisting" (memperparah rasa sakit masalah agar mereka sadar butuh solusi).
3. The Solution (Bridge)
Memperkenalkan produk Anda sebagai satu-satunya solusi yang masuk akal ("The New Way") setelah agitasi masalah.
4. The Proof (Social Proof)
Testimoni, foto bukti chat, galeri pengiriman. Bagian ini mematikan skeptisme pembaca ("Ah, tipu-tipu nih").
5. The Offer (Grand Offer)
Bagian harga, bonus, dan coret harga. Disusun untuk membuat harga terlihat "No Brainer" (sangat murah dibanding value yang didapat).
6. The Logic & Urgency
Push/Pull Logic (Perbandingan Harga) dan Urgency (Kerugian menunda). Memaksa otak logis dan reptil untuk segera bertindak.
🎁 Fitur: Ads Kit
NBE tidak hanya membuat LP, tapi juga materi promosi. Lihat bagian paling atas Editor, ada menu accordion bernama "5x Ads Kit".
5 Variasi Headline
Gunakan ini untuk A/B Testing judul di Landing Page atau Thumbnail Iklan. Jika satu headline boncos, ganti dengan variasi lain.
5 Copywriting Iklan (Caption)
Teks siap pakai untuk caption Facebook Ads, Instagram, atau Script TikTok. Sudah termasuk Hook di awal dan CTA di akhir.
5 Prompt AI Image
Teks prompt bahasa Inggris untuk dimasukkan ke tools AI Image Generator. Cara pakainya:
Terletak di bagian bawah editor (Section 6), ini adalah "senjata rahasia" NBE untuk meningkatkan konversi (CVR).
Push & Pull (Logic Stack)
Teknik membandingkan harga dengan value (Framing). Tujuannya membuat harga produk terlihat sangat murah.
"Mahal? Coba bandingkan Rp 99rb ini dengan biaya operasi yang jutaan. Atau biaya bolak-balik RS. Masih terasa mahal?"
Urgency (Loss Aversion)
Psikologi: Manusia lebih takut kehilangan (rugi) daripada ingin mendapatkan (untung).
"Jika Anda menutup halaman ini, diskon hangus. Anda akan dipaksa membayar harga normal 2x lipat besok. Jangan biarkan orang lain mengambil slot Anda."
💾 Simpan & Download
Tombol "Simpan & Preview"
Wajib diklik setiap kali Anda selesai mengedit teks. Ini akan menyimpan data ke memori browser (Local Storage) dan memperbarui tampilan kanan (Preview).
Tombol Download
Menghasilkan file landingpage.html. File ini mandiri (stand-alone), artinya semua CSS dan Script sudah tertanam. Anda tinggal upload ke hosting atau kirim ke klien.
Fitur Restore (Auto-Save)
Jika browser tertutup tidak sengaja, buka kembali NBE. Akan muncul tombol "Lanjutkan Edit" di halaman depan. Jangan di-Clear Cache!
🔧 Troubleshooting
AI Error / Gagal Generate
Ini biasanya terjadi karena server AI Google sedang sibuk (Overload). Solusi:
Tunggu 5-10 detik.
Refresh halaman (F5).
Coba klik Generate lagi (biasanya berhasil di percobaan kedua).
Gambar Tidak Muncul di Preview
Pastikan link gambar berakhiran ekstensi file gambar (.jpg, .png, .webp). Link dari Google Drive atau Dropbox seringkali diproteksi. Gunakan ImgBB atau PostImages.
Kenapa Teks Bahasa Inggris?
Sangat jarang terjadi, tapi terkadang AI "lupa" instruksi bahasa. Solusinya mudah: Klik Generate ulang. AI akan memperbaiki dirinya sendiri.
{"page":{"_id":"69843ecf5b906fa0819075fc","title":"Tutorial NBE Magnetic","sections":{"byId":{"6172":{"_id":"6172","key":"section","name":"Section 1","attributes":{"style":{"position":"initial","marginTop":"0px","paddingTop":"0px","paddingBottom":"0px","paddingLeft":"0px","paddingRight":"0px","width":"100%","alignSelf":"center","backgroundImage":"","backgroundColor":"#FFFFFFFF","color":"#000000FF","desktop":{"paddingTop":"0px","paddingBottom":"0px"},"tablet":{"paddingTop":"0px","paddingBottom":"0px","marginTop":"0px"},"mobile":{"paddingTop":"0px","paddingBottom":"0px","marginTop":"0px"}},"width":"xl","background":true,"backgroundImageStyle":"None","backgroundVideo":false,"backgroundVideoUrl":"","shadowOverride":false,"borderOverride":false,"cornerOverride":false,"border":false,"corner":false,"shadow":false,"className":""},"components":{"byId":{"hQFe":{"_id":"hQFe","key":"other-html","name":"HTML","attributes":{"htmlstring":"<!DOCTYPE html>\n<html lang=\"id\" class=\"scroll-smooth\" style=\"background-color: #ffffff;\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Dokumentasi Lengkap - No Bullshit Engine</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js\"></script>\n <style>\n /* CSS Manual: Cadangan jika Tailwind Gagal Load */\n html, body {\n background-color: #ffffff !important; /* Paksa Putih */\n color: #0f172a !important; /* Paksa Hitam (Slate 900) */\n min-height: 100vh;\n margin: 0;\n font-family: 'Inter', sans-serif;\n }\n\n .mono { font-family: 'JetBrains Mono', monospace; }\n \n /* Custom Scrollbar Light */\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n ::-webkit-scrollbar-track { background: #f1f5f9; }\n ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }\n ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n\n /* Typography & Components */\n h1, h2, h3, h4 { letter-spacing: -0.025em; color: #020617; } /* Heading Hitam Pekat */\n p, li { color: #334155; line-height: 1.6; } /* Body Text Gelap Jelas */\n \n .doc-section { scroll-margin-top: 100px; margin-bottom: 4rem; position: relative; }\n .doc-section::after { content: ''; position: absolute; bottom: -2rem; left: 0; width: 100%; height: 1px; background: #e2e8f0; }\n .doc-section:last-child::after { display: none; }\n \n /* Code Block tetap gelap agar kontras */\n .code-block { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; color: #f8fafc; overflow-x: auto; margin: 1rem 0; }\n \n /* Alerts */\n .key-concept { background: #fef2f2; border-left: 3px solid #dc2626; padding: 1.5rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.5rem 0; border: 1px solid #fecaca; border-left-width: 4px; }\n .pro-tip { background: #ecfdf5; border-left: 3px solid #10b981; padding: 1.5rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.5rem 0; border: 1px solid #a7f3d0; border-left-width: 4px; }\n \n /* Sidebar Active State Light */\n .nav-link.active { color: #dc2626 !important; border-left-color: #dc2626 !important; background: #fef2f2; font-weight: 600; }\n </style>\n</head>\n<body class=\"bg-white text-slate-900 antialiased selection:bg-red-100 selection:text-red-900\" style=\"background-color: #ffffff; color: #0f172a;\">\n\n <!-- TOP NAVIGATION -->\n <nav class=\"fixed top-0 w-full bg-white/90 backdrop-blur-md border-b border-slate-200 z-50 h-16 flex items-center justify-between px-4 lg:px-8 shadow-sm\">\n <div class=\"flex items-center gap-3\">\n <div class=\"bg-gradient-to-br from-red-600 to-red-800 text-white font-black p-1 px-2 text-sm rounded transform -skew-x-6 shadow-lg shadow-red-900/30\">NBE</div>\n <span class=\"font-bold text-slate-900 tracking-tight hidden sm:inline\">Docs Center</span>\n <span class=\"text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full border border-slate-200 font-bold\">v14.9.9</span>\n </div>\n <div class=\"flex items-center gap-4\">\n <a href=\"https://lp.nobullshitengine.my.id/vip2-access-x99-secure-entry-point-774823-no-bullshit-engine-pro-v10-unlock-boost-boost?upsert=true\" class=\"text-xs font-bold bg-red-600 hover:bg-red-500 text-white px-4 py-2 rounded-lg transition flex items-center gap-2 group shadow-md hover:shadow-lg\">\n <i class=\"fa-solid fa-arrow-left group-hover:-translate-x-1 transition-transform\"></i>\n Kembali ke App\n </a>\n </div>\n </nav>\n\n <div class=\"max-w-screen-2xl mx-auto pt-24 pb-12 px-4 lg:px-8 flex flex-col lg:flex-row gap-10\">\n \n <!-- SIDEBAR NAVIGATION (Desktop) -->\n <aside class=\"hidden lg:block w-64 shrink-0 fixed h-[calc(100vh-6rem)] top-24 overflow-y-auto pb-10 pr-2 custom-scrollbar\">\n <div class=\"space-y-8\">\n <div>\n <h5 class=\"text-xs font-bold text-slate-500 uppercase tracking-widest mb-3\">Mulai Disini</h5>\n <ul class=\"space-y-1 border-l border-slate-200\">\n <li><a href=\"#intro\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Pengenalan</a></li>\n <li><a href=\"#quick-start\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Quick Start</a></li>\n </ul>\n </div>\n \n <div>\n <h5 class=\"text-xs font-bold text-slate-500 uppercase tracking-widest mb-3\">Panduan Generate</h5>\n <ul class=\"space-y-1 border-l border-slate-200\">\n <li><a href=\"#niche-angle\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Niche & Angle (Lengkap)</a></li>\n <li><a href=\"#product-input\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Input Produk</a></li>\n </ul>\n </div>\n\n <div>\n <h5 class=\"text-xs font-bold text-slate-500 uppercase tracking-widest mb-3\">Fitur Editor</h5>\n <ul class=\"space-y-1 border-l border-slate-200\">\n <li><a href=\"#branding\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Branding & Style</a></li>\n <li><a href=\"#images\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Upload Gambar</a></li>\n <li><a href=\"#structure\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Struktur Landing Page</a></li>\n </ul>\n </div>\n\n <div>\n <h5 class=\"text-xs font-bold text-slate-500 uppercase tracking-widest mb-3\">Fitur Pro</h5>\n <ul class=\"space-y-1 border-l border-slate-200\">\n <li><a href=\"#ads-kit\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Ads Kit (Iklan)</a></li>\n <li><a href=\"#psychology\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Psikologi Marketing</a></li>\n <li><a href=\"#whatsapp\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">WA Link Generator</a></li>\n </ul>\n </div>\n\n <div>\n <h5 class=\"text-xs font-bold text-slate-500 uppercase tracking-widest mb-3\">Export & Help</h5>\n <ul class=\"space-y-1 border-l border-slate-200\">\n <li><a href=\"#export\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Simpan & Download</a></li>\n <li><a href=\"#troubleshooting\" class=\"nav-link block pl-4 py-1.5 text-sm text-slate-600 hover:text-red-600 hover:border-slate-300 border-l border-transparent transition\">Troubleshooting</a></li>\n </ul>\n </div>\n </div>\n </aside>\n\n <!-- MAIN CONTENT AREA -->\n <main class=\"flex-1 min-w-0 lg:pl-72\">\n \n <!-- Intro -->\n <section id=\"intro\" class=\"doc-section\">\n <div class=\"mb-6\">\n <span class=\"text-red-600 font-bold tracking-wider text-xs uppercase mb-2 block\">Overview</span>\n <h1 class=\"text-4xl lg:text-5xl font-black text-slate-900 mb-4\">No Bullshit Engine <span class=\"text-lg font-normal text-slate-500 ml-2\">v14.9.9</span></h1>\n <p class=\"text-lg text-slate-600 leading-relaxed max-w-3xl\">\n Tools generator Landing Page berbasis AI yang dirancang khusus untuk marketer \"Direct Response\". NBE tidak hanya membuat layout, tapi menulis <strong>Sales Copy yang menghipnotis</strong> berdasarkan struktur psikologi manusia (Reptilian Brain).\n </p>\n <p class=\"mt-4 text-slate-600\">\n Lupakan \"Writer's Block\". Dengan NBE, Anda bisa membuat Landing Page konversi tinggi untuk produk apa saja (Herbal, Digital, Jasa, Fashion) dalam waktu < 60 detik.\n </p>\n </div>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mt-8\">\n <div class=\"bg-white border border-slate-200 p-5 rounded-xl transition hover:border-red-300 hover:shadow-md shadow-sm\">\n <i class=\"fa-solid fa-bolt text-yellow-500 text-xl mb-3\"></i>\n <h3 class=\"font-bold text-slate-900 mb-2\">Instant Copy</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">AI menulis ribuan kata copywriting lengkap (Headline s/d FAQ) dalam 10 detik, disesuaikan dengan niche Anda.</p>\n </div>\n <div class=\"bg-white border border-slate-200 p-5 rounded-xl transition hover:border-red-300 hover:shadow-md shadow-sm\">\n <i class=\"fa-solid fa-brain text-red-500 text-xl mb-3\"></i>\n <h3 class=\"font-bold text-slate-900 mb-2\">Reptilian Brain</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">Copywriting menargetkan insting dasar manusia: Rasa Takut (Fear), Keserakahan (Greed), dan Ego.</p>\n </div>\n <div class=\"bg-white border border-slate-200 p-5 rounded-xl transition hover:border-red-300 hover:shadow-md shadow-sm\">\n <i class=\"fa-solid fa-code text-blue-500 text-xl mb-3\"></i>\n <h3 class=\"font-bold text-slate-900 mb-2\">Clean Code</h3>\n <p class=\"text-sm text-slate-600 leading-relaxed\">HTML murni + Tailwind CSS. Tanpa database, ringan, loading cepat, dan siap di-upload ke mana saja.</p>\n </div>\n </div>\n </section>\n\n <!-- Quick Start -->\n <section id=\"quick-start\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-6\">⚡ Quick Start</h2>\n <div class=\"space-y-4\">\n <div class=\"flex gap-4 p-5 bg-white rounded-xl border border-slate-200 hover:border-red-300 shadow-sm transition\">\n <div class=\"w-10 h-10 rounded-full bg-red-600 flex items-center justify-center font-bold text-white shrink-0 shadow-md\">1</div>\n <div>\n <h4 class=\"font-bold text-slate-900 text-lg\">Pilih Niche & Angle</h4>\n <p class=\"text-sm text-slate-600 mt-1\">Pilih kategori produk dan gaya bahasa (misal: \"Brutal Truth\" untuk obat keras, atau \"Magnetic Story\" untuk herbal).</p>\n </div>\n </div>\n <div class=\"flex gap-4 p-5 bg-white rounded-xl border border-slate-200 hover:border-red-300 shadow-sm transition\">\n <div class=\"w-10 h-10 rounded-full bg-red-600 flex items-center justify-center font-bold text-white shrink-0 shadow-md\">2</div>\n <div>\n <h4 class=\"font-bold text-slate-900 text-lg\">Input Detail Produk</h4>\n <p class=\"text-sm text-slate-600 mt-1\">Masukkan nama produk dan deskripsi singkat (apa masalahnya, apa solusinya). Semakin spesifik, semakin bagus.</p>\n </div>\n </div>\n <div class=\"flex gap-4 p-5 bg-white rounded-xl border border-slate-200 hover:border-red-300 shadow-sm transition\">\n <div class=\"w-10 h-10 rounded-full bg-red-600 flex items-center justify-center font-bold text-white shrink-0 shadow-md\">3</div>\n <div>\n <h4 class=\"font-bold text-slate-900 text-lg\">Generate & Edit</h4>\n <p class=\"text-sm text-slate-600 mt-1\">Klik Generate. Tunggu AI bekerja. Setelah selesai, masuk ke Editor Mode untuk mengubah teks, upload gambar, dan atur warna.</p>\n </div>\n </div>\n <div class=\"flex gap-4 p-5 bg-white rounded-xl border border-slate-200 hover:border-red-300 shadow-sm transition\">\n <div class=\"w-10 h-10 rounded-full bg-red-600 flex items-center justify-center font-bold text-white shrink-0 shadow-md\">4</div>\n <div>\n <h4 class=\"font-bold text-slate-900 text-lg\">Download HTML</h4>\n <p class=\"text-sm text-slate-600 mt-1\">Download file `.html` dan upload ke hosting Anda (public_html) atau gunakan langsung.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Niche & Angle -->\n <section id=\"niche-angle\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-6\">🎯 Memahami \"Marketing Angle\"</h2>\n <p class=\"mb-4 text-slate-600\">Salah satu fitur terkuat NBE adalah kemampuan mengubah <em>Tone of Voice</em>. Memilih angle yang salah bisa membuat konversi rendah. Berikut panduan lengkapnya:</p>\n \n <div class=\"overflow-x-auto rounded-xl border border-slate-200 shadow-sm\">\n <table class=\"w-full text-left text-sm text-slate-600 border-collapse bg-white\">\n <thead class=\"text-xs text-slate-500 uppercase bg-slate-50 border-b border-slate-200\">\n <tr>\n <th class=\"px-5 py-4 font-bold text-slate-800\">Angle Name</th>\n <th class=\"px-5 py-4 font-bold text-slate-800\">Karakteristik & Psikologi</th>\n <th class=\"px-5 py-4 font-bold text-slate-800\">Contoh Headline</th>\n <th class=\"px-5 py-4 font-bold text-slate-800\">Cocok Untuk</th>\n </tr>\n </thead>\n <tbody class=\"divide-y divide-slate-200\">\n <tr class=\"hover:bg-slate-50\">\n <td class=\"px-5 py-4 font-bold text-blue-600\">Magnetic Storytelling</td>\n <td class=\"px-5 py-4\">Empatik, bercerita \"From Zero to Hero\", menyentuh hati. Menggunakan \"Jebakan Cerita\" agar orang betah membaca.</td>\n <td class=\"px-5 py-4 italic text-slate-800\">\"Dulu Saya Malu Keluar Rumah Karena Jerawat, Sampai Saya Menemukan...\"</td>\n <td class=\"px-5 py-4\">Herbal, Jasa, Edukasi, Affiliate.</td>\n </tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"px-5 py-4 font-bold text-red-600\">Brutal Truth</td>\n <td class=\"px-5 py-4\">Menampar fakta, keras, jujur, \"No Bullshit\". Menyerang rasa denial (penyangkalan) pembaca.</td>\n <td class=\"px-5 py-4 italic text-slate-800\">\"Berhenti Membuang Uang untuk Skincare Mahal yang Tidak Ada Hasilnya!\"</td>\n <td class=\"px-5 py-4\">Obat Keras, Solusi Vitalitas, Masalah Memalukan.</td>\n </tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"px-5 py-4 font-bold text-yellow-600\">Fear & Scarcity</td>\n <td class=\"px-5 py-4\">Fokus kerugian jika menunda (FOMO), menakut-nakuti dengan konsekuensi buruk.</td>\n <td class=\"px-5 py-4 italic text-slate-800\">\"AWAS! Jangan Abaikan Nyeri Dada Ringan, Sebelum Menjadi Serangan Jantung!\"</td>\n <td class=\"px-5 py-4\">Kesehatan Akut, Keamanan (CCTV), Flash Sale.</td>\n </tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"px-5 py-4 font-bold text-green-600\">Benefit Heavy</td>\n <td class=\"px-5 py-4\">Fokus pada keuntungan (Gain), kesenangan, status sosial, dan hasil instan.</td>\n <td class=\"px-5 py-4 italic text-slate-800\">\"Tampil Lebih Percaya Diri dengan Kulit Glowing dalam 7 Hari!\"</td>\n <td class=\"px-5 py-4\">Gadget, Fashion, Lifestyle, Kecantikan.</td>\n </tr>\n <tr class=\"hover:bg-slate-50\">\n <td class=\"px-5 py-4 font-bold text-purple-600\">Logical Proof</td>\n <td class=\"px-5 py-4\">Data driven, statistik, jurnal ilmiah, \"masuk akal\". Meyakinkan otak logis.</td>\n <td class=\"px-5 py-4 italic text-slate-800\">\"Terbukti Secara Klinis: Kandungan X Efektif Mengurangi Y sebesar 80%.\"</td>\n <td class=\"px-5 py-4\">Suplemen Medis, Software (SaaS), Investasi.</td>\n </tr>\n </tbody>\n </table>\n </div>\n </section>\n\n <!-- Product Input -->\n <section id=\"product-input\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-4\">📝 Tips Input Produk (Prompting)</h2>\n <p class=\"mb-4 text-slate-600\">Kualitas output AI bergantung pada input Anda (\"Garbage In, Garbage Out\"). Semakin detail konteks yang Anda berikan, semakin tajam copy yang dihasilkan.</p>\n <div class=\"key-concept\">\n <h4 class=\"font-bold text-red-700 mb-2\">Formula Input Deskripsi yang Bagus:</h4>\n <p class=\"text-slate-800 italic\">\"Produk ini adalah [NAMA], solusi untuk [MASALAH SPESIFIK]. Menggunakan bahan/teknologi [FITUR UTAMA]. Hasilnya membuat user bisa [HASIL AKHIR/TRANSFORMASI]. Target pasarnya adalah [SIAPA].\"</p>\n </div>\n <div class=\"grid md:grid-cols-2 gap-6 mt-6\">\n <div class=\"p-5 bg-red-50 border border-red-200 rounded-xl\">\n <span class=\"text-red-600 font-bold text-xs uppercase block mb-2\"><i class=\"fa-solid fa-times-circle mr-1\"></i> Input Buruk</span>\n <p class=\"text-sm text-slate-700\">\"Madu hutan asli. Murah. Beli sekarang.\"</p>\n <p class=\"text-xs text-red-500 mt-2 font-semibold\">Masalah: Terlalu umum, AI akan bingung mau menonjolkan apa.</p>\n </div>\n <div class=\"p-5 bg-green-50 border border-green-200 rounded-xl\">\n <span class=\"text-green-600 font-bold text-xs uppercase block mb-2\"><i class=\"fa-solid fa-check-circle mr-1\"></i> Input Bagus</span>\n <p class=\"text-sm text-slate-700\">\"Madu Zestmag, solusi nyeri lambung dan GERD kronis. Menggunakan 100% madu hutan + ekstrak kunyit. Bisa makan pedas lagi tanpa rasa perih dalam 7 hari. Untuk pekerja kantoran stress yang sering telat makan.\"</p>\n <p class=\"text-xs text-green-600 mt-2 font-semibold\">Hasil: AI akan fokus ke \"Makan Pedas\", \"GERD\", dan \"Pekerja Kantoran\".</p>\n </div>\n </div>\n </section>\n\n <!-- Editor Features -->\n <section id=\"branding\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-4\">🎨 Editor & Styling</h2>\n <p class=\"mb-4 text-slate-600\">Di panel editor, Anda bisa mengubah tampilan secara realtime tanpa coding.</p>\n \n <h3 class=\"text-lg font-bold text-slate-900 mt-8 mb-3\">1. Brand Color</h3>\n <p class=\"mb-4 text-slate-600\">Klik kotak warna di bagian atas editor. Warna ini akan mengubah:</p>\n <ul class=\"grid grid-cols-2 gap-2 text-sm text-slate-600 mb-6\">\n <li class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-red-500 rounded-full border border-slate-200\"></div> Warna Tombol (CTA)</li>\n <li class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-red-500 rounded-full border border-slate-200\"></div> Warna Highlight Harga</li>\n <li class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-red-500 rounded-full border border-slate-200\"></div> Warna Border & Aksen</li>\n <li class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-red-500 rounded-full border border-slate-200\"></div> Warna Sticky Button Mobile</li>\n </ul>\n\n <h3 class=\"text-lg font-bold text-slate-900 mt-8 mb-3\">2. Style Template</h3>\n <p class=\"mb-4 text-slate-600\">Pilih \"Style\" di dropdown sebelah warna untuk mengubah nuansa:</p>\n <div class=\"grid md:grid-cols-3 gap-4\">\n <div class=\"bg-white p-4 rounded border border-slate-200 shadow-sm\">\n <strong class=\"text-slate-900 block mb-1\">Brutal (Default)</strong>\n <p class=\"text-xs text-slate-500\">Font tebal (Inter), warna kontras merah/hitam. Agresif. Cocok untuk produk pria/solusi keras.</p>\n </div>\n <div class=\"bg-white p-4 rounded border border-slate-200 shadow-sm\">\n <strong class=\"text-slate-900 block mb-1\">Modern Clean</strong>\n <p class=\"text-xs text-slate-500\">Putih bersih, shadow halus, warna biru/ungu. Profesional. Cocok untuk jasa/digital.</p>\n </div>\n <div class=\"bg-white p-4 rounded border border-slate-200 shadow-sm\">\n <strong class=\"text-slate-900 block mb-1\">Luxury</strong>\n <p class=\"text-xs text-slate-500\">Gelap, emas, font serif (Merriweather). Elegan. Cocok untuk jam tangan/fashion mahal.</p>\n </div>\n </div>\n </section>\n\n <section id=\"images\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-4\">🖼️ Cara Upload Gambar</h2>\n <div class=\"pro-tip\">\n <h4 class=\"font-bold text-green-700 mb-2\">Konsep \"Static Generator\"</h4>\n <p class=\"text-sm text-slate-700\">\n NBE tidak memiliki database server. Ini demi keamanan dan kecepatan Anda (File HTML jadi milik Anda 100%). Oleh karena itu, gambar harus di-hosting di tempat lain.\n </p>\n </div>\n <p class=\"mb-6 text-slate-600\">Anda harus menggunakan <strong>URL Gambar</strong> (Link) yang berakhiran ekstensi gambar. Berikut cara termudah:</p>\n \n <div class=\"space-y-4\">\n <div class=\"flex gap-4\">\n <div class=\"w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 shrink-0 border border-slate-300\">1</div>\n <div>\n <h5 class=\"text-slate-900 font-bold\">Siapkan Foto</h5>\n <p class=\"text-sm text-slate-600\">Pastikan foto produk jelas, pencahayaan bagus, dan ukuran tidak terlalu besar (rekomendasi: di bawah 500KB agar loading cepat).</p>\n </div>\n </div>\n <div class=\"flex gap-4\">\n <div class=\"w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 shrink-0 border border-slate-300\">2</div>\n <div>\n <h5 class=\"text-slate-900 font-bold\">Upload ke Hosting Gambar</h5>\n <p class=\"text-sm text-slate-600 mb-2\">Gunakan layanan gratis yang stabil:</p>\n <ul class=\"text-sm text-blue-600 space-y-1\">\n <li><a href=\"https://imgbb.com\" target=\"_blank\" class=\"hover:underline flex items-center gap-2\"><i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"></i> ImgBB (Paling Mudah)</a></li>\n <li><a href=\"https://postimages.org\" target=\"_blank\" class=\"hover:underline flex items-center gap-2\"><i class=\"fa-solid fa-arrow-up-right-from-square text-xs\"></i> PostImages</a></li>\n </ul>\n </div>\n </div>\n <div class=\"flex gap-4\">\n <div class=\"w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 shrink-0 border border-slate-300\">3</div>\n <div>\n <h5 class=\"text-slate-900 font-bold\">Copy Direct Link</h5>\n <p class=\"text-sm text-slate-600\">Setelah upload, cari tombol <strong>\"Copy Direct Link\"</strong> atau klik kanan pada gambar -> \"Copy Image Address\". <br><span class=\"text-red-500 text-xs font-semibold\">Wajib berakhiran .jpg / .png / .webp</span>.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Structure Breakdown -->\n <section id=\"structure\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-6\">🏗️ Anatomi Landing Page</h2>\n <p class=\"mb-6 text-slate-600\">NBE menyusun Landing Page dalam 8 Bagian Strategis (Framework AIDA + Social Proof):</p>\n \n <div class=\"space-y-6 border-l-2 border-slate-200 ml-3 pl-8 relative\">\n <div class=\"relative\">\n <div class=\"absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-red-600 border-4 border-white shadow-sm\"></div>\n <h4 class=\"font-bold text-slate-900 mb-1\">1. The Hook (Headline)</h4>\n <p class=\"text-sm text-slate-600\">Terdiri dari <strong>Top Warning</strong> (Scarcity) dan <strong>Headline</strong> utama. Tujuannya menghentikan scroll user dalam 3 detik pertama.</p>\n </div>\n <div class=\"relative\">\n <div class=\"absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-slate-400 border-4 border-white shadow-sm\"></div>\n <h4 class=\"font-bold text-slate-900 mb-1\">2. The Problem (Pain & Agitation)</h4>\n <p class=\"text-sm text-slate-600\">Bagian \"Story\" dan \"Masalah\". AI akan mengaduk-aduk emosi pembaca. Menggunakan teknik <em>\"Knife Twisting\"</em> (memperparah rasa sakit masalah agar mereka sadar butuh solusi).</p>\n </div>\n <div class=\"relative\">\n <div class=\"absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-slate-400 border-4 border-white shadow-sm\"></div>\n <h4 class=\"font-bold text-slate-900 mb-1\">3. The Solution (Bridge)</h4>\n <p class=\"text-sm text-slate-600\">Memperkenalkan produk Anda sebagai satu-satunya solusi yang masuk akal (\"The New Way\") setelah agitasi masalah.</p>\n </div>\n <div class=\"relative\">\n <div class=\"absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-slate-400 border-4 border-white shadow-sm\"></div>\n <h4 class=\"font-bold text-slate-900 mb-1\">4. The Proof (Social Proof)</h4>\n <p class=\"text-sm text-slate-600\">Testimoni, foto bukti chat, galeri pengiriman. Bagian ini mematikan skeptisme pembaca (\"Ah, tipu-tipu nih\").</p>\n </div>\n <div class=\"relative\">\n <div class=\"absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-slate-400 border-4 border-white shadow-sm\"></div>\n <h4 class=\"font-bold text-slate-900 mb-1\">5. The Offer (Grand Offer)</h4>\n <p class=\"text-sm text-slate-600\">Bagian harga, bonus, dan coret harga. Disusun untuk membuat harga terlihat \"No Brainer\" (sangat murah dibanding value yang didapat).</p>\n </div>\n <div class=\"relative\">\n <div class=\"absolute -left-[41px] top-0 w-6 h-6 rounded-full bg-slate-400 border-4 border-white shadow-sm\"></div>\n <h4 class=\"font-bold text-slate-900 mb-1\">6. The Logic & Urgency</h4>\n <p class=\"text-sm text-slate-600\">Push/Pull Logic (Perbandingan Harga) dan Urgency (Kerugian menunda). Memaksa otak logis dan reptil untuk segera bertindak.</p>\n </div>\n </div>\n </section>\n\n <!-- Ads Kit -->\n <section id=\"ads-kit\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-4\">🎁 Fitur: Ads Kit</h2>\n <p class=\"mb-4 text-slate-600\">NBE tidak hanya membuat LP, tapi juga materi promosi. Lihat bagian paling atas Editor, ada menu accordion bernama <strong>\"5x Ads Kit\"</strong>.</p>\n <div class=\"bg-slate-50 p-6 rounded-xl border border-slate-200\">\n <ul class=\"space-y-6\">\n <li class=\"flex gap-4\">\n <div class=\"w-10 h-10 rounded bg-yellow-100 text-yellow-600 flex items-center justify-center text-xl shrink-0 border border-yellow-200\"><i class=\"fa-solid fa-heading\"></i></div>\n <div>\n <strong class=\"text-slate-900 block mb-1\">5 Variasi Headline</strong>\n <p class=\"text-sm text-slate-600\">Gunakan ini untuk A/B Testing judul di Landing Page atau Thumbnail Iklan. Jika satu headline boncos, ganti dengan variasi lain.</p>\n </div>\n </li>\n <li class=\"flex gap-4\">\n <div class=\"w-10 h-10 rounded bg-cyan-100 text-cyan-600 flex items-center justify-center text-xl shrink-0 border border-cyan-200\"><i class=\"fa-solid fa-paragraph\"></i></div>\n <div>\n <strong class=\"text-slate-900 block mb-1\">5 Copywriting Iklan (Caption)</strong>\n <p class=\"text-sm text-slate-600\">Teks siap pakai untuk caption Facebook Ads, Instagram, atau Script TikTok. Sudah termasuk Hook di awal dan CTA di akhir.</p>\n </div>\n </li>\n <li class=\"flex gap-4\">\n <div class=\"w-10 h-10 rounded bg-green-100 text-green-600 flex items-center justify-center text-xl shrink-0 border border-green-200\"><i class=\"fa-solid fa-image\"></i></div>\n <div>\n <strong class=\"text-slate-900 block mb-1\">5 Prompt AI Image</strong>\n <p class=\"text-sm text-slate-600 mb-2\">Teks prompt bahasa Inggris untuk dimasukkan ke tools AI Image Generator. Cara pakainya:</p>\n <div class=\"text-xs bg-slate-800 p-2 rounded text-slate-200 font-mono\">\n Copy prompt -> Buka <a href=\"https://www.bing.com/images/create\" target=\"_blank\" class=\"text-blue-300 underline\">Bing Image Creator</a> atau Midjourney -> Paste.\n </div>\n </div>\n </li>\n </ul>\n </div>\n </section>\n\n <!-- Marketing Psychology -->\n <section id=\"psychology\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-4\">🧠 Fitur Rahasia: Push/Pull & Urgency</h2>\n <p class=\"mb-4 text-slate-600\">Terletak di bagian bawah editor (Section 6), ini adalah \"senjata rahasia\" NBE untuk meningkatkan konversi (CVR).</p>\n \n <div class=\"grid md:grid-cols-2 gap-6 mt-6\">\n <div class=\"bg-blue-50 border border-blue-100 p-6 rounded-xl hover:shadow-md transition\">\n <h4 class=\"font-bold text-blue-700 mb-3 text-lg\">Push & Pull (Logic Stack)</h4>\n <p class=\"text-sm text-slate-600 mb-4\">Teknik membandingkan harga dengan value (Framing). Tujuannya membuat harga produk terlihat sangat murah.</p>\n <div class=\"p-3 bg-white rounded text-xs text-slate-600 italic border-l-4 border-blue-500 shadow-sm\">\n \"Mahal? Coba bandingkan Rp 99rb ini dengan biaya operasi yang jutaan. Atau biaya bolak-balik RS. Masih terasa mahal?\"\n </div>\n </div>\n <div class=\"bg-red-50 border border-red-100 p-6 rounded-xl hover:shadow-md transition\">\n <h4 class=\"font-bold text-red-700 mb-3 text-lg\">Urgency (Loss Aversion)</h4>\n <p class=\"text-sm text-slate-600 mb-4\">Psikologi: Manusia lebih takut kehilangan (rugi) daripada ingin mendapatkan (untung).</p>\n <div class=\"p-3 bg-white rounded text-xs text-slate-600 italic border-l-4 border-red-500 shadow-sm\">\n \"Jika Anda menutup halaman ini, diskon hangus. Anda akan dipaksa membayar harga normal 2x lipat besok. Jangan biarkan orang lain mengambil slot Anda.\"\n </div>\n </div>\n </div>\n </section>\n\n <!-- Export -->\n <section id=\"export\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-4\">💾 Simpan & Download</h2>\n \n <div class=\"flex flex-col gap-4\">\n <div class=\"bg-white p-5 rounded-xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"text-green-600 text-xl mt-1\"><i class=\"fa-solid fa-floppy-disk\"></i></div>\n <div>\n <h4 class=\"font-bold text-slate-900 mb-1\">Tombol \"Simpan & Preview\"</h4>\n <p class=\"text-sm text-slate-600\">Wajib diklik setiap kali Anda selesai mengedit teks. Ini akan menyimpan data ke memori browser (Local Storage) dan memperbarui tampilan kanan (Preview).</p>\n </div>\n </div>\n \n <div class=\"bg-white p-5 rounded-xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"text-blue-600 text-xl mt-1\"><i class=\"fa-solid fa-download\"></i></div>\n <div>\n <h4 class=\"font-bold text-slate-900 mb-1\">Tombol Download</h4>\n <p class=\"text-sm text-slate-600\">Menghasilkan file <code>landingpage.html</code>. File ini mandiri (stand-alone), artinya semua CSS dan Script sudah tertanam. Anda tinggal upload ke hosting atau kirim ke klien.</p>\n </div>\n </div>\n\n <div class=\"bg-white p-5 rounded-xl border border-slate-200 flex gap-4 items-start shadow-sm\">\n <div class=\"text-yellow-600 text-xl mt-1\"><i class=\"fa-solid fa-rotate-left\"></i></div>\n <div>\n <h4 class=\"font-bold text-slate-900 mb-1\">Fitur Restore (Auto-Save)</h4>\n <p class=\"text-sm text-slate-600\">Jika browser tertutup tidak sengaja, buka kembali NBE. Akan muncul tombol <strong>\"Lanjutkan Edit\"</strong> di halaman depan. Jangan di-Clear Cache!</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Troubleshooting -->\n <section id=\"troubleshooting\" class=\"doc-section\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-4\">🔧 Troubleshooting</h2>\n \n <div class=\"space-y-4\">\n <details class=\"group bg-white border border-slate-200 rounded-lg open:border-red-400 transition shadow-sm\">\n <summary class=\"flex justify-between items-center p-4 font-medium cursor-pointer text-slate-900 hover:bg-slate-50\">\n <span>AI Error / Gagal Generate</span>\n <i class=\"fa-solid fa-chevron-down text-slate-400 group-open:rotate-180 transition\"></i>\n </summary>\n <div class=\"p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2 leading-relaxed\">\n Ini biasanya terjadi karena server AI Google sedang sibuk (Overload). Solusi:\n <ul class=\"list-disc ml-5 mt-2\">\n <li>Tunggu 5-10 detik.</li>\n <li>Refresh halaman (F5).</li>\n <li>Coba klik Generate lagi (biasanya berhasil di percobaan kedua).</li>\n </ul>\n </div>\n </details>\n\n <details class=\"group bg-white border border-slate-200 rounded-lg open:border-red-400 transition shadow-sm\">\n <summary class=\"flex justify-between items-center p-4 font-medium cursor-pointer text-slate-900 hover:bg-slate-50\">\n <span>Gambar Tidak Muncul di Preview</span>\n <i class=\"fa-solid fa-chevron-down text-slate-400 group-open:rotate-180 transition\"></i>\n </summary>\n <div class=\"p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2 leading-relaxed\">\n Pastikan link gambar berakhiran ekstensi file gambar (<code>.jpg</code>, <code>.png</code>, <code>.webp</code>). Link dari Google Drive atau Dropbox seringkali diproteksi. Gunakan ImgBB atau PostImages.\n </div>\n </details>\n\n <details class=\"group bg-white border border-slate-200 rounded-lg open:border-red-400 transition shadow-sm\">\n <summary class=\"flex justify-between items-center p-4 font-medium cursor-pointer text-slate-900 hover:bg-slate-50\">\n <span>Kenapa Teks Bahasa Inggris?</span>\n <i class=\"fa-solid fa-chevron-down text-slate-400 group-open:rotate-180 transition\"></i>\n </summary>\n <div class=\"p-4 pt-0 text-sm text-slate-600 border-t border-slate-100 mt-2 leading-relaxed\">\n Sangat jarang terjadi, tapi terkadang AI \"lupa\" instruksi bahasa. Solusinya mudah: Klik Generate ulang. AI akan memperbaiki dirinya sendiri.\n </div>\n </details>\n </div>\n </section>\n\n </main>\n </div>\n\n <!-- Scroll Spy Script -->\n <script>\n // Smooth scrolling for sidebar links\n document.querySelectorAll('a.nav-link').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Active state on scroll\n const sections = document.querySelectorAll('.doc-section');\n const navLinks = document.querySelectorAll('.nav-link');\n\n window.addEventListener('scroll', () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= (sectionTop - 250)) {\n current = section.getAttribute('id');\n }\n });\n\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active');\n }\n });\n });\n </script>\n</body>\n</html>","portalselector":"html-head","inhead":false,"overrideStyle":{"shadow":{"default":{}}},"dynamicStyleKey":[],"dirty":null},"components":{"byId":{},"allIds":[]}}},"allIds":["hQFe"]}}},"allIds":["6172"]},"slug":"tutorial-nbe-magnetic","canvas":"0","state":"publish","userUuid":"69740f4bde2126df5ae83752","publishSlug":"tutorial-nbe-magnetic","slugName":"nbengine","isOriginal":true,"isABTesting":false,"autoSave":false,"index":false,"settings":{"boost":true,"formulirBoost":false},"permalink":"https://nbengine.buat.page/tutorial-nbe-magnetic","pageContentId":"69843ecf5b906fa0819075fe"},"pixel":{"_id":"697413384c9e3f0cd2f84a5c","pixel":{"tiktok":{"autoPageView":false,"byId":{},"allIds":[]},"facebook":{"autoPageView":false,"byId":{"tCT3":{"id":"1686607428984901","name":"No Bullshit Engine","_id":"tCT3"}},"allIds":["tCT3"]},"snackvideo":{"autoPageView":false,"byId":{},"allIds":[]},"googletagmanager":{"autoPageView":false,"byId":{},"allIds":[]},"_id":"6974133848bfe9d30d5167d4"}}}