Panduan Komponen: MSB Landing Page

Halaman msb.astro dibangun menggunakan arsitektur LEGO (Modular). Berikut adalah detail masing-masing section beserta komponen yang digunakan:

Section 1: Headline & Hero

• Komponen: HeroLanding.astro
• Tipe: Komponen Standar (Sudah ada).
• Props:
  • title: Judul utama halaman (Uppercase).
  • subtitle: Teks pendukung di bawah judul (Mendukung HTML string).

Section 2: Masalah (Problem Checklist)

• Komponen: ProblemChecklist.astro
• Tipe: Komponen Standar (Sudah ada).
• Props:
  • title: Judul seksi masalah.
  • items: Array string berisi poin-poin masalah (Mendukung HTML string).

Section 3 & 4: Bridging & Solution Intro

• Komponen: Custom HTML & Container.astro
• Logika: Menggunakan tag <section> manual dengan Tailwind classes agar fleksibel untuk narasi teks yang panjang.
• Props: Menggunakan size="narrow" pada Container untuk fokus baca di tengah.

Section 5: 5 Komponen Utama

• Komponen: FeatureGrid.astro
• Tipe: Komponen Standar.
• Props:
  • title: “5 KOMPONEN UTAMA DARI MSB”.
  • features: Array objek fitur (icon, title, description).
  • bgColor: “bg-slate-900 text-white” (Modifikasi tampilan via props).
  • columns: 2 (Mengatur layout grid jadi 2 kolom di desktop).

Section 6: Materi Edukasi

• Komponen: EducationGrid.astro
• Tipe: [NEW] Komponen Baru.
• Logika: Dibuat khusus untuk menampilkan modul video/kurikulum.
• Props:
  • title: Judul seksi kurikulum.
  • subtitle: Penjelasan singkat format materi.
  • modules: Array objek modul (title, description).

Section 7: Feature Showcase (Notion Gallery)

• Komponen: FeatureGallery.astro
• Tipe: [NEW] Komponen Baru.
• Logika: Menampilkan fitur utama berdampingan dengan screenshot (Mockup) dan daftar aplikasi kompetitor.
• Props:
  • title: “ONE APP FOR EVERYTHING”.
  • subtitle: Penjelasan integrasi satu aplikasi.
  • items: Array objek showcase (title, description, image, alternatives).

Section 8: Pricing & CTA

• Komponen: PricingCTA.astro
• Tipe: [NEW] Komponen Baru.
• Logika: Menampilkan harga coret, harga diskon, dan daftar benefit premium.
• Props:
  • originalPrice: Harga normal.
  • discountedPrice: Harga promo.
  • ctaText: “MILIKI SEKARANG”.
  • ctaLink: URL checkout.
  • benefits: Array string poin-poin bonus.

Section 9: Frequently Asked Questions

• Komponen: FAQ.astro
• Tipe: [NEW] Komponen Baru.
• Logika: Menggunakan pola Accordion (details/summary) untuk menjawab keraguan user.
• Props:
  • title: Judul seksi FAQ.
  • items: Array objek FAQ (question, answer).

Ringkasan File

• Lokasi Komponen: src/components/landing/
• Lokasi Halaman: src/pages/produk/msb.astro
• Lokasi Data: Seluruh data (Model) dipusatkan di Frontmatter msb.astro agar mudah di-update tanpa menyentuh kodingan komponen.