Tutorial Vibe Coding untuk Pemula: Bikin Landing Page Konser Musik Sistem Pendaftaran

Part 1: Intro & Persiapan Tools

🎸 Cerita Dua Konser Indie

Bayangkan ada dua konser indie di Jakarta, sama-sama featuring band lokal keren, sama-sama harga tiket terjangkau, tapi hasilnya beda jauh:

Konser A:

  • Promosi cuma share link Google Form di Instagram Story
  • Form-nya plain white, ada tulisan "Untitled Form"
  • Info event di caption IG doang (scroll lama baru ketemu)
  • Result: 30 orang yang daftar

Konser B:

  • Punya landing page sendiri dengan URL gampang diingat
  • Poster keren, lineup jelas, jadwal lengkap, semua di satu tempat
  • Form pendaftaran terintegrasi langsung di website
  • Result: SOLD OUT 150 tiket dalam 3 hari

Bedanya apa? First impression.

Landing page yang professional bikin event kamu terlihat legit, serius, dan worth it untuk didatengin. Orang lebih percaya buat transfer tiket kalau website-nya terlihat proper.

💡 Kenapa Landing Page Penting untuk Event Konser?

Bayangin kamu lagi scroll Instagram, nemu poster konser yang menarik. Kamu tertarik, terus klik link di bio. Yang muncul adalah...

❌ Kalau cuma Google Form link:

  • "Oh... cuma Google Form biasa"
  • Kurang info, harus balik lagi ke IG buat baca caption
  • Ragu: "Apa ini legit?"
  • 50% chance langsung close tab

✅ Kalau landing page proper:

  • "Wow, keren banget!"
  • Semua info ada: lineup, harga, jadwal, venue
  • Terlihat professional & terpercaya
  • Langsung daftar on the spot

5 Alasan Landing Page > Google Form Doang:

  1. Terlihat Professional & Serius
    • Event kamu nggak terlihat kayak project tugas kuliah
    • Organizer yang serius punya website yang serius
  2. Bisa Showcase Lineup dengan Visual
    • Foto band/artis
    • Genre musik yang dibawakan
    • Build excitement sebelum event
  3. Build Hype & Excitement
    • Poster yang eye-catching
    • Warna dan vibe sesuai genre musik
    • Orang jadi lebih excited buat dateng
  4. Semua Info di Satu Tempat
    • Nggak perlu bolak-balik antara IG caption dan form
    • Venue, jadwal, harga, lineup — semua clear
    • Mengurangi pertanyaan "Dimana tempatnya?" di DM
  5. Mudah Di-share
    • 1 link aja: jakarta-indie-night.vercel.app
    • Bisa di-share ke grup WA, Twitter, TikTok
    • Gampang diinget, gampang diketik

🎯 Apa yang Akan Kita Bikin?

Di tutorial ini, kamu akan bikin landing page konser musik yang lengkap dan professional — tanpa coding sama sekali. Serius, nggak perlu background IT.

Struktur Landing Page:

┌─────────────────────────────────────┐
│                                     │
│  🎸 HERO SECTION                   │
│  - Nama event konser                │
│  - Tanggal, waktu, venue            │
│  - Poster/banner (optional)         │
│  - Button "Daftar Sekarang"         │
│                                     │
├─────────────────────────────────────┤
│                                     │
│  🎤 LINEUP SECTION                  │
│  - Grid foto band/artis             │
│  - Nama band + genre musik          │
│  - Visual yang menarik              │
│                                     │
├─────────────────────────────────────┤
│                                     │
│  💳 TICKET PRICING                  │
│  - Kategori tiket (Presale/VIP)     │
│  - Harga jelas per kategori         │
│  - Benefits setiap tier             │
│                                     │
├─────────────────────────────────────┤
│                                     │
│  🕒 SCHEDULE/RUNDOWN                │
│  - Timeline acara                   │
│  - Jam penampilan tiap band         │
│  - Highlight headliner              │
│                                     │
├─────────────────────────────────────┤
│                                     │
│  📝 REGISTRATION FORM               │
│  - Google Forms embedded            │
│  - Payment instruction              │
│  - WhatsApp contact                 │
│                                     │
├─────────────────────────────────────┤
│                                     │
│  📱 FOOTER                          │
│  - Social media links               │
│  - Contact organizer                │
│  - Copyright info                   │
│                                     │
└─────────────────────────────────────┘

Timeline Pengerjaan:

  • ⏱️ Setup tools: 15-20 menit
  • 🎨 Bikin content sections: 1-1.5 jam
  • ✨ Styling & polish: 30 menit
  • 🚀 Deploy ke internet: 15 menit
  • Total: 2-3 jam (bisa selesai dalam 1 sesi!)

Yang TIDAK kita bikin (manage ekspektasi):

  • ❌ Payment gateway otomatis (Midtrans/Xendit)
  • ❌ Real-time ticket counter
  • ❌ Login system untuk peserta
  • ❌ QR code generator otomatis

Tutorial ini fokus ke: landing page yang bisa langsung online + sistem pendaftaran via Google Forms. Simple, effective, dan 100% GRATIS.

🛠️ Persiapan Tools

Semua tools yang kita pakai 100% GRATIS. Nggak ada biaya tersembunyi, nggak ada "trial 7 hari terus bayar".

TECH STACK KITA:

🤖 AI Assistant
└── Claude (claude.ai) atau ChatGPT
    → Yang bakal nulis code HTML untuk kamu
    → Gratis, nggak perlu install

💻 Code Editor
└── Cursor (cursor.sh)
    → Kayak VS Code tapi ada AI-nya
    → Gratis, ringan, beginner-friendly

📝 Form System
└── Google Forms
    → Collect data pendaftar
    → Otomatis masuk ke Google Sheets
    → Gratis, semua orang pasti punya akun Google

🚀 Deployment
└── Vercel (vercel.com)
    → Upload HTML → langsung live di internet
    → Free subdomain (.vercel.app)
    → Gratis selamanya

Total biaya: Rp 0,-

Oke, sekarang kita setup satu-satu!

📋 Step 1: Setup AI Assistant (Claude atau ChatGPT)

AI Assistant adalah "teman coding" kamu yang bakal nulis semua code HTML. Kamu cuma perlu kasih instruksi dalam bahasa Indonesia biasa.

Pilih salah satu:

Option A: Claude (Recommended)

  1. Buka browser, ketik: claude.ai
  2. Klik "Sign Up" (pojok kanan atas)
  3. Login pakai Google account
  4. Done! Kamu bisa langsung chat dengan Claude

Option B: ChatGPT

  1. Buka: chat.openai.com
  2. Sign up dengan email/Google
  3. Verifikasi email
  4. Langsung bisa chat

Kenapa pakai AI?

  • Kamu nggak perlu belajar coding dari nol
  • Cukup jelasin "aku mau bikin landing page konser dengan..."
  • AI yang nulis code-nya
  • Kamu tinggal copy-paste

Test AI kamu: Coba tanya:

"Halo! Bisa bantu aku bikin website sederhana?"

Kalau AI-nya jawab (bukan error), berarti udah siap! ✅

💻 Step 2: Install Cursor Editor

Cursor adalah tempat kamu paste code dari AI dan lihat hasilnya.

Download Cursor:

  1. Buka browser, ketik: cursor.sh
  2. Klik "Download" (button besar di tengah)
  3. Pilih sesuai OS kamu:
    • Windows: Download .exe file
    • Mac: Download .dmg file
    • Linux: Download .AppImage
  4. Install:
    • Windows: Double-click file .exe → Next, Next, Install
    • Mac: Drag Cursor.app ke folder Applications
    • Linux: Chmod +x, lalu jalankan
  5. Buka Cursor pertama kali:
    • Mungkin ada prompt "Sign in with GitHub" → SKIP aja, nggak wajib
    • Langsung masuk ke editor

Kenapa pakai Cursor, bukan Notepad?

  • Preview code langsung di browser
  • Syntax highlighting (warna-warna di code)
  • Ada AI assistant built-in (bonus!)
  • Auto-save file

Verifikasi Cursor Ready:

  • Buka Cursor
  • Klik "File" → "New File"
  • Ketik: <h1>Test</h1>
  • Kalau ada syntax highlighting (warna di text), berarti udah ready! ✅

🚀 Step 3: Setup Akun Vercel

Vercel adalah tempat kita upload website biar bisa diakses orang lain via internet.

Sign Up Vercel:

  1. Buka: vercel.com
  2. Klik "Sign Up" (pojok kanan atas)
  3. Pilih: "Continue with GitHub" (recommended)
    • Kalau belum punya GitHub:
      • Klik "Sign up" di GitHub
      • Isi email, password, username
      • Verifikasi email
      • Kembali ke Vercel → login with GitHub
  4. Authorize Vercel (klik "Authorize")
  5. Done! Dashboard Vercel terbuka

Dashboard Vercel:

┌────────────────────────────────┐
│  Vercel Dashboard              │
│                                │
│  [+ Add New Project]           │
│                                │
│  Your Projects:                │
│  (kosong dulu)                 │
└────────────────────────────────┘

Nanti kita balik lagi ke sini pas deploy.

Verifikasi Vercel Ready:

  • Kamu bisa login ke dashboard Vercel
  • Ada button "Add New Project"
  • Berarti udah ready! ✅

📝 Step 4: Setup Google Forms

Google Forms buat collect data peserta yang daftar (nama, email, kategori tiket, bukti transfer).

Bikin Form Pendaftaran:

  1. Buka: forms.google.com
  2. Klik "+ Blank" (form kosong)
  3. Judul form: "Pendaftaran [Nama Event Kamu]"
    • Contoh: "Pendaftaran Jakarta Indie Night"
  4. Tambah pertanyaan (klik tombol + di kanan): Pertanyaan 1: Nama Lengkap
    • Type: Short answer
    • Toggle "Required" ON
    Pertanyaan 2: Email
    • Type: Short answer
    • Toggle "Required" ON
    Pertanyaan 3: No. WhatsApp
    • Type: Short answer
    • Description: "Format: 08xxxxxxxxxx"
    • Toggle "Required" ON
    Pertanyaan 4: Kategori Tiket
    • Type: Multiple choice
    • Options:
      • Presale - Rp 50.000
      • Regular - Rp 75.000
      • VIP - Rp 150.000
    • Toggle "Required" ON
    Pertanyaan 5: Sudah Transfer?
    • Type: Multiple choice
    • Options:
      • Sudah
      • Belum
    • Toggle "Required" ON
    Pertanyaan 6: Bukti Transfer
    • Type: File upload
    • Settings → "Allow only specific file types" → ✅ Image, PDF
    • "Maximum file size" → 10 MB
    • Toggle "Required" OFF (optional)
  5. Settings Form:
    • Klik ⚙️ (Settings) di pojok kanan atas
    • Tab "Responses":
      • ✅ "Limit to 1 response" (biar 1 orang cuma daftar 1x)
    • Klik "Save"
  6. Simpan Form:
    • Form otomatis save di Google Drive kamu

Verifikasi Form Ready:

  • Preview form (klik icon mata di pojok kanan atas)
  • Coba isi form dengan data dummy
  • Klik "Submit"
  • Buka tab "Responses" → data kamu muncul
  • Berarti form udah ready! ✅

PENTING: Jangan close tab Google Forms ini! Kita butuh "embed code" dari form ini nanti di Part 4.

📁 Step 5: Bikin Project Folder

Sekarang kita siapkan folder kerja di komputer.

Windows:

  1. Buka File Explorer
  2. Masuk ke Desktop (atau Documents, terserah)
  3. Klik kanan → New → Folder
  4. Nama folder: konser-landing
  5. Enter

Mac:

  1. Buka Finder
  2. Masuk ke Desktop (atau Documents)
  3. Klik kanan → New Folder
  4. Nama folder: konser-landing
  5. Enter

Linux:

mkdir ~/Desktop/konser-landing

Struktur Folder Akhir:

konser-landing/
└── index.html  (file utama kita, belum dibuat)

Nanti kalau pakai gambar:
konser-landing/
├── index.html
└── images/
    ├── poster.jpg
    ├── band1.jpg
    └── band2.jpg

Untuk sekarang, folder masih kosong. Kita bakal bikin file index.html nanti pakai Cursor.

✅ Step 6: Checklist Content yang Perlu Disiapkan

Sebelum mulai coding (via AI), siapkan dulu konten event kamu. Tulis di Notepad/Google Docs dulu.

Content Checklist:

📝 INFO DASAR EVENT

☐ Nama event konser
  Contoh: "Jakarta Indie Night 2025"

☐ Tanggal event
  Contoh: "Sabtu, 15 Desember 2025"

☐ Waktu event
  Contoh: "18:00 - 23:00 WIB"

☐ Venue/Lokasi
  Contoh: "Rossi Musik Kemang, Jakarta Selatan"

☐ Tagline/Deskripsi Singkat
  Contoh: "Malam penuh energi dengan band-band indie terbaik Jakarta"

🎤 LINEUP BANDS

☐ Minimal 3-5 band/artis
  Contoh:
  1. The Soundwaves - Indie Rock
  2. Midnight Echo - Alternative
  3. Urban Poets - Indie Pop
  4. Cosmic Rays - Post-Rock
  5. The Locals - Indie Folk

