# Nago — Frontend Wireframe > Wireframe & Design Guide untuk Nago Authentic Discovery --- ## 🎯 Concept & Vibe | Elemen | Direction | |--------|-----------| | **Feel** | Calm, introspective, premium, personal | | **Warna** | Warm neutrals, soft cream, deep forest green, accent gold | | **Typography** | Serif untuk headings (literary feel), sans-serif untuk body | | **Motion** | Slow, gentle transitions — like turning pages of a journal | | **Imagery** | Minimal, abstract, nature-inspired | --- ## 📱 Page Flow ``` Landing Page │ ▼ Question Flow (10 steps) │ ▼ Loading (AI processing) │ ▼ Result Page │ ▼ [CTA: Book Session with Nago] ``` --- ## 🖼️ Wireframe — Landing Page ``` ┌─────────────────────────────────────────────────────────┐ │ │ │ [Logo: 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. │ │ │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ 📖 Buku "Aku yang Telah Lama Hilang" │ │ │ │ [Lihat di Toko Buku] → │ │ │ └─────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ ``` --- ## 📝 Wireframe — Question Page (Mobile-First) ``` ┌─────────────────────────────────────────────────────────┐ │ │ │ ┌───────┐ Progress: 3/10 │ │ │ 🔵 │ ═══════════○──────────────────── │ │ └───────┘ │ │ │ │ │ │ │ │ Dalam 2 minggu terakhir, apa satu momen │ │ yang membuatmu merasa benar-benar hidup? │ │ │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ Tulis jawabanmu di sini... │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ [Lanjut →] │ │ │ │ │ │ ← Kembali │ │ │ └─────────────────────────────────────────────────────────┘ ``` --- ## 📝 Wireframe — Question Page (Desktop) ``` ┌───────────────────────────────────────────────────────────────────────────┐ │ │ │ NAGO Progress: 3/10 ═══○────────── │ │ │ │───────────────────────────────────────────────────────────────────────────│ │ │ │ "Aku yang Telah Lama Hilang" │ │ buku oleh Nago Tejena │ │ │ │───────────────────────────────────────────────────────────────────────────│ │ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ │ │ Q3 of 10 │ │ │ │ │ │ │ │ Sebutkan satu pengalaman │ │ │ │ hidupmu yang paling │ │ │ │ membentuk siapa dirimu │ │ │ │ sekarang! │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ Tulis jawabanmu... │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────┘ │ │ │ │ │ │ │ │ [Lanjut →] │ │ │ │ │ │ │ │ ← Kembali │ │ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ │ └───────────────────────────────────────────────────────────────────────────┘ ``` --- ## ⏳ Wireframe — Loading Page ``` ┌─────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ ◐ │ │ ╱ ╲ │ │ ╱ ╲ │ │ ╱ ╲ │ │ ╱ ╲ │ │ ╱─────────╲ │ │ │ │ │ │ Nago sedang membaca │ │ jawabanmu dengan │ │ penuh perhatian... │ │ │ │ │ │ Ini mungkin memakan │ │ waktu sekitar 30 detik. │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ ``` --- ## ✨ Wireframe — Result Page ``` ┌─────────────────────────────────────────────────────────┐ │ │ │ [Logo: NAGO] │ │ │ │ │ │ ✨ Hasil Perjalananmu ✨ │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ 🎭 YOUR AUTHENTIC SELF PORTRAIT │ │ ───────────────────────────────────────────────────── │ │ │ │ [AI-generated description tentang siapa user...] │ │ │ │ [Long paragraph yang puitis dan personal] │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ 💎 CORE STRENGTHS │ │ ───────────────────────────────────────────────────── │ │ │ │ 1. [Strength 1] │ │ 2. [Strength 2] │ │ 3. [Strength 3] │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ 🪞 HIDDEN PATTERNS │ │ ───────────────────────────────────────────────────── │ │ │ │ [Description...] │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ ⚠️ GROW AREAS │ │ ───────────────────────────────────────────────────── │ │ │ │ [Description...] │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ 🧭 YOUR LIFE COMPASS │ │ ───────────────────────────────────────────────────── │ │ │ │ Langkah 1: [Description...] │ │ Langkah 2: [Description...] │ │ Langkah 3: [Description...] │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ ✉️ A MESSAGE FROM YOUR FUTURE SELF │ │ ───────────────────────────────────────────────────── │ │ │ │ [Quote/message yang inspiring...] │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ │ │ Ingin mendalami ini lebih jauh bersama Nago? │ │ │ │ │ │ │ │ [→ Book Sesi Personal 1-on-1] │ │ │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ 📤 Share hasilmu │ │ │ │ [Twitter] [Facebook] [WhatsApp] │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ [← Mulai dari Awal] │ │ │ └─────────────────────────────────────────────────────────┘ ``` --- ## 🎨 Color Palette ``` PRIMARY COLORS ───────────────────────────────────────── Deep Forest Green #2D4A3E Warm Cream #F5F0E8 Soft Gold #C4A962 Charcoal #2C2C2C NEUTRAL COLORS ───────────────────────────────────────── Off-White #FAFAF8 Light Gray #E8E5E0 Medium Gray #9A958D Dark Gray #4A4744 ACCENT COLORS ───────────────────────────────────────── Warm Amber #D4A574 Sage Green #8B9D83 Dusty Rose #C4A0A0 Soft Blue #7D9AAA ``` --- ## 🔤 Typography ``` HEADINGS ───────────────────────────────────────── Font: Playfair Display (Google Fonts) Weights: 400, 500, 600, 700 BODY TEXT ───────────────────────────────────────── Font: Inter / Lato (Google Fonts) Weights: 300, 400, 500 QUOTE / SPECIAL ───────────────────────────────────────── Font: Cormorant Garamond (Google Fonts) Style: Italic ``` --- ## 📱 Responsive Breakpoints ``` Mobile: 320px - 767px Tablet: 768px - 1023px Desktop: 1024px+ ``` --- ## 🖼️ Assets Needed | Asset | Description | |-------|-------------| | Logo | NAGO text logo (SVG) | | Background | Subtle paper texture / gradient | | Icons | Minimal, line-style icons | | Portrait | Optional: Nago's photo for credibility | --- ## 🚀 Tech Stack Recommendation | Layer | Recommended | |-------|-------------| | **Frontend** | Next.js atau Astro | | **Styling** | Tailwind CSS | | **Hosting** | Vercel / Netlify | | **Backend** | n8n (workflow automation) | | **AI** | OpenAI GPT-4 | --- ## 📋 Component List 1. **Header** — Logo + Navigation 2. **Hero Section** — Landing copy + CTA 3. **About Nago Section** — Bio + Book link 4. **Question Card** — Input form with progress 5. **Progress Bar** — Visual indicator 6. **Loading Spinner** — Animated, calming 7. **Result Card** — AI output display 8. **CTA Section** — Book session upsell 9. **Share Buttons** — Social sharing 10. **Footer** — Minimal, copyright --- ## 📁 File Structure (Next.js) ``` nago-discovery/ ├── app/ │ ├── page.tsx # Landing page │ ├── questions/ │ │ └── page.tsx # Question flow │ └── result/ │ └── page.tsx # Result display ├── components/ │ ├── Header.tsx │ ├── Hero.tsx │ ├── QuestionCard.tsx │ ├── ProgressBar.tsx │ ├── LoadingSpinner.tsx │ ├── ResultCard.tsx │ ├── CTASection.tsx │ └── Footer.tsx ├── lib/ │ └── api.ts # n8n webhook integration ├── styles/ │ └── globals.css └── public/ └── assets/ ``` --- ## 📝 Todo List - [x] Prompt design - [x] n8n workflow design - [x] Frontend wireframe - [ ] Setup n8n account - [ ] Create webhook - [ ] Configure OpenAI node - [ ] Frontend development - [ ] Integration testing - [ ] Deploy - [ ] Testing with real users --- ## Status - [x] Prompt design - [x] n8n workflow design - [x] Frontend wireframe - [ ] n8n setup - [ ] Frontend development - [ ] Testing - [ ] Deployment