Kustomisasi

Ubah branding, pricing, navigasi, halaman, konten, preset desain, email, dan konfigurasi produk KilatKoding.

​

Mulai dari file yang paling berpengaruh

Yang ingin kamu ubah	File utama	Dampak
Nama produk, deskripsi, base URL	config/site.ts	Metadata, SEO helpers, copy dasar produk
Navigasi dalam aplikasi	config/navigation.ts	Header dan dashboard navigation
Paket, harga, dan benefit	config/subscriptions.ts	Katalog plan di server, billing UI, AI limits
Preset desain marketing	config/marketing-designs.ts	Pilihan tema visual marketing
Metrik open startup	config/open-startup.ts	Halaman /open
Roadmap publik	config/roadmap.ts	Halaman /roadmap
Status layanan	config/status-page.ts	Halaman /status
Copy landing page	components/sections/*	Hero, fitur, FAQ, pricing, CTA, testimonial, dan lainnya
Styling global	app/globals.css, app/marketing.css, tailwind.config.ts	Token warna, layout, visual system
Blog	content/blog/*.mdx	Konten blog
Email	emails/*.tsx	Welcome email dan invoice
Legal pages	app/(marketing)/privacy/page.tsx, app/(marketing)/terms/page.tsx	Halaman legal

​

Urutan kustomisasi yang direkomendasikan

1. Ganti identitas produk

   Ubah config/site.ts, copy landing page, logo, dan deskripsi SEO.

2. Tentukan fitur yang tetap aktif

   Gunakan toggle di .env.local untuk mematikan modul yang belum dipakai.

3. Sesuaikan pricing dan payment

   Ubah plan di config/subscriptions.ts dan pastikan provider pembayaran yang dipilih sesuai.

4. Rapikan halaman marketing

   Tinjau halaman about, compare, roadmap, status, waitlist, contact, dan blog.

5. Tinjau dashboard dan admin

   Pastikan data, istilah, dan CTA di dashboard cocok dengan produk kamu.

​

Area konfigurasi yang paling penting

​

Branding dan SEO

• config/site.ts mengatur nama, deskripsi, dan URL dasar.
• Banyak halaman memakai helper createMetadata(), jadi perubahan di config dasar akan memengaruhi metadata turunan.
• File app/opengraph-image.png dan app/twitter-image.png dipakai untuk share preview.

​

Navigasi dan konten halaman

• config/navigation.ts mengatur menu utama marketing dan dashboard.
• Halaman-halaman marketing berada di app/(marketing)/.
• Copy section landing page ada di components/sections/.

​

Pricing dan billing

• config/subscriptions.ts adalah source of truth katalog paket.
• Harga dan line item checkout ditentukan server-side dari file ini.
• User tidak bisa menentukan nominal sendiri dari client.

​

Desain marketing

• config/marketing-designs.ts berisi 12 preset desain marketing.
• components/marketing/design-switcher.tsx menampilkan switcher preset.
• components/marketing/design-provider.tsx menangani persistence dan sinkronisasi theme.

​

Konten yang sifatnya live marketing

Konten	File
Open startup metrics	config/open-startup.ts
Roadmap	config/roadmap.ts
Status page	config/status-page.ts
FAQ	components/sections/faq.tsx
Testimonials	components/sections/testimonials.tsx

​

Email dan komunikasi

• emails/welcome.tsx untuk onboarding.
• emails/invoice.tsx untuk konfirmasi pembayaran.
• app/api/contact/route.ts mengirim email form kontak dengan Resend.

​

Hal yang sering lupa dikustomisasi

• EMAIL_FROM
• ADMIN_EMAILS
• isi halaman legal
• postingan blog contoh
• data open startup, roadmap, dan status page
• benefit dan harga plan
• teks Indonesia yang masih spesifik ke KilatKoding

​

Kalau kamu ingin mematikan fitur

Gunakan env toggle, bukan menghapus kode secara terburu-buru. Pendekatan ini lebih aman karena:

• UI memberi fallback yang jelas,
• health check tetap bisa membaca readiness,
• Kamu bisa mengaktifkan fitur lagi tanpa restore banyak file.

​

Prompt AI yang bisa langsung kamu pakai

Saya ingin rebrand dan kustomisasi KilatKoding untuk produk berikut:

[jelaskan nama produk baru, target user, fitur aktif, dan perubahan brand yang diinginkan]

Tolong bantu saya:
1. Menentukan file yang paling penting untuk diubah lebih dulu
2. Memisahkan perubahan branding, pricing, navigasi, halaman, email, dan legal
3. Menentukan area yang bisa saya ubah tanpa coding berat
4. Menentukan area yang sebaiknya dikerjakan developer
5. Membuat checklist kustomisasi sebelum launch

Kalau kamu punya akses repo, cek file config dan halaman marketing yang paling relevan dulu.

​

Checklist kustomisasi sebelum launch

1. Semua nama dan deskripsi produk sudah sesuai brand.
2. Navigasi hanya menampilkan halaman yang memang dipakai.
3. Paket harga dan benefit sudah benar.
4. Email sender dan email tujuan contact form sudah benar.
5. Copy legal, roadmap, status, dan open startup sudah ditinjau.
6. Blog contoh dihapus atau diganti.
7. Logo dan thumbnail sosial sudah sesuai.

Kalau kamu ingin panduan yang lebih task-based, lanjutkan ke Resep rebranding. Kalau kamu ingin tahu mana yang realistis dikerjakan tanpa coding dan mana yang sebaiknya diserahkan ke developer, baca Tanpa coding vs perlu developer.