💳 HARGA TIKET

☐ Kategori Presale + harga
  Contoh: Rp 50.000

☐ Kategori Regular + harga
  Contoh: Rp 75.000

☐ Kategori VIP + harga (optional)
  Contoh: Rp 150.000

☐ Benefits tiap kategori
  Contoh Presale: Early entry, 1 free sticker
  Contoh VIP: Meet & greet, exclusive merch

🕒 RUNDOWN ACARA

☐ Jadwal lengkap
  Contoh:
  18:00 - Doors Open
  18:30 - The Locals
  19:15 - Cosmic Rays
  20:00 - Urban Poets
  20:45 - Midnight Echo
  21:30 - The Soundwaves (Headliner)
  22:30 - Closing

📞 CONTACT INFO

☐ Nomor WhatsApp organizer
  Contoh: 0812-3456-7890

☐ Instagram handle
  Contoh: @jakartaindienight

☐ Email (optional)
  Contoh: [email protected]

☐ Twitter/TikTok (optional)

💰 PAYMENT INFO

☐ Nomor rekening transfer
  Contoh: BCA 1234567890 a.n Jakarta Indie Night

☐ Metode pembayaran lain (e-wallet?)
  Contoh: GoPay, OVO, Dana

Nggak perlu perfect!

  • Placeholder foto band? Oke, pakai kotak abu-abu dulu
  • Belum punya semua info? Isi yang ada dulu
  • Bisa diupdate kapan aja

🎯 Checkpoint: Tools Ready!

Sebelum lanjut ke Part 2, cek semua tools udah ready:

✅ TOOLS CHECKLIST:

☐ AI Assistant (Claude/ChatGPT) bisa diakses & respond
☐ Cursor editor terinstall & bisa dibuka
☐ Akun Vercel aktif, bisa login ke dashboard
☐ Google Form pendaftaran sudah dibuat
☐ Folder project `konser-landing` sudah dibuat
☐ Content event sudah disiapkan (notes/docs)

PROGRESS: [████░░░░░░] 20%

Kalau semua udah ✅: 🎉 Perfect! Kamu siap mulai bikin landing page!

Kalau ada yang belum:

  • Balik ke step yang belum selesai
  • Ikuti instruksi step-by-step
  • Test/verifikasi lagi
  • Jangan skip step apapun!

💡 Tips Sebelum Mulai

1. Jangan Overthink

  • Landing page nggak perlu sempurna dari awal
  • Bikin dulu, polish belakangan
  • "Done is better than perfect"

2. Save Sering-sering

  • Di Cursor, pencet Ctrl+S (Windows) atau Cmd+S (Mac)
  • Auto-save biasanya aktif, tapi better safe than sorry

3. Test di Browser Lain

  • Nanti pas udah jadi, test di Chrome, Safari, Firefox
  • Buka juga dari HP (mobile responsive important!)

4. Jangan Takut Error

  • Kalau ada yang error, tenang
  • Copy error message → tanya ke AI
  • AI bakal kasih solusi

5. Dokumentasi Progress

  • Screenshot milestone (hero section jadi, lineup jadi, dll)
  • Bisa buat content IG Story "Behind the scenes bikin website" 📸

🚀 Next: Bikin Hero & Lineup Section!

Di Part 2, kita bakal:

  • Nulis prompt pertama ke AI
  • Generate code HTML untuk Hero section
  • Bikin Lineup section dengan grid bands
  • Preview hasilnya di browser
  • Customize warna & layout sesuai selera

Estimated time: ~30 menit

Siap? Let's go! 🎸🔥

Navigation:

  • ✅ Part 1: Intro & Persiapan ← Kamu di sini
  • ⏭️ Part 2: Hero + Lineup Section
  • ⏭️ Part 3: Ticket + Schedule Section
  • ⏭️ Part 4: Registration Form + Footer
  • ⏭️ Part 5: Styling + Deploy

Part 2: Hero + Lineup Section

🎯 Goal: Bikin First Impression yang WOW

Hero section adalah hal pertama yang dilihat pengunjung website kamu. Dalam 3 detik pertama, mereka bakal decide: "Wah keren, lanjut scroll" atau "Meh, close tab".

Hero section yang bagus harus instantly communicate:

  • Apa event-nya (nama konser)
  • Kapan diadakan (tanggal & waktu)
  • Dimana tempatnya (venue)
  • Kenapa harus dateng (tagline yang catchy)
  • Gimana cara daftar (button CTA yang jelas)

Lineup section adalah showcase band/artis yang bakal tampil. Ini yang bikin orang excited: "Oh, band favorit gue main! Gue harus dateng!"

Let's build them! 🚀

📐 Visual Structure

Ini struktur yang bakal kita bikin:

┌───────────────────────────────────────────────────┐
│                                                   │
│         🎸 HERO SECTION 🎸                       │
│                                                   │
│  ┌─────────────────┐                             │
│  │                 │    JAKARTA INDIE NIGHT      │
│  │   POSTER IMAGE  │    ═══════════════════      │
│  │   (Optional)    │                             │
│  │     400x600     │    Sabtu, 15 Desember 2025  │
│  │                 │    18:00 - 23:00 WIB        │
│  └─────────────────┘    @ Rossi Musik Kemang     │
│                                                   │
│                         "Malam penuh energi      │
│                          dengan band-band indie   │
│                          terbaik Jakarta"         │
│                                                   │
│                    [  DAFTAR SEKARANG  ]         │
│                         (CTA Button)              │
│                                                   │
└───────────────────────────────────────────────────┘

┌───────────────────────────────────────────────────┐
│                                                   │
│         🎤 LINEUP SECTION 🎤                     │
│              "Yang Bakal Tampil"                  │
│                                                   │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐       │
│  │          │  │          │  │          │       │
│  │  BAND 1  │  │  BAND 2  │  │  BAND 3  │       │
│  │  Photo   │  │  Photo   │  │  Photo   │       │
│  │ 300x300  │  │ 300x300  │  │ 300x300  │       │
│  │          │  │          │  │          │       │
│  ├──────────┤  ├──────────┤  ├──────────┤       │
│  │The Sound │  │ Midnight │  │  Urban   │       │
│  │  waves   │  │   Echo   │  │  Poets   │       │
│  │Indie Rock│  │Alternative│ │Indie Pop │       │
│  └──────────┘  └──────────┘  └──────────┘       │
│                                                   │
│  ┌──────────┐  ┌──────────┐                     │
│  │  BAND 4  │  │  BAND 5  │                     │
│  │  Photo   │  │  Photo   │                     │
│  └──────────┘  └──────────┘                     │
│                                                   │
└───────────────────────────────────────────────────┘

Layout:
- Desktop: 3 kolom grid untuk lineup
- Tablet: 2 kolom grid
- Mobile: 1 kolom (stack vertical)

Clean, simple, dan langsung to the point! 🎯

🤖 Step 1: Copy-Paste Prompt ke AI (Claude/ChatGPT)

Sekarang kita minta AI untuk generate code HTML. Ini adalah prompt template yang bisa kamu copy-paste langsung.

Buka AI Assistant kamu (Claude atau ChatGPT), lalu paste prompt ini:

Buatkan HTML landing page untuk konser musik dengan:

HERO SECTION:
- Nama event: [ISI NAMA EVENT KAMU]
- Tanggal: [ISI TANGGAL LENGKAP]
- Waktu: [ISI WAKTU]
- Venue: [ISI NAMA VENUE & LOKASI]
- Tagline/deskripsi singkat: [ISI TAGLINE YANG CATCHY]
- Button CTA: "Daftar Sekarang" (smooth scroll ke section registration nanti)
- Optional: Space untuk poster image (bisa pakai placeholder dulu)

LINEUP SECTION:
- Judul section: "LINEUP" atau "Yang Bakal Tampil"
- Subtitle: "Saksikan penampilan dari band-band terbaik"
- Bands/artis dalam grid 3 kolom (responsive):
  1. [Nama Band 1] - [Genre]
  2. [Nama Band 2] - [Genre]
  3. [Nama Band 3] - [Genre]
  4. [Nama Band 4] - [Genre]
  5. [Nama Band 5] - [Genre]
- Setiap band punya:
  * Placeholder foto (kotak abu-abu atau gradient)
  * Nama band (bold, prominent)
  * Genre musik (smaller text)

TECH REQUIREMENTS:
- Single HTML file (semua dalam 1 file)
- Tailwind CSS via CDN (jangan pakai npm)
- Dark theme background (sesuai vibe musik konser)
- Accent color: pilih yang energetic (orange, pink, cyan, atau sesuai genre)
- Mobile responsive (mobile-first design)
- Smooth scroll behavior untuk button CTA
- Modern fonts via Google Fonts

STYLING VIBE:
- Energetic, bold, eye-catching
- Cocok untuk konser musik indie/rock/hip-hop
- Typography yang impactful
- Spacing yang comfortable

Placeholder:

  • [ISI NAMA EVENT KAMU] → ganti dengan nama event kamu
  • [ISI TANGGAL LENGKAP] → contoh: "Sabtu, 15 Desember 2025"
  • [Nama Band 1] → ganti dengan nama band yang tampil
  • Dan seterusnya...

✍️ Step 2: Contoh Prompt yang Sudah Diisi

Biar lebih jelas, ini contoh prompt yang sudah diisi lengkap untuk event "Jakarta Indie Night":

Buatkan HTML landing page untuk konser musik dengan:

HERO SECTION:
- Nama event: Jakarta Indie Night
- Tanggal: Sabtu, 15 Desember 2025
- Waktu: 18:00 - 23:00 WIB
- Venue: Rossi Musik Kemang, Jakarta Selatan
- Tagline: "Malam penuh energi dengan band-band indie terbaik Jakarta"
- Button CTA: "Daftar Sekarang" (smooth scroll ke section registration)
- Optional: Space untuk poster image

LINEUP SECTION:
- Judul section: "LINEUP"
- Subtitle: "Saksikan penampilan dari band-band terbaik"
- Bands dalam grid 3 kolom (responsive):
  1. The Soundwaves - Indie Rock
  2. Midnight Echo - Alternative
  3. Urban Poets - Indie Pop
  4. Cosmic Rays - Post-Rock
  5. The Locals - Indie Folk
- Setiap band: placeholder foto, nama band, genre

