# Nago — Website Code Template > Contoh code untuk pertanyaan + integration n8n --- ## 📁 Struktur File ``` nago-website/ ├── index.html # Landing page ├── questions.html # Form 10 pertanyaan ├── result.html # Tampilkan hasil ├── style.css # Styling └── script.js # Logic + n8n integration ``` --- ## 1. Landing Page (index.html) ```html Nago Tejena — Temukan Bagian Terbaik dari Dirimu

NAGO

Temukan Bagian Terbaik dari Dirimu

Mungkin kamu sudah lama mencari jawaban.
Atau mungkin kamu bahkan tidak tahu
pertanyaan apa yang harus diajukan.

10 pertanyaan. Satu jam waktu.
Satu insight yang mungkin mengubah segalanya.

→ Mulai Perjalanan Ini

TENTANG NAGO TEJENA

Psikolog. Penulis. Pemilik suara yang membantu ribuan orang menemukan kembali bagian terbaik dari diri mereka.

"Aku yang Telah Lama Hilang" — bukunya yang telah menyentuh hati banyak pembaca.

📖 Lihat Buku →

``` --- ## 2. Questions Page (questions.html) ```html 10 Pertanyaan — Nago Tejena

NAGO

Progress: 1/10

Q1 of 10

Dalam 2 minggu terakhir, apa satu momen yang membuatmu merasa benar-benar hidup?

Q2 of 10

Apa mimpi terbesarmu dalam hidup ini?

Q3 of 10

Sebutkan satu pengalaman hidupmu yang paling membentuk siapa dirimu sekarang!

Q4 of 10

Hal apa yang biasanya selalu kamu lakukan, bahkan ketika tidak ada orang yang memintamu untuk melakukannya?

Q5 of 10

Kapan terakhir kali kamu merasa paling jujur dengan dirimu sendiri? Apa yang terjadi saat itu?

Q6 of 10

Nilai atau prinsip apa yang akan selalu kamu pegang, bahkan jika itu membuatmu tidak disukai orang lain?

Q7 of 10

Apa ketakutan terbesarmu dalam hidup?

Q8 of 10

Bayangkan 5 tahun dari sekarang kamu telah mencapai versi terbaik dari dirimu, seperti apa kesehariannya?

Q9 of 10

Sebutkan satu aktivitas yang membuatmu paling merasa "ini bukan dirimu yang sebenarnya"! Berikan alasannya…

Q10 of 10

Jika hidupmu adalah sebuah buku, apa kalimat terakhir yang ingin kamu tulis di bagian penutup?

Nago sedang membaca
jawabanmu dengan penuh perhatian...

Ini mungkin memakan waktu sekitar 30 detik.

``` --- ## 3. Result Page (result.html) ```html Hasil Perjalananmu — Nago Tejena

NAGO

✨ Hasil Perjalananmu ✨

Ingin mendalami ini lebih jauh bersama Nago?

→ Book Sesi Personal 1-on-1

← Mulai dari Awal

