Platform Riset & Konsultasi Transisi Energi, Dekarbonisasi Industri, dan Kepatuhan Regulasi Iklim Indonesia

NusaDecarb adalah platform web modern kelas enterprise (inspired by Accenture) yang dirancang khusus untuk memfasilitasi riset strategis, audit emisi Gas Rumah Kaca (GRK), kepatuhan Taksonomi Hijau Indonesia 2.0, serta monetisasi bursa karbon (IDX Carbon / SRN-PPI) bagi BUMN dan korporasi manufaktur nasional menuju target Net Zero Emission (NZE) 2060.

• Mega-menu dropdown enterprise yang berposisi presisi di tengah layar (symmetrical layout), mencegah elemen terpotong pada berbagai resolusi layar.
• Dilengkapi indikator menu aktif (active navigation breadcrumb), subtle backdrop dimming, dan pencarian instan minimalis.

• Bagian Wawasan Riset & Studi Kasus: Secara default hanya menampilkan judul, tag kategori, dan gambar industri resolusi tinggi.
• Hover Switch: Ketika kursor diarahkan ke gambar, gambar bertransisi memudar secara halus dan langsung digantikan oleh teks penjelasan lengkap, metrik dampak emisi riil, serta tombol ekspansi (Expand >).

• Latar belakang interaktif berbasis HTML5 Canvas dengan simulasi partikel konstelasi dual-tone (Emerald Green #10B981, Mint Green #6EE7B7, dan Putih Bersih #FFFFFF) dengan efek repulsi kursor dinamis.

• Dialog modal pencarian instan berbasis keyboard (Ctrl+K / Cmd+K atau klik tombol Search).
• Memfilter artikel taksonomi, pasar karbon, dan studi kasus industri secara real-time.

• Skema warna ramah lingkungan: Emerald Green, Mint, Crisp White, dan latar belakang deep obsidian green (#050A07).
• Memenuhi rasio kontras ketat WCAG AAA (kontras teks hingga 14:1) tanpa adanya tabrakan warna atau teks kabur.

• Seluruh foto (PLTP Geotermal Nusantara, Smelter Nikel EBT, Pabrik Semen RDF, Smart Microgrid, dan Lantai Bursa IDX Carbon) tersimpan secara lokal di direktori public/images/ untuk pemuatan instan tanpa dependensi pihak ketiga.

• Frontend Framework: React 19
• Bahasa: TypeScript 5.7
• Build Tool & Bundler: Vite 6
• Styling: Tailwind CSS 3.4 & PostCSS
• Ikon: Lucide React
• Animasi: CSS Transitions & HTML5 Canvas API

Pastikan Anda telah menginstal Node.js (versi 18 ke atas) dan npm.

# 1. Klon repositori ini
git clone https://github.com/suryapamungkas/nusadecarb.git

# 2. Masuk ke direktori proyek
cd nusadecarb

# 3. Instal dependensi
npm install

# 4. Jalankan server pengembangan lokal
npm run dev

Buka peramban Anda di http://localhost:3000 (atau port yang tertera pada terminal).

# Kompilasi TypeScript dan bundel Vite
npm run build

# Meninjau hasil build lokal
npm run preview

Hasil build yang teroptimasi akan disimpan di folder dist/.

# Inisialisasi git (jika belum)
git init

# Tambahkan semua file
git add .

# Buat commit perdana
git commit -m "feat: Initial commit for NusaDecarb platform"

# Buat branch utama
git branch -M main

# Hubungkan dengan remote repository GitHub Anda
git remote add origin https://github.com/suryapamungkas/nusadecarb.git

# Push ke GitHub
git push -u origin main

1. Buka vercel.com dan login menggunakan akun GitHub Anda.
2. Klik Add New Project, pilih repositori nusadecarb.
3. Vercel akan otomatis mendeteksi konfigurasi Vite.
4. Klik Deploy. Selesai dalam ~30 detik!

Jika ingin menggunakan GitHub Pages:

1. Pastikan di vite.config.ts ditambahkan base path (jika tidak menggunakan custom domain):

   // vite.config.ts
   export default defineConfig({
     base: '/nusadecarb/',
     plugins: [react()],
   })

2. Anda dapat memanfaatkan GitHub Actions untuk otomatisasi build dan deploy ke branch gh-pages.

nusadecarb/
├── public/
│   └── images/               # Aset fotografi industri lokal
│       ├── clean_tech_energy.jpg
│       ├── smelter_solar_decarb.jpg
│       ├── green_cement_rdf.jpg
│       ├── smart_microgrid_park.jpg
│       ├── geothermal_power_plant.jpg
│       ├── carbon_exchange_trading.jpg
│       └── esg_director_portrait.jpg
├── src/
│   ├── components/           # Komponen UI modular
│   │   ├── Logo.tsx          # Logo SVG kustom NusaDecarb
│   │   ├── Navbar.tsx        # Header & mega-menu presisi tengah
│   │   ├── Hero.tsx          # Hero section & pilar transisi
│   │   ├── MetricsBar.tsx    # Indikator skala dampak dekarbonisasi
│   │   ├── InsightsGrid.tsx  # Grid kartu interaktif switch hover
│   │   ├── InsightDrawer.tsx # Drawer modal telaah riset mendalam
│   │   ├── LeadershipQuote.tsx # Kutipan kepemimpinan ESG
│   │   ├── ClientSpotlight.tsx # Studi kasus industri riil
│   │   ├── NewsSlider.tsx    # Warta berita & bursa karbon
│   │   ├── EnterpriseCTA.tsx # Ajakan konsultasi peta jalan NZE
│   │   ├── Footer.tsx        # Footer sitemap & kredit author
│   │   ├── SearchModal.tsx   # Modal pencarian instan
│   │   ├── LanguageModal.tsx # Modal konfigurasi wilayah & taksonomi
│   │   └── ParticleCanvas.tsx# Kanvas partikel konstelasi
│   ├── data/                 # Data artikel, navigasi, berita, dan mitra
│   ├── types/                # Definisi TypeScript
│   ├── App.tsx               # Root component
│   ├── main.tsx              # Entry point aplikasi
│   └── index.css             # Tailwind layers & utilities
├── index.html                # Entry HTML & SEO metadata
├── tailwind.config.js        # Konfigurasi palet warna hijau zamrud
├── package.json              # Metadata proyek & dependensi
├── LICENSE                   # Lisensi MIT
└── README.md                 # Dokumentasi proyek

Dikembangkan dengan dedikasi oleh:

• Surya Pamungkas (@suryapamungkas)

Proyek ini dilisensikan di bawah lisensi MIT License © 2026 suryapamungkas.