TECH REQUIREMENTS:
- Single HTML file
- Tailwind CSS via CDN
- Dark theme background (#0a0a0a atau similar)
- Accent color: orange/yellow (energetic vibe)
- Mobile responsive
- Smooth scroll untuk CTA button
- Google Fonts: Bebas Neue untuk headings, Inter untuk body

STYLING VIBE:
- Energetic, bold, festival vibes
- Cocok untuk indie rock/alternative music
- Typography impactful
- Spacing comfortable, tidak terlalu cramped

Copy prompt di atas → paste ke Claude/ChatGPT → Enter!

AI akan generate code HTML lengkap dalam beberapa detik. 🚀

💻 Step 3: Paste ke Cursor & Preview

Setelah AI generate code, sekarang kita masukin ke Cursor dan lihat hasilnya!

Langkah-langkah:

  1. Copy Code dari AI
    • AI akan kasih code dalam code block (kotak dengan background gelap)
    • Klik tombol "Copy" di pojok kanan atas code block
    • Atau: select all code (Ctrl+A), lalu Ctrl+C
  2. Buka Cursor
    • Launch aplikasi Cursor
    • Klik "File" → "New File" (atau Ctrl+N)
    • File baru terbuka (kosong)
  3. Paste Code
    • Klik di area editor
    • Paste code dari AI (Ctrl+V atau Cmd+V)
    • Code akan muncul dengan syntax highlighting (warna-warni)
  4. Save File
    • Klik "File" → "Save" (atau Ctrl+S)
    • Navigate ke folder konser-landing yang tadi kita bikin
    • Nama file: index.html (PENTING: harus exactly ini!)
    • Klik "Save"
  5. Preview di Browser
    • Di Cursor, klik kanan di area code
    • Pilih "Open with Live Server" (kalau ada)
    • ATAU: buka File Explorer/Finder
    • Navigate ke folder konser-landing
    • Double-click index.html
    • File akan terbuka di browser default kamu (Chrome/Safari/Firefox)
  6. Lihat Hasilnya! 🎉
    • Hero section muncul dengan nama event, tanggal, venue
    • Button "Daftar Sekarang" ada
    • Lineup section dengan grid bands
    • Scroll ke bawah, lihat semua bands

Congratulations! Kamu baru aja bikin website pertama kamu! 🎸

🎨 Step 4: Common Adjustments

Website udah jadi, tapi mungkin ada yang mau kamu customize. Ini beberapa adjustment yang paling sering diminta:

A. Ganti Warna Tema

Kalau warna default kurang cocok dengan vibe event kamu, ganti dengan prompt ini:

Prompt ke AI:

Ubah color scheme menjadi:
- Background: #0f172a (dark blue)
- Primary accent: #3b82f6 (electric blue)
- Secondary accent: #8b5cf6 (purple)
- Text: white (#ffffff) dan gray (#94a3b8)

Apply ke semua sections consistently.

Alternatif color schemes:

🔥 ENERGETIC RED/ORANGE:
- Background: #1a0000
- Primary: #ff3366
- Secondary: #ff6b35

🌊 COOL CYAN/BLUE:
- Background: #0a192f
- Primary: #00d4ff
- Secondary: #00ff88

💜 PURPLE HAZE:
- Background: #0f0f23
- Primary: #8b5cf6
- Secondary: #ec4899

Copy code baru dari AI → paste replace di Cursor → save → refresh browser!

B. Tambah Poster Image

Kalau kamu punya poster/banner event, tambahkan dengan prompt ini:

Prompt ke AI:

Tambahkan poster image di hero section:
- Posisi: di sebelah kiri text info event
- Ukuran: 400px width, 600px height
- Rounded corners
- Shadow effect untuk depth
- Responsive: di mobile, poster di atas, text di bawah (stack vertical)

Pakai placeholder dulu (gradient background atau solid color).
Nanti bisa diganti dengan URL image real.

Cara ganti dengan foto real nanti:

  • Upload poster ke imgbb.com (gratis)
  • Copy link URL image
  • Di code HTML, cari <img src="placeholder">
  • Ganti placeholder dengan URL dari imgbb
  • Save & refresh!

B. Ubah Layout Lineup

Default: 3 kolom desktop, 2 kolom tablet, 1 kolom mobile.

Kalau mau ganti:

Prompt ke AI:

Ubah lineup grid layout menjadi:
- Desktop: 4 kolom
- Tablet: 3 kolom
- Mobile: 2 kolom

Adjust spacing biar tidak terlalu cramped.

Atau kalau cuma punya 3 bands:

Lineup cuma 3 bands, bikin grid:
- Desktop: 3 kolom (1 row)
- Mobile: 1 kolom (stack vertical)

Center alignment, spacing yang generous.

D. Ganti Font

Default biasanya Inter atau system font. Kalau mau lebih bold/edgy:

Prompt ke AI:

Ganti typography dengan Google Fonts:
- Headings (event name, section titles): "Bebas Neue" (extra bold, impactful)
- Subheadings (band names): "Montserrat" (bold)
- Body text (descriptions): "Inter" (clean, readable)

Make sure font weight dan sizes sesuai hierarchy.

Font recommendations untuk musik:

🎸 ROCK/ALTERNATIVE:
- Bebas Neue, Oswald, Anton

🎤 HIP-HOP/URBAN:
- Bebas Neue, Barlow Condensed

🎹 ELECTRONIC:
- Orbitron, Rajdhani, Exo 2

🎺 JAZZ/ACOUSTIC:
- Playfair Display, Cormorant Garamond

E. Customize Button CTA

Button "Daftar Sekarang" bisa diganti text atau style:

Ganti text button:

Ubah button CTA text menjadi:
- "Beli Tiket Sekarang"
atau
- "Amankan Tiket Kamu"
atau
- "Join the Party!"

Ganti style button:

Ubah button style menjadi lebih bold:
- Bigger size (px-10 py-4)
- Pulsing animation (subtle glow effect)
- Hover: scale up sedikit + brighter color
- Rounded full (pill shape)

📸 Step 5: Tips - Band Photo Placeholders

Untuk sekarang, band photos masih placeholder (kotak abu-abu/gradient). Ini normal! Nanti bisa diganti.

Opsi foto band:

A. Minta dari Band

  • DM band di Instagram
  • "Hi! Boleh minta foto band untuk poster lineup? Press kit photo kalau ada"
  • Biasanya mereka punya foto professional

B. Screenshot dari Instagram

  • Buka Instagram band
  • Cari post dengan foto band yang bagus
  • Screenshot (crop yang rapi)
  • Size recommended: minimal 500x500px

C. Ambil dari Website/Spotify

  • Website official band
  • Spotify artist page (foto profile)
  • Bandcamp page

D. Photoshoot Sendiri

  • Kalau band lokal & kamu kenal
  • Mini photoshoot (HP camera cukup)
  • Lighting bagus, background simple

E. Tetap Pakai Placeholder

  • Kalau nggak sempat atau belum ada foto
  • Pakai initial/logo band
  • Atau solid color dengan band name (minimalist approach)

Format foto yang ideal:

  • Size: 300x300px - 500x500px (square)
  • Format: JPG atau PNG
  • File size: < 200KB (compress pakai tinypng.com kalau kebesaran)

🔧 Step 6: Update Code dengan Adjustments

Setelah minta AI adjust code (warna, font, layout), jangan lupa update di Cursor!

Workflow:

  1. Minta AI adjust (contoh: ganti warna)
  2. AI kasih code baru
  3. OPTION A: Copy semua code baru → paste replace semua code di Cursor
  4. OPTION B: AI cuma kasih snippet (potongan) → copy → cari section yang sama di Cursor → replace cuma bagian itu
  5. Save (Ctrl+S)
  6. Refresh browser (F5 atau Cmd+R)
  7. Lihat perubahan!

Tips:

  • Kalau bingung mau replace dimana, tanya AI: "Dimana aku harus paste code ini?"
  • AI akan kasih hint: "Paste di line 45-60" atau "Replace section dengan class 'hero'"
  • Gunakan Ctrl+F (Find) di Cursor untuk cari class/section tertentu

✅ Checkpoint: Hero + Lineup Section Done!

Sebelum lanjut ke Part 3, cek dulu:

✅ HERO SECTION CHECKLIST:

☐ Nama event tampil dengan jelas (font besar, bold)
☐ Tanggal & waktu readable
☐ Venue/lokasi ada
☐ Tagline/deskripsi muncul
☐ Button "Daftar Sekarang" ada dan visible
☐ Poster image ada (atau space untuk poster)
☐ Color scheme sesuai selera
☐ Typography enak dibaca

✅ LINEUP SECTION CHECKLIST:

☐ Section title "LINEUP" muncul
☐ Semua band/artis listed (minimal 3)
☐ Setiap band punya:
  ☐ Foto/placeholder
  ☐ Nama band
  ☐ Genre musik
☐ Grid layout rapi (tidak berantakan)
☐ Responsive di mobile (cek dengan resize browser)

✅ TECHNICAL CHECKLIST:

☐ File `index.html` tersave di folder `konser-landing`
☐ Code tidak ada error di console browser (F12 → Console, harusnya kosong/minimal warning)
☐ Smooth scroll berfungsi (klik button "Daftar Sekarang", harusnya scroll smooth ke bawah)
☐ Website bisa dibuka di browser
☐ Font loading dengan benar (bukan default system font)

PROGRESS: [████████░░] 40% ✨

Kalau semua udah ✅: 🎉 Keren! Hero & Lineup section kamu udah jadi!

Kalau ada yang belum:

  • Scroll ke atas, ikuti step yang terlewat
  • Test satu-satu
  • Kalau stuck, copy error message → tanya AI

🎯 Quick Wins - Mini Challenges

Kalau kamu mau challenge diri sendiri, coba ini:

🏆 Challenge 1: Animated Button Minta AI bikin button "Daftar Sekarang" dengan subtle pulse animation (glow effect yang berkedip pelan).

🏆 Challenge 2: Hover Effects Lineup cards punya hover effect: scale up sedikit + shadow lebih dalam pas di-hover mouse.

🏆 Challenge 3: Countdown Timer Tambahkan countdown timer di hero section yang hitung mundur ke tanggal event.

🏆 Challenge 4: Custom Icons Ganti bullet points di tagline dengan icon musik (🎸🎤🎵) pakai emoji atau icon library (Heroicons/Lucide).

Ini semua bisa dikerjakan dengan minta AI! Cukup describe apa yang kamu mau.

💡 Troubleshooting Common Issues

❌ Problem: Button "Daftar Sekarang" nggak smooth scroll

Solution:

Tanya AI:
"Button CTA nggak smooth scroll. Fix dengan JavaScript smooth scroll behavior."

AI akan tambahin code:
html { scroll-behavior: smooth; }

❌ Problem: Lineup grid berantakan di mobile

Solution:

Tanya AI:
"Lineup grid berantakan di mobile. Fix dengan:
- Mobile: 1 kolom (stack vertical)
- Tablet: 2 kolom
- Desktop: 3 kolom
Adjust spacing."

❌ Problem: Font tidak loading (masih default font)

Solution:

Tanya AI:
"Google Fonts tidak load. Pastikan:
1. <link> tag ada di <head>
2. Font family applied di CSS
3. Fallback font ada (sans-serif)"

❌ Problem: Warna terlalu gelap, text tidak terbaca

Solution:

Tanya AI:
"Background terlalu gelap, text kurang kontras.
Increase contrast dengan:
- Text: pure white (#ffffff)
- Background: slightly lighter (#1a1a1a instead of #0a0a0a)
- Add subtle text shadow untuk readability"

❌ Problem: Website tidak responsive di HP

Solution:

Tanya AI:
"Website tidak responsive. Check:
1. <meta name='viewport'> tag ada
2. Tailwind responsive classes applied
3. Test dengan browser DevTools (F12 → Toggle device toolbar)"

🚀 Next: Ticket Pricing & Schedule Section!

Di Part 3, kita bakal tambahkan:

  • Ticket pricing section (Presale, Regular, VIP dengan benefits)
  • Schedule/rundown section (timeline penampilan bands)
  • Customization untuk harga & waktu
  • Highlight headliner band

Ini section penting karena transparansi harga & jadwal bikin orang lebih percaya & lebih likely untuk daftar!

Estimated time: ~25 menit

Udah excited? Let's continue! 💳🕒

📁 File Structure Update

Sekarang folder kamu harusnya kayak gini:

konser-landing/
└── index.html  ← Hero + Lineup sections inside ✅

File size: ~10-15 KB (cukup kecil, fast loading!)

Kalau nanti pakai gambar:

konser-landing/
├── index.html
└── images/
    ├── poster.jpg       ← Poster event
    ├── band1.jpg        ← The Soundwaves
    ├── band2.jpg        ← Midnight Echo
    └── band3.jpg        ← dst...

Navigation:

  • ✅ Part 1: Intro & Persiapan
  • ✅ Part 2: Hero + Lineup Section ← Kamu di sini
  • ⏭️ Part 3: Ticket + Schedule Section
  • ⏭️ Part 4: Registration Form + Footer
  • ⏭️ Part 5: Styling + Deploy

Part 3: Ticket Pricing + Schedule Section

🎯 Goal: Transparansi Harga & Timeline

Di part ini, kita akan tambahkan dua section penting:

💳 Ticket Pricing:

  • Biar pengunjung tau budget yang harus disiapkan
  • Clear pricing = less questions di DM
  • Showing value dengan list benefits per tier
  • Build urgency dengan label "Limited!" atau "Best Value!"

🕒 Schedule/Rundown:

  • Biar orang tau jam berapa band favorit mereka tampil
  • Nggak miss the headliner!
  • Planning: "Gue dateng jam 8 aja, ngejar band X"
  • Professional impression: event yang terorganisir dengan baik

Transparency is key untuk build trust! 🔑

📐 Visual Structure

Ini layout yang akan kita bikin:

┌──────────────────────────────────────────────────┐
│                                                  │
│         💳 TICKET PRICING SECTION 💳            │
│              "Pilih Tiket Kamu"                  │
│                                                  │
│  ┌──────────────┐ ┌──────────────┐ ┌──────────┐ │
│  │   PRESALE    │ │   REGULAR    │ │   VIP    │ │
│  │   [Badge:    │ │              │ │ [Badge:  │ │
│  │   Limited!]  │ │              │ │  Best!]  │ │
│  │              │ │              │ │          │ │
│  │  Rp 50.000   │ │  Rp 75.000   │ │ Rp 150K  │ │
│  │              │ │              │ │          │ │
│  │  ✓ Entry     │ │  ✓ Entry     │ │✓ Priority│ │
│  │  ✓ Sticker   │ │  ✓ Sticker   │ │✓ Meet &  │ │
│  │  ✓ Early     │ │              │ │  Greet   │ │
│  │              │ │              │ │✓ Merch   │ │
│  │              │ │              │ │✓ Drink   │ │
│  └──────────────┘ └──────────────┘ └──────────┘ │
│                                                  │
│      Responsive: 3 cols → 1 col (mobile)         │
└──────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────┐
│                                                  │
│         🕒 SCHEDULE SECTION 🕒                   │
│          "Rundown Acara"                         │
│    "Jangan sampai ketinggalan band favorit!"    │
│                                                  │
│    ●━━━━ 18:00 - Doors Open                     │
│    │     (Registrasi & Check-in)                │
│    │                                             │
│    ●━━━━ 18:30 - The Locals                     │
│    │     Indie Folk                              │
│    │                                             │
│    ●━━━━ 19:15 - Cosmic Rays                    │
│    │     Post-Rock                               │
│    │                                             │
│    ●━━━━ 20:00 - Urban Poets                    │
│    │     Indie Pop                               │
│    │                                             │
│    ●━━━━ 20:45 - Midnight Echo                  │
│    │     Alternative                             │
│    │                                             │
│    ⭐━━━ 21:30 - The Soundwaves                 │
│    │     HEADLINER - Indie Rock                 │
│    │                                             │
│    ●━━━━ 22:30 - Closing & Outro                │
│                                                  │
│    Timeline: vertical dengan dots & connectors  │
│    Headliner: highlighted dengan bintang ⭐     │
└──────────────────────────────────────────────────┘

Clean timeline yang mudah dibaca, bahkan di mobile! 📱

💳 Step 1: Prompt untuk Ticket Pricing Section

Sekarang kita tambahkan ticket pricing ke HTML yang udah ada.

Buka AI Assistant kamu, lalu paste prompt ini:

Tambahkan TICKET PRICING SECTION ke dalam HTML (setelah Lineup section) dengan:

JUDUL & SUBTITLE:
- Judul: "TICKET" atau "HARGA TIKET"
- Subtitle: "Pilih tiket yang sesuai dengan budget kamu"

TICKET TIERS (grid 3 kolom, responsive):

1. PRESALE (Early Bird)
   - Harga: [ISI HARGA PRESALE]
   - Badge/Label: "Limited!" atau "Early Bird" (warna merah/orange, standout)
   - Benefits:
     * [Benefit 1]
     * [Benefit 2]
     * [Benefit 3]

2. REGULAR
   - Harga: [ISI HARGA REGULAR]
   - Tanpa badge (standard tier)
   - Benefits:
     * [Benefit 1]
     * [Benefit 2]

3. VIP (Premium)
   - Harga: [ISI HARGA VIP]
   - Badge/Label: "Best Value!" atau "Premium" (warna gold/yellow)
   - Benefits:
     * [Benefit 1]
     * [Benefit 2]
     * [Benefit 3]
     * [Benefit 4]

DESIGN REQUIREMENTS:
- Card-based layout dengan border atau shadow
- Hover effect: card lift up sedikit + shadow lebih dalam
- Icon checkmark (✓) untuk setiap benefit
- Harga: font besar, bold, prominent
- Badge: absolute positioned di pojok kanan atas card
- Responsive:
  * Desktop: 3 kolom side-by-side
  * Tablet: 2 kolom (VIP di row baru, centered)
  * Mobile: 1 kolom (stack vertical)
- VIP card bisa sedikit highlighted (border lebih terang atau subtle glow)

SPACING:
- Section padding: py-16 atau py-20
- Card gap: gap-6 atau gap-8
- Internal card padding: p-6 atau p-8

Tambahkan ke file HTML yang sudah ada, jangan replace yang lain.

Placeholder yang perlu diganti:

  • [ISI HARGA PRESALE] → contoh: Rp 50.000
  • [Benefit 1], [Benefit 2], dll → list keuntungan tiap tier

✍️ Step 2: Contoh Prompt yang Sudah Diisi

Ini contoh lengkap untuk "Jakarta Indie Night":

Tambahkan TICKET PRICING SECTION ke HTML (setelah Lineup section):

JUDUL & SUBTITLE:
- Judul: "HARGA TIKET"
- Subtitle: "Pilih tiket yang sesuai dengan budget kamu"

TICKET TIERS (grid 3 kolom):

1. PRESALE (Early Bird)
   - Harga: Rp 50.000
   - Badge: "Limited 50 Tiket!" (warna merah, blink subtle)
   - Benefits:
     * Akses masuk venue
     * 1 free sticker eksklusif
     * Early entry (17:30 WIB)

2. REGULAR
   - Harga: Rp 75.000
   - Tanpa badge
   - Benefits:
     * Akses masuk venue
     * 1 free sticker eksklusif

3. VIP (Premium)
   - Harga: Rp 150.000
   - Badge: "Best Value!" (warna gold)
   - Benefits:
     * Priority seating area (depan stage)
     * Meet & greet dengan semua bands
     * Exclusive merchandise (tote bag + pin)
     * 1 free drink voucher

DESIGN:
- Card dengan border gradient (sesuai color scheme)
- Hover: transform scale(1.05) + shadow lebih dalam
- Checkmark icon untuk benefits (bisa pakai emoji ✓ atau SVG)
- Harga: text-4xl atau text-5xl, font-bold
- Badge: absolute top-2 right-2, px-3 py-1, rounded-full
- VIP card: border lebih tebal + subtle glow effect
- Responsive: 3 cols desktop, 1 col mobile

Tambahkan setelah lineup section, sebelum closing tag body.

Copy prompt di atas → paste ke AI → Enter! 🚀

AI akan kasih code untuk ticket section. Copy code-nya, kita akan paste ke Cursor.

🕒 Step 3: Prompt untuk Schedule Section

Setelah ticket pricing, sekarang kita bikin schedule/rundown acara.

Prompt untuk AI:

Tambahkan SCHEDULE/RUNDOWN SECTION ke HTML (setelah Ticket section):

JUDUL & SUBTITLE:
- Judul: "RUNDOWN ACARA" atau "JADWAL"
- Subtitle: "Jangan sampai ketinggalan band favorit kamu!"

TIMELINE (vertical timeline design):
- Format: [JAM] - [KEGIATAN/NAMA BAND]
- Timeline items:
  * [JAM 1] - [KEGIATAN 1]
  * [JAM 2] - [BAND 1] - [GENRE]
  * [JAM 3] - [BAND 2] - [GENRE]
  * [JAM 4] - [BAND 3] - [GENRE]
  * [JAM 5] - [BAND 4] - [GENRE]
  * [JAM 6] - [HEADLINER BAND] - [GENRE] ⭐ (HIGHLIGHTED)
  * [JAM 7] - [CLOSING]

DESIGN REQUIREMENTS:
- Vertical timeline dengan line connector (solid atau dotted line)
- Dot/circle untuk setiap time point
- Line menghubungkan antar dots (vertical)
- Headliner band:
  * Dot lebih besar
  * Bintang icon (⭐ atau SVG star)
  * Text lebih bold
  * Background highlight atau border
- Waktu (jam): text-lg, font-semibold, warna accent
- Nama band: text-xl, font-bold
- Genre: text-sm, warna muted (gray)

LAYOUT:
- Container: max-w-2xl atau max-w-3xl, mx-auto (centered)
- Timeline di tengah atau sedikit ke kiri
- Timeline items: space-y-6 atau space-y-8
- Mobile friendly: stack vertical dengan baik

VISUAL ELEMENTS:
- Dots: w-4 h-4, rounded-full, background accent color
- Line: border-l-2, border color sama dengan dots
- Headliner dot: w-6 h-6 (lebih besar)
- Subtle animation saat scroll (fade in) - optional

Tambahkan setelah ticket section.

✍️ Step 4: Contoh Schedule Prompt Terisi

Ini contoh lengkap untuk "Jakarta Indie Night":

Tambahkan SCHEDULE/RUNDOWN SECTION:

JUDUL: "RUNDOWN ACARA"
SUBTITLE: "Catat jadwalnya biar nggak ketinggalan!"

TIMELINE (vertical):
- 18:00 - Doors Open (Registrasi & Check-in)
- 18:30 - The Locals - Indie Folk
- 19:15 - Cosmic Rays - Post-Rock
- 20:00 - Urban Poets - Indie Pop
- 20:45 - Midnight Echo - Alternative
- 21:30 - The Soundwaves - Indie Rock ⭐ HEADLINER
- 22:30 - Closing & Outro

DESIGN:
- Vertical timeline, centered
- Dots: w-3 h-3, bg-orange-500 (sesuai accent color)
- Line: border-l-2, border-orange-500/30 (semi-transparent)
- Headliner (The Soundwaves):
  * Dot: w-5 h-5, pulse animation subtle
  * Bintang icon ⭐
  * Background: bg-orange-500/10, border-l-4 border-orange-500
  * Text: font-extrabold, text-2xl
  * Badge: "HEADLINER" (small, di samping nama)
- Waktu: text-orange-400, font-semibold, text-lg
- Nama band: text-white, font-bold, text-xl
- Genre: text-gray-400, text-sm, italic

LAYOUT:
- max-w-3xl mx-auto
- py-16 section padding
- space-y-8 antar timeline items

Tambahkan setelah ticket pricing section.

Copy prompt → paste ke AI → code generated! ✨

💻 Step 5: Update Code di Cursor

Sekarang kita punya code untuk 2 sections baru: Ticket & Schedule.

Cara update:

OPTION A: AI kasih full HTML (replace all)

  1. Copy semua code dari AI
  2. Buka Cursor, select all (Ctrl+A)
  3. Paste (Ctrl+V) → replace semua
  4. Save (Ctrl+S)

OPTION B: AI kasih snippet/potongan

  1. Cari lokasi di Cursor dimana harus paste (biasanya sebelum </body>)
  2. Paste code baru di sana
  3. Save

Cara cepat cari lokasi paste:

  • Press Ctrl+F di Cursor
  • Search: </body> atau <!-- Footer --> atau section terakhir kamu
  • Paste code SEBELUM tag tersebut

After paste:

  1. Save file (Ctrl+S)
  2. Refresh browser (F5 atau Cmd+R)
  3. Scroll ke bawah
  4. Lihat ticket pricing section muncul! 💳
  5. Scroll lagi, lihat schedule timeline! 🕒

🎉 Boom! Website makin lengkap!

🎨 Step 6: Common Adjustments

Setelah lihat hasilnya, mungkin ada yang mau di-tweak:

A. Ubah Harga Tiket

Kalau harga berubah atau mau adjust:

Cara manual (quick):

  1. Di Cursor, Ctrl+F
  2. Search: "Rp 50.000" (harga yang mau diganti)
  3. Replace dengan harga baru: "Rp 60.000"
  4. Save & refresh

Atau minta AI:

Ubah harga tiket:
- Presale: dari Rp 50.000 menjadi Rp 45.000
- Regular: dari Rp 75.000 menjadi Rp 70.000
- VIP: tetap Rp 150.000

B. Ganti Warna Badge

Kalau warna badge "Limited!" atau "Best Value!" kurang standout:

Ubah warna badge:
- Presale badge "Limited!": background merah (#ef4444), text putih, subtle pulse animation
- VIP badge "Best Value!": background gold (#f59e0b), text hitam, shimmer effect

C. Tambah Benefit ke Tier Tertentu

Kalau mau tambah benefit:

Tambahkan benefit ke VIP tier:
- Tambah: "✓ Photo booth access"
- Tambah: "✓ Fast-track entry"

Update VIP benefits list.

D. Ubah Waktu di Schedule

Kalau rundown berubah:

Cara manual:

  1. Ctrl+F, search waktu yang mau diganti (contoh: "18:30")
  2. Ganti dengan waktu baru
  3. Save & refresh

Atau minta AI:

Update schedule timeline:
- Ganti "18:30 - The Locals" menjadi "19:00 - The Locals"
- Ganti "21:30 - The Soundwaves" menjadi "22:00 - The Soundwaves"
- Adjust semua waktu setelahnya (shift +30 menit)

E. Highlight Band Tertentu (Bukan Cuma Headliner)

Kalau ada band lain yang spesial:

Tambahkan highlight ke "Midnight Echo":
- Background: bg-purple-500/10
- Border kiri: border-l-4 border-purple-500
- Icon: 🎤 (microphone)
- Text: sedikit lebih besar (text-xl)
- Note: "Special Guest"

F. Tambah Countdown Timer

Kalau mau countdown ke event date:

Tambahkan countdown timer di atas ticket section:
- Format: "Event dimulai dalam: X Hari, Y Jam, Z Menit"
- Style: text besar, centered, accent color
- JavaScript countdown real-time
- Target date: [ISI TANGGAL EVENT]

Update setiap detik.

🎯 Step 7: Tips Pricing Strategy

Berapa harga yang ideal?

Ini tergantung:

  • Venue cost
  • Band/artis fee
  • Target audience
  • Kompetitor (konser serupa)

Rule of thumb:

🎫 PRESALE (Early Bird):
- 30-40% discount dari regular
- Limited quantity (20-30% dari total kapasitas)
- Create urgency!

🎫 REGULAR:
- Base price
- Bulk of sales (50-60% dari kapasitas)
- Fair value for experience

🎫 VIP:
- 2-3x dari regular price
- Premium benefits yang worth it
- Small quantity (10-20% dari kapasitas)

Example breakdown:

Venue capacity: 150 orang

PRESALE:  50 tiket × Rp 50.000  = Rp 2.500.000
REGULAR:  80 tiket × Rp 75.000  = Rp 6.000.000
VIP:      20 tiket × Rp 150.000 = Rp 3.000.000
───────────────────────────────────────────────
TOTAL:    150 tiket              = Rp 11.500.000

Expenses:
- Venue: Rp 3.000.000
- Bands: Rp 5.000.000 (total semua band)
- Sound system: Rp 1.500.000
- Merch/stickers: Rp 500.000
- Marketing: Rp 500.000
───────────────────────────────────────────────
TOTAL EXPENSES:         Rp 10.500.000

PROFIT (kalau sold out): Rp 1.000.000 ✅

Tips:

  • Start low: Lebih baik sold out dengan harga rendah daripada sepi dengan harga tinggi
  • Build track record: Event pertama = build audience, bukan profit maksimal
  • Value perception: VIP harus bener-bener worth it (meet & greet, merch exclusive, dll)

🎯 Step 8: Tips Schedule/Rundown

Berapa lama per band?

🎸 OPENING ACTS (support bands):
- 30-45 menit per band
- Cukup untuk showcase best songs
- Keep energy up, don't drag

🎤 HEADLINER:
- 60-90 menit
- Extended set, fan favorites + new songs
- Worth the wait!

⏰ TRANSITIONS:
- 15-20 menit antar band
- Setup instruments, sound check
- Jangan terlalu lama, audience bosan

Sample timeline calculation:

18:00 - Doors open (30 min buffer untuk orang datang)
18:30 - Band 1 (45 min)
19:15 - Transition (15 min)
19:30 - Band 2 (45 min)  ← WAIT, ini harusnya 19:15 + 15 = 19:30?

Let me recalculate:
18:30 - Band 1 START
19:15 - Band 1 END (45 min set)
19:15 - Transition start
19:30 - Band 2 START
20:15 - Band 2 END
20:15 - Transition
20:30 - Band 3 START
21:15 - Band 3 END
21:15 - Transition
21:30 - HEADLINER START
23:00 - HEADLINER END (90 min set)
23:00 - Outro & closing

Pro tips:

  • Buffer time: Always add 15-30 min buffer total (technical delays happen!)
  • Peak time: Put headliner at 21:00-22:00 (prime time)
  • Don't start too late: Indonesian audience biasanya pulang malam, tapi jangan over midnight kalau weekday

✅ Checkpoint: Ticket + Schedule Section Done!

Cek dulu sebelum lanjut ke Part 4:

✅ TICKET PRICING CHECKLIST:

☐ Section muncul setelah Lineup
☐ 3 tiers tampil: Presale, Regular, VIP
☐ Harga jelas untuk setiap tier
☐ Benefits/keuntungan listed per tier
☐ Badge "Limited!" muncul di Presale
☐ Badge "Best Value!" muncul di VIP
☐ Card hover effect berfungsi (scale up saat hover)
☐ Responsive: 3 cols desktop, 1 col mobile
☐ Icon checkmark (✓) muncul di benefits

✅ SCHEDULE SECTION CHECKLIST:

☐ Section muncul setelah Ticket Pricing
☐ Semua waktu & bands listed chronologically
☐ Timeline vertical dengan dots & connectors
☐ Headliner highlighted (bintang ⭐, bolder text)
☐ Waktu (jam) readable
☐ Genre setiap band muncul
☐ "Doors Open" dan "Closing" ada
☐ Tidak ada typo di jam atau nama band
☐ Mobile responsive (timeline tetap rapi)

✅ OVERALL CHECKLIST:

☐ Pricing masuk akal (nggak terlalu murah atau mahal)
☐ Schedule timeline realistic (cukup waktu per band)
☐ Transition antar sections smooth
☐ Color scheme consistent
☐ No overlapping elements
☐ Fast loading (file size masih < 50KB)

PROGRESS: [████████████░░] 70% 🔥

Kalau semua udah ✅: 🎉 Mantap! Ticket & Schedule section kamu professional banget!

Kalau ada yang missing:

  • Review step yang terlewat
  • Test di browser (resize untuk cek responsive)
  • Tanya AI kalau ada yang error

💡 Advanced: Dynamic Pricing Timer

Kalau mau lebih advance, bikin countdown untuk presale:

Prompt ke AI:
"Tambahkan countdown timer di Presale card:
- Text: 'Presale berakhir dalam: X Hari, Y Jam'
- Target: [ISI TANGGAL PRESALE BERAKHIR]
- Update real-time dengan JavaScript
- Style: small text di bawah harga, warna merah
- Kalau countdown habis, ganti text jadi 'SOLD OUT' atau hide Presale card"

Ini create urgency yang real! ⏰🔥

🚀 Next: Registration Form + Footer!

Di Part 4, kita bakal:

  • Embed Google Forms untuk pendaftaran
  • Bikin payment instruction yang jelas
  • Setup WhatsApp contact link
  • Bikin footer dengan social media & contact info
  • Test submit form (end-to-end flow)

Ini adalah section paling penting karena ini where conversion happens! 📝💰

Estimated time: ~30 menit

Almost there! 🎯

📁 File Structure Update

konser-landing/
└── index.html
    ├── Hero section ✅
    ├── Lineup section ✅
    ├── Ticket Pricing section ✅
    └── Schedule section ✅

Current file size: ~20-25 KB
Still fast & lightweight! ⚡

Navigation:

  • ✅ Part 1: Intro & Persiapan
  • ✅ Part 2: Hero + Lineup Section
  • ✅ Part 3: Ticket + Schedule Section ← Kamu di sini
  • ⏭️ Part 4: Registration Form + Footer
  • ⏭️ Part 5: Styling + Deploy

Part 4: Registration Form + Footer

🎯 Goal: Bikin Pendaftaran Semudah Mungkin

Part ini adalah bagian paling krusial dari landing page kamu. Kenapa?

📝 Registration Form = Where Money Happens!

  • Hero section → menarik perhatian ✅
  • Lineup → build excitement ✅
  • Ticket pricing → transparansi harga ✅
  • Schedule → planning waktu ✅
  • Registration → CONVERSION! 💰

Kalau form-nya ribet, loading lama, atau nggak jelas, orang akan abandon. Makanya kita harus bikin:

  • Form yang mudah diisi (nggak banyak field)
  • Instruction yang super jelas (cara bayar, upload bukti)
  • Contact yang fast response (WhatsApp!)
  • Footer yang professional (social proof)

Let's make it happen! 🚀

📐 Visual Structure

┌────────────────────────────────────────────────┐
│                                                │
│       📝 REGISTRATION SECTION 📝              │
│           "Daftar Sekarang"                    │
│     "Amankan tiket kamu sebelum sold out!"    │
│                                                │
│  ┌──────────────────────────────────────┐    │
│  │  📌 CARA DAFTAR:                     │    │
│  │                                       │    │
│  │  1️⃣ Isi form pendaftaran di bawah    │    │
│  │  2️⃣ Transfer sesuai kategori tiket   │    │
│  │     BCA 1234567890                    │    │
│  │     a.n Jakarta Indie Night           │    │
│  │  3️⃣ Upload bukti transfer di form    │    │
│  │  4️⃣ Tunggu konfirmasi via WhatsApp   │    │
│  │     (max 1x24 jam)                    │    │
│  └──────────────────────────────────────┘    │
│                                                │
│  ┌──────────────────────────────────────┐    │
│  │                                       │    │
│  │    [GOOGLE FORMS EMBEDDED HERE]       │    │
│  │                                       │    │
│  │    - Nama Lengkap                     │    │
│  │    - Email                            │    │
│  │    - No. WhatsApp                     │    │
│  │    - Kategori Tiket                   │    │
│  │    - Sudah Transfer?                  │    │
│  │    - Upload Bukti Transfer            │    │
│  │                                       │    │
│  │         [SUBMIT BUTTON]               │    │
│  │                                       │    │
│  └──────────────────────────────────────┘    │
│                                                │
│  💬 Butuh bantuan?                            │
│  [WhatsApp: 0812-3456-7890]                   │
│                                                │
└────────────────────────────────────────────────┘

┌────────────────────────────────────────────────┐
│                                                │
│            📱 FOOTER SECTION 📱               │
│                                                │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐    │
│  │  ABOUT   │  │  FOLLOW  │  │ CONTACT  │    │
│  │          │  │          │  │          │    │
│  │ Event    │  │ Instagram│  │ Email    │    │
│  │ Name +   │  │ Twitter  │  │ WhatsApp │    │
│  │ Tagline  │  │ TikTok   │  │ Location │    │
│  └──────────┘  └──────────┘  └──────────┘    │
│                                                │
│  © 2025 Jakarta Indie Night. Made with ❤️    │
│                                                │
└────────────────────────────────────────────────┘

Clean, clear, dan conversion-focused! 💯

📝 Step 1: Review Google Forms (Sudah Dibuat di Part 1)

Sebelum kita embed form, pastikan Google Forms kamu udah ready!

Buka Google Forms yang udah kamu bikin di Part 1:

  1. Login ke Google Forms (forms.google.com)
  2. Buka form "Pendaftaran [Nama Event]"
  3. Verifikasi semua pertanyaan ada:
✅ FORM CHECKLIST:

☐ Nama Lengkap (Short answer, Required)
☐ Email (Short answer, Required)
☐ No. WhatsApp (Short answer, Required)
☐ Kategori Tiket (Multiple choice, Required)
   ○ Presale - Rp 50.000
   ○ Regular - Rp 75.000
   ○ VIP - Rp 150.000
☐ Sudah Transfer? (Multiple choice, Required)
   ○ Sudah
   ○ Belum
☐ Upload Bukti Transfer (File upload, Optional)
   - Max 1 file
   - Type: Image, PDF
   - Max size: 10 MB

Kalau ada yang kurang:

  • Tambah pertanyaan sekarang
  • Save form
  • Lanjut ke step berikutnya

🔗 Step 2: Get Embed Code dari Google Forms

Sekarang kita ambil embed code dari Google Forms untuk dipasang di website.

Langkah-langkah:

  1. Di Google Forms, klik "Send" (button pojok kanan atas)
  2. Modal popup muncul dengan 3 tabs:
    • Email (✉️)
    • Link (🔗)
    • Embed HTML (</>) ← Klik ini!
  3. Copy Embed Code:
    • Di tab Embed HTML, akan muncul code kayak gini:
    <iframe src="<https://docs.google.com/forms/d/e/1FAIpQLSc.../viewform?embedded=true>" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe>
    • Klik "Copy" button
    • Atau select all (Ctrl+A) → copy (Ctrl+C)
  4. Paste ke Notepad/Notes
    • Save dulu embed code ini
    • Kita akan paste ke prompt AI nanti

PENTING:

  • Jangan close tab Google Forms!
  • Embed code ini unique untuk form kamu
  • Kalau hilang, bisa ambil lagi dengan cara yang sama

🤖 Step 3: Prompt untuk Registration Section

Sekarang kita minta AI bikin registration section dengan form embedded.

Buka AI Assistant, paste prompt ini:

Tambahkan REGISTRATION SECTION ke HTML (setelah Schedule section):

JUDUL & SUBTITLE:
- Judul: "DAFTAR SEKARANG" atau "PENDAFTARAN"
- Subtitle: "Amankan tiket kamu sebelum sold out!"

INSTRUCTION BOX (di atas form):
- Background: sedikit berbeda dari main background (lighter atau dengan border)
- Icon: 📌 atau 📝
- Title: "Cara Daftar:"
- Steps (numbered list):
  1. Isi form pendaftaran di bawah
  2. Transfer sesuai kategori tiket ke:
     [BANK] [NOMOR REKENING]
     a.n [NAMA PENERIMA]
  3. Upload bukti transfer di form
  4. Tunggu konfirmasi via WhatsApp (max 1x24 jam)
- Style: card dengan padding, border atau shadow

EMBEDDED GOOGLE FORM:
[PASTE EMBED CODE DARI GOOGLE FORMS DI SINI]

Modifikasi embed code:
- Width: 100% (responsive)
- Height: 1200px (atau sesuaikan dengan form length)
- Border: none atau subtle border
- Rounded corners
- Center aligned

CONTACT BUTTON (di bawah form):
- Text: "💬 Butuh bantuan? Chat kami di WhatsApp"
- Button style: outline atau secondary style
- Link WhatsApp: wa.me/[NOMOR_WA_TANPA_NOLL_DAN_TANPA_SPASI]
  Contoh: wa.me/6281234567890
- Pre-filled message: "Halo, saya butuh bantuan untuk pendaftaran [Nama Event]"

DESIGN:
- Section background: sedikit berbeda (create visual separation)
- Max-width: max-w-4xl, centered
- Padding: py-16 atau py-20
- Form container: bg-white atau bg-gray-900 (tergantung theme)
- Spacing antar elements: space-y-8

Tambahkan setelah schedule section.

Yang perlu diganti:

  • [BANK] → contoh: BCA, Mandiri, BNI
  • [NOMOR REKENING] → nomor rekening kamu
  • [NAMA PENERIMA] → nama penerima (sesuai rekening)
  • [PASTE EMBED CODE...] → embed code yang tadi dicopy dari Google Forms
  • [NOMOR_WA_TANPA_NOLL...] → nomor WA organizer (format: 6281234567890)

✍️ Step 4: Contoh Prompt yang Sudah Diisi

Ini contoh lengkap untuk "Jakarta Indie Night":

Tambahkan REGISTRATION SECTION:

JUDUL: "DAFTAR SEKARANG"
SUBTITLE: "Amankan tiket kamu sebelum sold out!"

INSTRUCTION BOX:
- Background: bg-orange-500/10, border-l-4 border-orange-500
- Icon: 📌
- Title: "Cara Daftar:"
- Steps:
  1. Isi form pendaftaran di bawah dengan lengkap
  2. Transfer sesuai kategori tiket ke:
     BCA 1234567890
     a.n Jakarta Indie Night
  3. Upload bukti transfer di form
  4. Tunggu konfirmasi via WhatsApp dalam 1x24 jam

EMBEDDED GOOGLE FORM:
<iframe src="<https://docs.google.com/forms/d/e/1FAIpQLSc_contoh_form_id/viewform?embedded=true>"
width="640" height="1200" frameborder="0" marginheight="0" marginwidth="0">
Loading…
</iframe>

Modifikasi:
- Width: w-full (100%)
- Height: h-[1200px]
- Rounded: rounded-lg
- Center: mx-auto

CONTACT BUTTON:
- Text: "💬 Butuh bantuan? Chat kami di WhatsApp"
- Style: border-2 border-orange-500, hover:bg-orange-500, transition
- Link: <https://wa.me/6281234567890?text=Halo%2C%20saya%20butuh%20bantuan%20untuk%20pendaftaran%20Jakarta%20Indie%20Night>
  (Note: %20 = spasi, %2C = koma - URL encoded)
- Open in new tab: target="_blank"

DESIGN:
- Section bg: bg-gray-900 (kontras dengan bg-black main)
- Max-width: max-w-4xl mx-auto
- Padding: py-20
- Form container: bg-white/5 backdrop-blur, p-8, rounded-xl

Tambahkan setelah schedule section.

Copy prompt → paste ke AI → get the code! 🚀

📱 Step 5: Setup WhatsApp Link (PENTING!)

WhatsApp link sangat penting untuk fast response! Ini cara setup-nya dengan benar:

Format WhatsApp Link:

<https://wa.me/[COUNTRY_CODE][NOMOR_TANPA_0]>

Contoh:

  • Nomor WA: 0812-3456-7890
  • Country code Indonesia: 62
  • Remove first 0: 812-3456-7890
  • Remove dashes: 81234567890
  • Full number: 6281234567890
  • Final link: https://wa.me/6281234567890

Dengan Pre-filled Message:

<https://wa.me/6281234567890?text=Halo%2C%20saya%20butuh%20bantuan%20untuk%20pendaftaran%20Jakarta%20Indie%20Night>

URL Encoding untuk spasi & karakter khusus:

  • Spasi = %20
  • Koma = %2C
  • Tanda tanya = %3F
  • Titik = . (nggak perlu encode)

Tool untuk encode:

  • Google "URL encoder"
  • Atau pakai: encodeURIComponent("text kamu") di browser console

Contoh lengkap:

<a href="<https://wa.me/6281234567890?text=Halo%2C%20saya%20butuh%20bantuan%20untuk%20pendaftaran%20Jakarta%20Indie%20Night>"
   target="_blank"
   class="...">
   💬 Chat WhatsApp
</a>

Test WhatsApp link:

  1. Copy link
  2. Paste di browser
  3. Enter → buka WhatsApp Web atau app
  4. Pre-filled message muncul
  5. Kalau berhasil → ✅ link correct!

🎨 Step 6: Prompt untuk Footer Section

Footer adalah penutup yang professional. Ini wajib ada!

Prompt untuk AI:

Tambahkan FOOTER SECTION di paling bawah HTML (sebelum </body>):

LAYOUT:
- 3 kolom di desktop
- 1 kolom di mobile (stack vertical)
- Background: berbeda dari main sections (darker atau lighter)
- Border top: thin line (border-t)

COLUMN 1 - ABOUT:
- Event name (logo style atau text besar)
- Tagline event (1 line)
- Short description (2-3 lines)

COLUMN 2 - FOLLOW US:
- Title: "Follow Us" atau "Ikuti Kami"
- Social media links (with icons):
  * Instagram: [HANDLE]
  * Twitter/X: [HANDLE]
  * TikTok: [HANDLE]
- Icons: pakai emoji atau SVG icons
- Links open in new tab

COLUMN 3 - CONTACT:
- Title: "Contact" atau "Kontak"
- Email: [EMAIL]
- WhatsApp: [NOMOR]
- Location: [VENUE/CITY]

BOTTOM BAR:
- Copyright text: "© 2025 [Event Name]. Made with ❤️"
- Optional: "Powered by [Organizer Name]"
- Center aligned
- Smaller text (text-sm)
- Muted color (gray)

DESIGN:
- Padding: py-12 atau py-16
- Column gap: gap-8 atau gap-12
- Text colors: muted (gray-400)
- Links: hover effect (color change + underline)
- Icons: inline dengan text atau di atas
- Responsive: stack columns di mobile

Tambahkan di paling bawah, sebelum </body> tag.

✍️ Step 7: Contoh Footer Prompt Terisi

Tambahkan FOOTER SECTION:

LAYOUT: 3 kolom desktop, 1 kolom mobile

COLUMN 1 - ABOUT:
- Event: "Jakarta Indie Night"
- Tagline: "Malam penuh energi dengan band-band indie terbaik Jakarta"
- Description: "Event musik indie tahunan yang menghadirkan talenta-talenta lokal terbaik. Nikmati musik berkualitas dalam suasana intim dan penuh semangat."

COLUMN 2 - FOLLOW US:
- Title: "Ikuti Kami"
- Links:
  * Instagram: @jakartaindienight
    URL: <https://instagram.com/jakartaindienight>
  * Twitter: @jktindienight
    URL: <https://twitter.com/jktindienight>
  * TikTok: @jakartaindienight
    URL: <https://tiktok.com/@jakartaindienight>
- Icons: emoji 📱 atau SVG
- Target: _blank

COLUMN 3 - CONTACT:
- Title: "Kontak"
- Email: [email protected] (mailto link)
- WhatsApp: 0812-3456-7890 (wa.me link)
- Location: Jakarta Selatan, Indonesia

BOTTOM BAR:
- Text: "© 2025 Jakarta Indie Night. Made with ❤️ by BuildWithAngga"
- Align: center
- Text: text-sm, text-gray-500

DESIGN:
- Background: bg-black atau bg-gray-950
- Border top: border-t border-gray-800
- Padding: py-16
- Max-width: max-w-7xl mx-auto
- Gap: gap-12
- Link hover: text-orange-400 transition

Tambahkan sebelum </body>.

Copy → paste ke AI → done! ✨

💻 Step 8: Update Code & Test Everything

Sekarang kita update code di Cursor dan test semua functionality!

Update code:

  1. Copy code dari AI (registration + footer sections)
  2. Buka Cursor
  3. Cari </body> tag (Ctrl+F)
  4. Paste code SEBELUM </body>
  5. Save (Ctrl+S)
  6. Refresh browser (F5)

Scroll ke bawah:

  • Registration section muncul! 📝
  • Instruction box ada
  • Google Form embedded
  • WhatsApp button ada
  • Footer muncul di paling bawah!

✅ Step 9: CRITICAL - Test Checklist

Ini super penting. Test semua sebelum deploy!

🧪 TESTING CHECKLIST - DO NOT SKIP!

FORM TESTING:
☐ Form bisa diisi (semua fields accessible)
☐ Required fields marked dengan * (asterisk)
☐ Dropdown "Kategori Tiket" berfungsi
☐ File upload button muncul
☐ Submit button clickable

SUBMISSION TEST:
☐ Isi form dengan data dummy:
  - Nama: Test User
  - Email: [email protected]
  - WA: 0812345678
  - Tiket: Regular
  - Transfer: Belum
  - Upload: skip (atau upload gambar random)
☐ Click "Submit"
☐ Konfirmasi "Your response has been recorded" muncul
☐ Buka Google Forms → tab "Responses"
☐ Data test tadi muncul di Sheets ✅

WHATSAPP LINK TEST:
☐ Click WhatsApp button
☐ WhatsApp Web/App terbuka
☐ Pre-filled message muncul di chat box
☐ Message benar: "Halo, saya butuh bantuan..."
☐ Nomor yang dibuka benar (organizer number)

FOOTER LINKS TEST:
☐ Instagram link → buka Instagram (new tab)
☐ Twitter link → buka Twitter (new tab)
☐ TikTok link → buka TikTok (new tab)
☐ Email link → buka email client (mailto:)
☐ WhatsApp link → buka WhatsApp
☐ Semua links nggak ada typo di URL

MOBILE RESPONSIVE TEST:
☐ Resize browser window (narrow)
☐ Form tetap readable
☐ Footer stack vertical (1 kolom)
☐ WhatsApp button accessible
☐ No horizontal scroll

Kalau ada yang FAIL:

  • Screenshot error
  • Copy error message
  • Tanya AI: "Error: [paste error message]. How to fix?"
  • Implement fix
  • Test lagi

Jangan skip testing! Ini yang bikin conversion happen atau nggak. 🎯

🎨 Step 10: Common Adjustments

A. Ganti Bank Account

Ubah payment instruction:
- Ganti dari "BCA 1234567890" ke "Mandiri 9876543210"
- Ganti nama penerima ke "[Nama Baru]"
- Update di instruction box

B. Tambah Payment Method (E-wallet)

Tambahkan opsi pembayaran e-wallet:
- Di instruction step 2, tambah:
  "Atau transfer via:
   GoPay: 0812-3456-7890
   OVO: 0812-3456-7890
   Dana: 0812-3456-7890"
- Format: icon + nomor

C. Ubah Pre-filled WhatsApp Message

Ganti pre-filled message WhatsApp button menjadi:
"Halo! Saya tertarik untuk daftar Jakarta Indie Night. Bisa bantu info lebih lanjut?"

Update URL encoding dengan benar.

D. Tambah FAQ Section (Optional)

Tambahkan FAQ section sebelum Registration:
- Title: "Frequently Asked Questions"
- Questions (accordion/expand):
  1. Apakah tiket bisa refund?
  2. Apa yang harus dibawa saat event?
  3. Apakah ada dress code?
  4. Boleh bawa kamera?
  5. Parkir dimana?
- Style: accordion dengan icon expand/collapse

E. Change Form Height

Kalau Google Form terlalu panjang atau terpotong:

Di code HTML, cari:
<iframe ... height="1200" ...>

Ganti height:
- Terlalu pendek (terpotong): ganti ke 1500 atau 1800
- Terlalu panjang (banyak whitespace): ganti ke 1000 atau 900

Save & refresh untuk lihat perubahan.

🔒 Step 11: Data Privacy & Security Note

PENTING untuk user:

Google Forms by default:

  • ✅ Data encrypted (HTTPS)
  • ✅ Stored di Google Sheets (secure)
  • ✅ Bisa set "Limit 1 response per user"

Best practice:

  • Jangan minta info sensitif yang nggak perlu (KTP, alamat rumah lengkap)
  • Cukup: Nama, Email, WA, Kategori Tiket, Bukti Transfer
  • Add privacy note di form description: "Data kamu aman dan hanya digunakan untuk keperluan event."

Untuk organizer:

  • Jangan share Google Sheets dengan sembarang orang
  • Set permission: "Only you" atau "Specific people"
  • Download backup data secara berkala
  • Delete data setelah event selesai (privacy compliance)

✅ Checkpoint: Registration + Footer Done!

Cek final sebelum deploy:

✅ REGISTRATION SECTION CHECKLIST:

☐ Section title & subtitle ada
☐ Instruction box dengan 4 steps jelas
☐ Bank account info benar (no typo!)
☐ Google Form embedded successfully
☐ Form height appropriate (nggak terpotong)
☐ Form bisa disubmit (tested!)
☐ Responses masuk ke Google Sheets
☐ WhatsApp button ada & link berfungsi
☐ Pre-filled message benar
☐ Mobile responsive

✅ FOOTER SECTION CHECKLIST:

☐ 3 kolom: About, Follow, Contact
☐ Event name & tagline ada
☐ Social media links (Instagram, Twitter, TikTok)
☐ Email link (mailto:) berfungsi
☐ WhatsApp link berfungsi
☐ Location info ada
☐ Copyright text ada
☐ All links tested (no 404!)
☐ Links open in new tab
☐ Mobile: stack vertical (1 kolom)

✅ OVERALL INTEGRATION:

☐ Smooth scroll dari CTA button Hero → Registration works
☐ No overlapping sections
☐ Consistent color scheme
☐ All text readable (contrast OK)
☐ Fast loading (< 3 seconds)
☐ No console errors (F12 → Console clean)

PROGRESS: [██████████████] 90% 🔥🔥

Kalau semua ✅: 🎉 AMAZING! Landing page kamu HAMPIR SELESAI!

Tinggal 1 part lagi: Styling polish & deploy!

💡 Pro Tips - Maximize Conversions

1. Add Urgency

Di Registration section, tambah:
- "⏰ Presale berakhir dalam 3 hari!"
- "🔥 Hanya tersisa 20 tiket Regular!"
- "⚡ Daftar sekarang, bayar besok juga boleh!"

2. Social Proof

Sebelum Registration, tambah mini section:
- "Join 120+ orang yang sudah daftar!"
- Atau: testimonial singkat (1-2 quotes)

3. Trust Badges

Di bawah payment instruction:
- "🔒 Pembayaran aman & terpercaya"
- "✅ Konfirmasi otomatis via WhatsApp"
- "💯 100% uang kembali jika event cancel"

4. Clear CTA

Registration title bisa diganti:
- Dari: "Daftar Sekarang"
- Jadi: "Amankan Tiket Kamu!" → lebih action-oriented

🚀 Next: Final Styling + Deploy!

Di Part 5 (part terakhir!), kita bakal:

  • Polish color scheme (pilih dari 4 preset)
  • Fine-tune typography & spacing
  • Add final touches (animations, hover effects)
  • Deploy ke Vercel (go live!)
  • Get shareable URL
  • Testing di production
  • Celebration! 🎉

Estimated time: ~30 menit

This is it! The final push! 💪

📁 File Structure - Almost Complete!

konser-landing/
└── index.html
    ├── Hero section ✅
    ├── Lineup section ✅
    ├── Ticket Pricing section ✅
    ├── Schedule section ✅
    ├── Registration section ✅
    └── Footer ✅

Current file size: ~30-35 KB
All sections complete! 🎊

Next: Polish & Deploy!

Navigation:

  • ✅ Part 1: Intro & Persiapan
  • ✅ Part 2: Hero + Lineup Section
  • ✅ Part 3: Ticket + Schedule Section
  • ✅ Part 4: Registration Form + Footer ← Kamu di sini
  • ⏭️ Part 5: Styling + Deploy (FINAL!)

Part 5: Styling Polish + Deploy (FINAL!)

🎯 Goal: Polish & Go Live!

This is it! The final part! 🎉

Di part ini kita akan:

  • Polish styling: warna, typography, spacing yang consistent
  • Add final touches: animations, hover effects
  • Deploy ke Vercel: dari komputer local → live di internet
  • Get shareable URL: website kamu bisa diakses siapa aja
  • Test production: pastikan semua berfungsi di live site
  • Celebrate! 🎊

Setelah ini, kamu punya landing page konser yang siap dipromosikan dan menghasilkan conversions!

Let's finish strong! 💪

🎨 Step 1: Color Scheme Options

Warna adalah vibe dari landing page kamu. Pilih yang sesuai dengan genre musik event kamu!

4 Preset Color Schemes:

🎸 OPTION 1: INDIE ROCK (Dark & Edgy)
═══════════════════════════════════════
Background:  #0a0a0a (almost black)
Primary:     #ff3366 (hot pink/red)
Secondary:   #8b5cf6 (purple)
Accent:      #fbbf24 (amber/gold)
Text:        #ffffff (white)
Muted:       #9ca3af (gray)

Vibe: Energetic, rebellious, bold
Best for: Rock, punk, alternative music


🎤 OPTION 2: HIP-HOP (Bold & Urban)
═══════════════════════════════════════
Background:  #1a1a2e (dark blue)
Primary:     #ffcc00 (gold)
Secondary:   #00d4ff (cyan)
Accent:      #ff6b35 (orange)
Text:        #eaeaea (off-white)
Muted:       #a0aec0 (blue-gray)

Vibe: Urban, swagger, flashy
Best for: Hip-hop, R&B, trap music


🎹 OPTION 3: ELECTRONIC (Neon & Vibrant)
═══════════════════════════════════════
Background:  #0f0f23 (deep purple-black)
Primary:     #00ff88 (neon green)
Secondary:   #ff00ff (magenta)
Accent:      #00d4ff (electric blue)
Text:        #ffffff (white)
Muted:       #8b92a8 (lavender-gray)

Vibe: Futuristic, rave, high-energy
Best for: EDM, techno, house music


🎺 OPTION 4: JAZZ/ACOUSTIC (Warm & Elegant)
═══════════════════════════════════════
Background:  #2d1b00 (warm brown)
Primary:     #d4af37 (gold)
Secondary:   #cd7f32 (bronze)
Accent:      #e8b923 (bright gold)
Text:        #f5f5dc (beige)
Muted:       #c8b896 (tan)

Vibe: Classy, intimate, sophisticated
Best for: Jazz, acoustic, folk music

Cara apply color scheme:

Prompt ke AI:

Ubah color scheme landing page menjadi [OPTION X]:

Background: [HEX]
Primary color: [HEX]
Secondary color: [HEX]
Accent color: [HEX]
Text: [HEX]
Muted text: [HEX]

Apply consistently ke:
- Background semua sections
- Buttons (primary color)
- Links hover (primary color)
- Badges (accent color)
- Headings (text color)
- Body text & muted text
- Borders & dividers

Update all Tailwind classes dengan hex values yang sesuai.

Contoh terisi (OPTION 1 - Indie Rock):

Ubah color scheme menjadi Indie Rock:

Background: #0a0a0a
Primary: #ff3366
Secondary: #8b5cf6
Accent: #fbbf24
Text: #ffffff
Muted: #9ca3af

Apply ke semua sections.

Copy code baru dari AI → replace di Cursor → save → refresh! 🎨

✍️ Step 2: Typography & Spacing Polish

Typography yang baik = readability yang baik = user experience yang baik!

Prompt untuk improve typography:

Improve typography hierarchy dengan:

HEADINGS:
- Event name (hero):
  * Desktop: text-6xl atau text-7xl, font-black
  * Mobile: text-4xl atau text-5xl
  * Font: 'Bebas Neue' atau 'Anton' (Google Fonts)
  * Letter spacing: tracking-tight

- Section titles (Lineup, Ticket, Schedule):
  * Desktop: text-4xl atau text-5xl, font-bold
  * Mobile: text-3xl
  * Font: same as event name
  * Margin bottom: mb-4

- Subsection titles:
  * Desktop: text-2xl atau text-3xl, font-semibold
  * Mobile: text-xl
  * Font: 'Montserrat' atau 'Inter'

BODY TEXT:
- Regular paragraphs:
  * Size: text-base atau text-lg
  * Line height: leading-relaxed (1.6 atau 1.75)
  * Font: 'Inter' atau 'Public Sans'
  * Max width: max-w-3xl (untuk readability)

- Small text (captions, labels):
  * Size: text-sm
  * Color: muted gray
  * Font: same as body

SPACING:
- Section padding:
  * Desktop: py-20 atau py-24
  * Mobile: py-12 atau py-16

- Element margins:
  * Between sections: mb-8 atau mb-12
  * Between paragraphs: mb-4
  * Between list items: mb-2 atau mb-3

- Card padding:
  * p-6 atau p-8 (desktop)
  * p-4 atau p-6 (mobile)

BUTTONS:
- Size: px-8 py-3 atau px-10 py-4
- Font: font-semibold atau font-bold
- Rounded: rounded-lg atau rounded-full
- Text: text-lg

Apply Google Fonts dengan <link> tag di <head>.
Update semua Tailwind classes untuk consistency.

Copy prompt → paste ke AI → implement! ✨

🎭 Step 3: Final Polish Checklist

Sekarang kita polish detail-detail kecil yang bikin landing page kamu professional!

A. Smooth Scroll Behavior

Prompt:
"Tambahkan smooth scroll behavior:
- Di CSS global atau HTML tag
- Scroll behavior: smooth
- Biar klik button 'Daftar Sekarang' smooth scroll ke registration section"

Code:
html {
  scroll-behavior: smooth;
}

B. Hover Effects

Prompt:
"Tambahkan hover effects:

1. Buttons:
   - Scale up: scale-105
   - Shadow deeper: shadow-lg → shadow-xl
   - Transition: transition-all duration-300

2. Cards (Ticket tiers, Lineup):
   - Lift up: -translate-y-2
   - Shadow: shadow-md → shadow-2xl
   - Border glow (optional): border color lighter
   - Transition: smooth

3. Links (Footer, social media):
   - Color: gray → primary color
   - Underline on hover
   - Transition: duration-200

Apply ke semua interactive elements."

C. Subtle Animations

Prompt:
"Tambahkan subtle animations saat scroll (fade in):

- Sections fade in saat pertama kali visible
- Delay sedikit antar sections (stagger effect)
- Pakai Intersection Observer API atau CSS animation
- Keep it subtle, jangan terlalu flashy

Optional: Animate lineup cards dari bottom-up.

D. Mobile Responsive Final Check

Prompt:
"Optimize untuk mobile responsive:

1. Font sizes:
   - Heading jangan terlalu besar (max text-4xl)
   - Body text readable (min text-base)

2. Spacing:
   - Reduce padding di mobile (py-8 instead of py-16)
   - Stack grid columns jadi 1 column

3. Buttons:
   - Full width di mobile (w-full)
   - Touch target min 44px (py-3 atau py-4)

4. Images:
   - Responsive width (w-full)
   - Height auto
   - Object-fit: cover

5. Form:
   - Full width container
   - Readable input fields

Test semua di berbagai screen sizes."

📱 Step 4: Mobile Testing (Before Deploy)

CRITICAL: Test di mobile sebelum deploy!

Browser DevTools Method:

  1. Buka website di browser (Chrome/Firefox)
  2. Press F12 (buka Developer Tools)
  3. Click Toggle Device Toolbar icon (atau Ctrl+Shift+M)
  4. Pilih device:
    • iPhone SE (375px - small screen)
    • iPhone 12 Pro (390px)
    • iPad (768px - tablet)
    • Desktop (1440px)

Cek tiap device:

✅ MOBILE RESPONSIVE CHECKLIST:

☐ Hero section:
  - Text tidak overflow
  - Button accessible
  - Image/poster fit well

☐ Lineup section:
  - Grid jadi 1 kolom (stack vertical)
  - Cards nggak terlalu kecil
  - Text readable

☐ Ticket pricing:
  - 3 cards stack vertical
  - Harga jelas terlihat
  - Benefits readable

☐ Schedule:
  - Timeline vertical tetap rapi
  - Tidak ada horizontal scroll

☐ Registration:
  - Form full width
  - Input fields accessible
  - Submit button visible

☐ Footer:
  - Columns stack vertical
  - Links clickable (tidak terlalu dekat)
  - Text readable

☐ Overall:
  - No horizontal scroll
  - All buttons min 44px height (touch-friendly)
  - Font size ≥ 16px (prevent zoom on iOS)

Kalau ada yang broken:

  • Screenshot
  • Tanya AI: "Mobile broken: [describe issue]. How to fix?"
  • Implement fix
  • Test lagi

✅ Step 5: Pre-Deploy Final Checklist

Sebelum deploy, cek SEMUA ini:

🚀 PRE-DEPLOYMENT CHECKLIST - CRITICAL!

CONTENT:
☐ All text bukan lorem ipsum/placeholder
☐ Event name, date, venue benar (no typo!)
☐ Band names spelled correctly
☐ Ticket prices correct
☐ Schedule times logical & correct
☐ Bank account info benar
☐ WhatsApp number benar
☐ Email address benar
☐ Social media handles benar (@correct_handle)

FUNCTIONALITY:
☐ "Daftar Sekarang" button scroll ke registration
☐ Google Form embedded & bisa disubmit
☐ WhatsApp link buka chat dengan pre-filled message
☐ All footer links open correct pages (new tab)
☐ Email link open email client
☐ Form submission → data masuk Google Sheets

TECHNICAL:
☐ File name exactly: index.html (lowercase)
☐ No console errors (F12 → Console)
☐ All images loaded (or proper placeholders)
☐ Google Fonts loading
☐ Tailwind CSS CDN link ada di <head>
☐ Meta tags ada (viewport, charset)

DESIGN:
☐ Color scheme applied consistently
☐ Typography hierarchy clear
☐ Spacing comfortable (tidak cramped)
☐ All sections visible & readable
☐ Hover effects working
☐ Mobile responsive (tested!)

FILE:
☐ File size < 100KB (fast loading)
☐ Saved di folder konser-landing/
☐ Backup copy dibuat (just in case)

Kalau ada yang ❌:

  • Fix sekarang, jangan skip!
  • Deploy dengan bugs = bad user experience
  • Take 5-10 extra minutes untuk perfect

🚀 Step 6: Deploy ke Vercel (Go Live!)

THIS IS IT! Kita deploy ke internet! 🌐

OPTION A: Upload Manual (Termudah - Recommended)

  1. Buka Vercel
    • Browser → vercel.com
    • Login (pakai GitHub yang tadi)
  2. Add New Project
    • Click "Add New" → "Project"
    • Atau: klik "+ Add New Project" button besar
  3. Upload File
    • Di halaman baru, click tab "Upload" (di samping "Import Git Repository")
    • Drag & drop FOLDER konser-landing ke area upload
    • Atau: click "browse" → pilih folder konser-landing
  4. PENTING: File Structure Check konser-landing/ └── index.html ← Harus ada di root folder! Jangan: konser-landing/ └── my-project/ └── index.html ← Terlalu nested, akan error!
  5. Deploy Settings
    • Project Name: otomatis dari folder name, atau edit Contoh: jakarta-indie-night
    • Framework Preset: "Other" atau leave blank
    • Root Directory: ./ (default)
    • Jangan ubah Build settings (leave empty)
  6. Click "Deploy"
    • Button besar biru: "Deploy"
    • Wait 20-30 detik
    • Progress bar muncul...
    • Building... Deploying...
  7. SUCCESS! 🎉
    • Halaman berubah ke "Congratulations!"
    • URL muncul: https://your-project.vercel.app
    • Click URL untuk lihat live site!

Copy URL ini → share ke teman → mereka bisa buka!

OPTION B: Via GitHub (Advanced - Optional)

Kalau kamu mau version control:

  1. Upload ke GitHub
    • Buat repository baru di GitHub
    • Upload folder konser-landing
    • Commit changes
  2. Import di Vercel
    • Vercel → Add New → Import Git Repository
    • Pilih repo yang baru dibuat
    • Deploy

(Skip ini kalau nggak familiar dengan Git)

🔗 Step 7: Customize Domain (Optional)

Vercel kasih domain gratis: your-project.vercel.app

Tapi kamu bisa customize subdomain!

Cara ganti subdomain:

  1. Di Vercel Dashboard
    • Buka project yang baru di-deploy
    • Tab "Settings" (di top navigation)
  2. Domains Section
    • Scroll ke "Domains"
    • Lihat current domain: random-name-123.vercel.app
  3. Edit Domain
    • Click "Edit" atau "Add"
    • Type nama baru: jakarta-indie-night
    • Full domain jadi: jakarta-indie-night.vercel.app
    • Click "Add" atau "Save"
  4. Wait ~10 seconds
    • Vercel setup DNS
    • Domain ready!

Test new domain:

  • Buka https://jakarta-indie-night.vercel.app
  • Landing page kamu muncul!
  • Share URL yang ini (lebih gampang diingat)

Custom Domain (Beli Domain Sendiri - Advanced):

Kalau mau domain sendiri (contoh: jakartaindienight.com):

  1. Beli domain di Namecheap/GoDaddy/Niagahoster (~Rp 100k/tahun)
  2. Di Vercel → Settings → Domains → Add custom domain
  3. Follow instruksi setup DNS
  4. Wait 24-48 jam propagation
  5. Domain custom ready!

(Optional banget, .vercel.app udah cukup kok!)

🧪 Step 8: Test Deployed Site

Sekarang test website yang udah live!

🧪 PRODUCTION TESTING CHECKLIST:

BASIC ACCESS:
☐ Buka URL di browser
☐ Website loading (< 3 seconds)
☐ No errors visible
☐ All sections muncul

FUNCTIONALITY:
☐ Scroll smooth dari top ke bottom
☐ Click "Daftar Sekarang" → scroll to registration
☐ Google Form bisa diisi
☐ Submit form → "Response recorded" muncul
☐ Cek Google Sheets → response masuk ✅
☐ WhatsApp button → buka chat
☐ Pre-filled message ada
☐ Footer links → open correct pages

DEVICE TESTING:
☐ Desktop (Chrome)
☐ Desktop (Firefox/Safari)
☐ Mobile (buka dari HP asli, bukan DevTools)
☐ Tablet (optional)

SHARING TEST:
☐ Copy URL
☐ Share ke teman via WA
☐ Teman buka → works!
☐ Share ke IG Story → link works!

PERFORMANCE:
☐ Fast loading (< 3 sec)
☐ No broken images
☐ Smooth scrolling
☐ Hover effects working

Kalau ada yang FAIL:

  • Note down error
  • Balik ke Cursor, fix issue
  • Save file
  • Re-deploy: drag folder lagi ke Vercel (akan override)
  • Test lagi

📊 Step 9: Get Analytics (Optional)

Mau tau berapa orang yang visit website kamu?

Simple Analytics dengan Vercel:

  1. Vercel Analytics (Free)
    • Di Vercel project → tab "Analytics"
    • Enable analytics
    • Lihat page views, visitors, countries
  2. Google Analytics (Advanced) Prompt ke AI: "Tambahkan Google Analytics tracking code: - Measurement ID: G-XXXXXXXXXX - Add script tag di <head> - Track page views & events" Setup Google Analytics account → get Measurement ID → apply
  3. Simple Hit Counter Pakai service gratis: - hits.seeyoufarm.com - Generate badge code - Tambah di footer (optional)

🎉 Step 10: CELEBRATE! You Did It!

╔═══════════════════════════════════════════╗
║                                           ║
║     🎊 CONGRATULATIONS! 🎊               ║
║                                           ║
║   Landing Page Konser Kamu LIVE! 🚀      ║
║                                           ║
║   Dari nol pengetahuan coding...          ║
║   Jadi punya website professional         ║
║   yang bisa langsung pakai!               ║
║                                           ║
║   🎸 Hero Section - Check! ✅            ║
║   🎤 Lineup - Check! ✅                  ║
║   💳 Ticket Pricing - Check! ✅          ║
║   🕒 Schedule - Check! ✅                ║
║   📝 Registration - Check! ✅            ║
║   📱 Footer - Check! ✅                  ║
║   🌐 DEPLOYED - Check! ✅                ║
║                                           ║
║   Total time: ~2-3 jam                    ║
║   Total cost: Rp 0,- (GRATIS!)           ║
║   Total awesomeness: UNLIMITED! 💯       ║
║                                           ║
╚═══════════════════════════════════════════╝

What you've accomplished:

  • ✅ Learned vibe coding (AI-assisted development)
  • ✅ Built a professional landing page
  • ✅ Integrated Google Forms for registration
  • ✅ Setup payment instructions & WhatsApp
  • ✅ Deployed to production (live on internet!)
  • ✅ Created shareable URL

Zero coding experience → Live website in one day! 🔥

📢 Step 11: Share & Promote

Website udah live, sekarang promosikan!

Immediate Actions (Do dalam 1 jam):

  1. Instagram:
    • Post poster event
    • Caption: info singkat + link website
    • Story: screenshot website + swipe up link
    • Reel: behind the scenes (optional)
    • Bio: taruh link website
  2. WhatsApp:
    • Blast ke grup komunitas
    • Status WA: poster + link
    • Broadcast message ke contacts
  3. Twitter/X:
    • Tweet dengan poster
    • Thread: lineup, ticket info, link
    • Tag bands yang tampil
    • Retweet dari akun official bands
  4. TikTok:
    • Video teaser event
    • CTA: "Link di bio!"
    • Hashtags: #jakartaindienight #konserie #indiemusic
  5. Grup Telegram/Discord:
    • Share di komunitas musik
    • Tidak spam, tapi informative

Pro Tips:

🔥 PROMOTION STRATEGY:

EARLY PHASE (H-30 hari):
- Announce dengan teaser
- Build hype: lineup reveal bertahap
- Share behind the scenes

MID PHASE (H-14 hari):
- Presale reminder (urgency!)
- Share testimonial dari early buyers
- Countdown posts

LATE PHASE (H-7 hari):
- Final call for tickets
- "Hampir sold out!" (kalau bener)
- Reminder: schedule, venue, what to bring

DAY OF EVENT:
- Live updates di IG Story
- Thank you posts
- Collect content untuk next event!

🔄 Step 12: Iterate & Improve

Landing page bukan one-time thing. Iterasi!

Quick Wins (15 menit):

  1. Update sold ticket count Tambah di Hero atau Ticket section: "🔥 120/150 tiket terjual!" Update manual setiap hari.
  2. Add testimonial Kalau ada yang confirm: "Wah website-nya keren banget, jadi makin excited!" Screenshot → post di IG Story.
  3. Countdown timer Prompt AI: "Tambahkan countdown timer di Hero section: - Target: [tanggal event] - Format: X Hari, Y Jam, Z Menit - Update real-time"

Post-Event:

  • Add photo gallery dari event
  • Testimonial dari attendees
  • Announce next event: "Save the date!"
  • Reuse landing page structure untuk event berikutnya!

🎓 What You've Learned

Technical Skills:

  • ✅ Vibe coding workflow (AI + human)
  • ✅ HTML structure & semantics
  • ✅ Tailwind CSS utility classes
  • ✅ Responsive design principles
  • ✅ Google Forms integration
  • ✅ Deployment process (Vercel)
  • ✅ Domain management

Soft Skills:

  • ✅ Breaking complex tasks into steps
  • ✅ Prompting AI effectively
  • ✅ Testing & debugging
  • ✅ User experience thinking
  • ✅ Content creation
  • ✅ Project management

Business Skills:

  • ✅ Event landing page structure
  • ✅ Conversion optimization
  • ✅ Pricing strategy
  • ✅ Marketing basics

🚀 Next Level: What's Possible?

Setelah ini, kamu bisa bikin:

Similar Projects:

  1. Wedding Website
    • RSVP system
    • Love story timeline
    • Guest book
  2. Portfolio Website
    • Showcase work
    • Contact form
    • About me
  3. Product Landing Page
    • Waitlist signup
    • Feature showcase
    • Pricing tiers
  4. Workshop/Course Page
    • Curriculum outline
    • Instructor bio
    • Registration
  5. Restaurant Menu
    • Digital menu
    • Online order via WA
    • Location map

Advanced Features (Next Learning):

  • Payment gateway integration (Midtrans)
  • Backend with database (Firebase/Supabase)
  • Auth system (login/register)
  • Admin dashboard
  • Email automation
  • Real-time ticket counter
  • QR code ticket generation

📚 Continue Learning (BuildWithAngga Resources)

Recommended BWA Articles:

  1. "Vibe Coding Series: Bikin Portfolio Freelancer"
    • Expand skills: multi-page website
    • Learn: project showcase, testimonials
  2. "Tutorial Google Sheets as Database"
    • Automate data processing
    • Charts & analytics dari form responses
  3. "Midtrans Payment Integration untuk Pemula"
    • Accept payment online
    • Automate ticket confirmation
  4. "Cara Deploy ke Custom Domain"
    • Professional domain (.com)
    • DNS setup tutorial

Join Community:

  • Instagram: @buildwithangga
  • Discord: BuildWithAngga Community
  • YouTube: BuildWithAngga Channel

✅ Final Checklist - Ship It!

🚀 FINAL SHIP CHECKLIST:

PRE-LAUNCH:
☐ All content accurate & final
☐ All links tested & working
☐ Mobile responsive verified
☐ Google Form responses working
☐ WhatsApp link tested
☐ Site loading fast (< 3 sec)

DEPLOYED:
☐ Site live di Vercel
☐ Custom subdomain setup (optional)
☐ URL shareable copied

PROMOTED:
☐ IG post with link
☐ IG Story with swipe up
☐ Link di bio IG
☐ WhatsApp groups blasted
☐ Twitter/X posted
☐ TikTok video posted (optional)

MONITORING:
☐ Check Google Sheets daily for registrations
☐ Respond to WhatsApp inquiries fast
☐ Update sold ticket count
☐ Collect testimonials

🎊 ALL DONE? SHIP IT! 🎊

💭 Closing Words

You just did something AMAZING. 🌟

Banyak orang mikir bikin website itu:

  • ❌ Butuh kuliah IT 4 tahun
  • ❌ Harus jago ngoding
  • ❌ Bayar developer jutaan rupiah

Tapi kamu buktiin:

  • ✅ Bisa dipelajari dalam hitungan jam
  • ✅ Nggak perlu jago ngoding (AI bantu!)
  • ✅ 100% gratis

The power of vibe coding: kamu fokus ke apa yang mau dibikin, AI yang handle gimana cara bikinnya.

Landing page ini bukan cuma website. Ini adalah:

  • Portfolio piece: "Gue bisa bikin website sendiri!"
  • Business asset: generates registrations & revenue
  • Proof of concept: AI-assisted development works
  • Foundation: untuk project lebih besar kedepannya

Keep learning. Keep building. Keep vibing. 🚀

🎯 Quick Recap - What We Built

FINAL PRODUCT:
┌─────────────────────────────────────────┐
│ Landing Page Konser Musik               │
│                                         │
│ ✅ Hero: Event info + CTA               │
│ ✅ Lineup: Band showcase (5 bands)      │
│ ✅ Ticket: 3 tiers (Presale/Reg/VIP)    │
│ ✅ Schedule: Timeline rundown           │
│ ✅ Registration: Google Forms embed     │
│ ✅ Footer: Social + contact             │
│                                         │
│ 🌐 Live URL: your-event.vercel.app      │
│ 📱 Mobile responsive: ✅                │
│ ⚡ Fast loading: ✅                      │
│ 💰 Total cost: Rp 0,-                   │
│                                         │
│ From idea to live in ONE DAY! 🔥        │
└─────────────────────────────────────────┘

📁 Final File Structure

konser-landing/
└── index.html (~35KB)
    ├── <head>
    │   ├── Meta tags
    │   ├── Tailwind CSS CDN
    │   └── Google Fonts
    ├── Hero Section
    ├── Lineup Section
    ├── Ticket Pricing Section
    ├── Schedule Section
    ├── Registration Section
    │   └── Google Forms embedded
    └── Footer Section

Deployed to: Vercel
Live URL: <https://your-project.vercel.app>
Status: 🟢 LIVE & READY!

Navigation:

  • ✅ Part 1: Intro & Persiapan
  • ✅ Part 2: Hero + Lineup Section
  • ✅ Part 3: Ticket + Schedule Section
  • ✅ Part 4: Registration Form + Footer
  • ✅ Part 5: Styling + Deploy (FINAL!) ← YOU ARE HERE 🎉

🎊 THE END 🎊

Congratulations on completing the tutorial! 🎓

You are now officially a vibe coder. 🚀

Questions? Feedback? Share your landing page! Tag @buildwithangga di Instagram! 📸

Keep building awesome things! 💪✨

Tutorial by BuildWithAngga - Vibe Coding Series"From zero to hero in one day. That's vibe coding." 🔥