> ## Documentation Index
> Fetch the complete documentation index at: https://belajarkoding.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Steps>
  <Step title="Ganti identitas produk">
    Ubah `config/site.ts`, copy landing page, logo, dan deskripsi SEO.
  </Step>

  <Step title="Tentukan fitur yang tetap aktif">
    Gunakan toggle di `.env.local` untuk mematikan modul yang belum dipakai.
  </Step>

  <Step title="Sesuaikan pricing dan payment">
    Ubah plan di `config/subscriptions.ts` dan pastikan provider pembayaran yang dipilih sesuai.
  </Step>

  <Step title="Rapikan halaman marketing">
    Tinjau halaman `about`, `compare`, `roadmap`, `status`, `waitlist`, `contact`, dan `blog`.
  </Step>

  <Step title="Tinjau dashboard dan admin">
    Pastikan data, istilah, dan CTA di dashboard cocok dengan produk kamu.
  </Step>
</Steps>

## 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

```text theme={null}
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.

<Tip>
  Kalau kamu ingin panduan yang lebih task-based, lanjutkan ke [Resep rebranding](/kilatkoding/rebranding-recipes). Kalau kamu ingin tahu mana yang realistis dikerjakan tanpa coding dan mana yang sebaiknya diserahkan ke developer, baca [Tanpa coding vs perlu developer](/kilatkoding/no-code-vs-developer).
</Tip>