``` --- ## 4. CSS (style.css) ```css /* ===== BASE STYLES ===== */ :root { --forest-green: #2D4A3E; --warm-cream: #F5F0E8; --soft-gold: #C4A962; --charcoal: #2C2C2C; --off-white: #FAFAF8; --light-gray: #E8E5E0; --medium-gray: #9A958D; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--warm-cream); color: var(--charcoal); line-height: 1.6; min-height: 100vh; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } /* ===== HEADER ===== */ header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .logo { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; color: var(--forest-green); letter-spacing: 2px; } .progress-text { font-size: 14px; color: var(--medium-gray); } /* ===== PROGRESS BAR ===== */ .progress-bar { width: 100%; height: 4px; background-color: var(--light-gray); border-radius: 2px; margin-bottom: 40px; overflow: hidden; } .progress-fill { height: 100%; background-color: var(--forest-green); width: 10%; transition: width 0.5s ease; } /* ===== HERO SECTION ===== */ .hero { text-align: center; padding: 60px 0; } .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 600; color: var(--forest-green); margin-bottom: 30px; line-height: 1.2; } .intro { font-size: 18px; color: var(--charcoal); margin-bottom: 20px; } .description { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-style: italic; color: var(--medium-gray); margin-bottom: 40px; } .cta-button { display: inline-block; background-color: var(--forest-green); color: var(--warm-cream); padding: 16px 40px; border-radius: 4px; text-decoration: none; font-size: 16px; transition: all 0.3s ease; } .cta-button:hover { background-color: var(--charcoal); transform: translateY(-2px); } /* ===== QUESTION SLIDES ===== */ .question-slide { display: none; animation: fadeIn 0.5s ease; } .question-slide.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .question-number { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--soft-gold); margin-bottom: 15px; } .question-text { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; color: var(--forest-green); margin-bottom: 30px; line-height: 1.4; } textarea { width: 100%; min-height: 150px; padding: 20px; border: 1px solid var(--light-gray); border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 16px; background-color: var(--off-white); resize: vertical; margin-bottom: 30px; } textarea:focus { outline: none; border-color: var(--forest-green); } .btn-next, .btn-submit { background-color: var(--forest-green); color: var(--warm-cream); border: none; padding: 16px 40px; border-radius: 4px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; } .btn-next:hover, .btn-submit:hover { background-color: var(--charcoal); } .btn-back { background: none; border: none; color: var(--medium-gray); font-size: 14px; cursor: pointer; margin-left: 20px; } .btn-back:hover { color: var(--charcoal); } /* ===== LOADING ===== */ .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--warm-cream); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 20px; } .loading-overlay.active { display: flex; } .loading-spinner { width: 50px; height: 50px; border: 3px solid var(--light-gray); border-top-color: var(--forest-green); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 30px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--forest-green); margin-bottom: 10px; } .loading-subtext { font-size: 14px; color: var(--medium-gray); } /* ===== RESULT ===== */ .result-title { font-family: 'Cormorant Garamond', serif; font-size: 32px; text-align: center; color: var(--forest-green); margin-bottom: 40px; } #result-content { background-color: var(--off-white); padding: 40px; border-radius: 8px; margin-bottom: 40px; } #result-content h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--forest-green); margin: 30px 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid var(--light-gray); } #result-content h2:first-child { margin-top: 0; } #result-content p { margin-bottom: 15px; line-height: 1.8; } #result-content ul { margin-left: 20px; margin-bottom: 15px; } #result-content li { margin-bottom: 8px; } /* ===== CTA SECTION ===== */ .cta-section { background-color: var(--forest-green); color: var(--warm-cream); padding: 40px; border-radius: 8px; text-align: center; margin-bottom: 30px; } .cta-section h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; margin-bottom: 20px; } .cta-section .cta-button { background-color: var(--warm-cream); color: var(--forest-green); } .cta-section .cta-button:hover { background-color: var(--soft-gold); } /* ===== SHARE ===== */ .share-section { text-align: center; margin-bottom: 40px; } .share-section p { font-size: 14px; color: var(--medium-gray); margin-bottom: 15px; } .share-buttons { display: flex; justify-content: center; gap: 15px; } .share-btn { padding: 10px 20px; border-radius: 4px; text-decoration: none; font-size: 14px; color: white; } .share-btn.twitter { background-color: #1DA1F2; } .share-btn.facebook { background-color: #4267B2; } .share-btn.whatsapp { background-color: #25D366; } .restart-link { display: block; text-align: center; color: var(--medium-gray); text-decoration: none; margin-top: 40px; } .restart-link:hover { color: var(--forest-green); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .hero h1 { font-size: 32px; } .question-text { font-size: 22px; } .intro { font-size: 16px; } .container { padding: 15px; } #result-content { padding: 25px; } } ``` --- ## 5. JavaScript (script.js) ```javascript // ===== CONFIGURATION ===== const N8N_WEBHOOK_URL = 'https://your-n8n-domain.com/webhook/nago-discovery'; // Ganti dengan URL webhook n8n kamu // ===== QUESTION NAVIGATION ===== let currentQuestion = 1; const totalQuestions = 10; function nextQuestion(current) { const currentSlide = document.querySelector(`[data-question="${current}"]`); const textarea = currentSlide.querySelector('textarea'); // Validate if (!textarea.value.trim()) { textarea.focus(); return; } // Next slide currentSlide.classList.remove('active'); currentQuestion++; const nextSlide = document.querySelector(`[data-question="${currentQuestion}"]`); nextSlide.classList.add('active'); // Update progress updateProgress(); } function prevQuestion(current) { const currentSlide = document.querySelector(`[data-question="${current}"]`); currentSlide.classList.remove('active'); currentQuestion--; const prevSlide = document.querySelector(`[data-question="${currentQuestion}"]`); prevSlide.classList.add('active'); // Update progress updateProgress(); } function updateProgress() { const progress = (currentQuestion / totalQuestions) * 100; document.getElementById('progress-fill').style.width = progress + '%'; document.getElementById('current-q').textContent = currentQuestion; } // ===== FORM SUBMISSION ===== document.getElementById('discovery-form').addEventListener('submit', async function(e) { e.preventDefault(); // Collect all answers const formData = new FormData(e.target); const answers = { q1: formData.get('q1'), q2: formData.get('q2'), q3: formData.get('q3'), q4: formData.get('q4'), q5: formData.get('q5'), q6: formData.get('q6'), q7: formData.get('q7'), q8: formData.get('q8'), q9: formData.get('q9'), q10: formData.get('q10') }; // Show loading document.getElementById('loading').classList.add('active'); try { // Send to n8n const response = await fetch(N8N_WEBHOOK_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(answers) }); if (!response.ok) { throw new Error('Network response was not ok'); } const result = await response.json(); // Save to sessionStorage sessionStorage.setItem('nago_result', result.result); // Redirect to result page window.location.href = 'result.html'; } catch (error) { console.error('Error:', error); alert('Terjadi kesalahan. Silakan coba lagi.'); document.getElementById('loading').classList.remove('active'); } }); // ===== SHARE FUNCTIONS ===== function shareTwitter() { const text = encodeURIComponent('Saya baru saja menyelesaikan Authentic Discovery bersama Nago Tejena. Temukan bagian terbaik dari dirimu juga!'); window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank'); } function shareFacebook() { const url = encodeURIComponent(window.location.href); window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank'); } function shareWhatsApp() { const text = encodeURIComponent('Saya baru saja menyelesaikan Authentic Discovery bersama Nago Tejena. Temukan bagian terbaik dari dirimu juga!'); window.open(`https://wa.me/?text=${text}`, '_blank'); } ``` --- ## 📋 Checklist sebelum launch | Task | Status | |------|--------| | Ganti `N8N_WEBHOOK_URL` dengan URL asli | ⬜ | | Setup n8n webhook | ⬜ | | Test submission | ⬜ | | Setup CTA link (WhatsApp/booking) | ⬜ | | Mobile testing | ⬜ | --- ## 🆘 Troubleshooting **Error: "Cannot fetch" atau CORS error?** - Pastikan n8n webhook kamu accessible - Untuk local development, gunakan ngrok untuk expose local server **Loading lama terus?** - Check apakah n8n workflow sudah benar - Check OpenAI API key valid --- Mau saya bantu setup n8n workflow-nya juga sekarang? 🔧