diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index eb3107c..292ef92 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,324 +1,18 @@
 @extends('layouts.front')
 @section('content')
 
-<section class="relative min-h-[calc(100vh-120px)] flex items-center justify-center fade-in">
-    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ asset('assets/images/bg-front.png') }}');"></div>
-    <div class="absolute inset-0"></div>
-    <div class="relative z-10">
-        <div class="flex flex-col items-center text-center mx-auto gap-1 w-[80%] md:w-[80%] lg:w-[60%]">
-            <h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px] leading-[110%] tracking-[-0.03em]">Sistem Informasi</h1>
-            <h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px] leading-[110%] tracking-[-0.03em]">Gas Rumah Kaca Daerah</h1>
-            <p class="mb-0 text-[#878C91] md:w-[70%] pt-12">Platform terintegrasi untuk memantau, melaporkan, dan mengevaluasi status emisi GRK serta kemajuan Rencana Aksi Mitigasi di wilayah Jakarta. Akses data inventarisasi terbaru dan peran serta publik.</p>
-            <div class="flex flex-col md:flex-row gap-10 md:gap-3 mt-20">
-                <div><a href="{{ route('rencana-aksi') }}" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
-                <div><a href="{{ url('login') }}" class="btn-minimal btn-secondary rounded-full px-10 py-4">Akses Dashboard Terbaru</a></div>
-            </div>
-        </div>
-</section>
+@include('partials.index.hero')
 
-<section class="relative container mx-auto p-10 fade-in">
-    <div class="flex flex-col md:flex-row gap-4 justify-between items-center">
-        <div class="md:w-[50%]">
-            <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
-                Informasi Gas Rumah Kaca Daerah
-            </h2>
-        </div>
-        <div class="md:w-[50%]">
-            <p class="text-[16px] text-[#878C91]">Perhitungan emisi GRK mengikuti standar IPCC terbaru dan divalidasi oleh lembaga lingkungan terkait, serta didukung kerja sama dengan Kementerian LHK untuk memastikan akuntabilitas data.</p>
-        </div>
-    </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-[50px]">
-        <div class="info-card bg-[url({{ asset('assets/images/bg1.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
-            <div class="content">
-                <h4 class="text-[20px]">Energi</h4>
-                <p class="font-thin text-sm">Meliputi emisi dari pembakaran bahan bakar fosil di sektor Transportasi, Pembangkit Listrik, Industri, Komersial, dan Rumah Tangga.</p>
-            </div>
-        </div>
-        <div class="info-card bg-[url({{ asset('assets/images/bg2.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
-            <div class="content">
-                <h4 class="text-[20px]">Industrial Processes and Product Use</h4>
-                <p class="font-thin text-sm">Emisi yang dilepaskan dari proses kimia dan fisik dalam industri manufaktur, bukan dari pembakaran bahan bakar itu sendiri.</p>
-            </div>
-        </div>
-        <div class="info-card bg-[url({{ asset('assets/images/bg3.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
-            <div class="content">
-                <h4 class="text-[20px]">Pertanian & Lahan</h4>
-                <p class="font-thin text-sm">Meliputi emisi dan serapan (penghilangan) GRK dari kegiatan pertanian, kehutanan, peternakan, dan perubahan tata guna lahan.</p>
-            </div>
-        </div>
-        <div class="info-card bg-[url({{ asset('assets/images/bg4.png') }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
-            <div class="content">
-                <h4 class="text-[20px]">Limbah</h4>
-                <p class="font-thin text-sm">Emisi Metana yang dihasilkan dari penguraian sampah padat di TPA dan gas dari pengelolaan air limbah domestik serta industri.</p>
-            </div>
-        </div>
-    </div>
-    <div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-[45px]">
-        <div><a href="{{ route('rencana-aksi') }}" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
-    </div>
-</section>
+@include('partials.index.info-section')
 
-<section class="relative mx-auto container p-5 fade-in">
-    <div class="bg-[#2084FF] rounded-[10px] pt-20">
-        <div class="flex flex-row  gap-4 justify-center text-center items-center text-white">
-            <div class="md:w-[70%]">
-                <h1 class="text-[32px] md:text-[42px] font-semibold">Semua yang Anda Butuhkan, Lengkap dan Terverifikasi.</h1>
-            </div>
-        </div>
-        <div class="flex flex-col lg:flex-row justify-center items-center gap-4 mt-[35px] px-20 lg:w-[90%] mx-auto text-center">
-            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Inventarisasi Sektor</a></div>
-            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Tren Tahun ke Tahun</a></div>
-            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">RAD GRK Interaktif</a></div>
-            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Peta Geografis Aksi</a></div>
-        </div>
-        <div class="flex justify-center -mt-[50px]">
-            <img src="{{ asset('assets/images/dashboard.png') }}" alt="">
-        </div>
-    </div>
-</section>
+@include('partials.index.featured-section')
 
-<section class="relative mx-auto container p-5 fade-in">
-    <div class="py-20">
-        <div class="flex flex-row  gap-4 justify-center text-center items-center">
-            <div class="">
-                <h1 class="text-[22px] md:text-5xl leading-[160%]">Kami menjamin pengujian komprehensif didukung metodologi standar ISO/IEC 17025 dan tim analis tersertifikasi</h1>
-            </div>
-        </div>
-        <div class="flex md:flex-row flex-col md:justify-between items-center gap-[35px] lg:gap-4 mt-[55px] px-20">
-            <div class="flex justify-center items-center gap-3">
-                <div class="bg-[#eee] rounded-full p-3"><img width="45" src="{{ asset('assets/images/avatar.png') }}" alt="avatar"></div>
-                <div class="flex flex-col gap-1">
-                    <span class="font-semibold text-xl">Ilham</span>
-                    <span class="text-[#878C91] text-sm">Tenaga Ahli</span>
-                </div>
-            </div>
-            <div class="flex justify-between gap-5">
-                <div><a class="btn-minimal btn-icon p-3 rounded-full border" href=""><i class="bx bx-left-arrow-alt"></i></a></div>
-                <div class="text-[#878C91]">01 &nbsp;/&nbsp; 05</div>
-                <div><a class="btn-minimal btn-icon p-3 bg-[#2084FF] text-white rounded-full" href=""><i class="bx bx-right-arrow-alt"></i></a></div>
-            </div>
-        </div>
-    </div>
-</section>
+@include('partials.index.quote-section')
 
-<section class="relative mx-auto container p-5 fade-in">
-    <div class="py-20">
-        <div class="flex flex-col lg:flex-row gap-4">
-            <div class="flex flex-col gap-5 lg:w-[40%]">
-                <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
-                    FAQ Inventarisasi dan Aksi Iklim
-                </h2>
-                <p class="text-[#878C91] mt-5">Sebagai platform informasi terdepan, kami berkomitmen untuk menyediakan sumber daya edukasi yang komprehensif dan
-                    menjawab pertanyaan umum dari publik dan pemangku kepentingan mengenai data emisi dan upaya mitigasi daerah
-                </p>
-                <div class="flex gap-3 justify-center items-center mt-5">
-                    <a class="btn-minimal btn-outline border px-6 py-3 rounded-full" href="">Akses Materi Edukasi</a>
-                    <a class="btn-minimal btn-link px-6 py-3 underline" href="">Hubungi Kami</a>
-                </div>
-            </div>
-            <div class="flex flex-col gap-3 lg:w-[60%]">
-                <div id="accordion-card" data-accordion="collapse">
-                    <h2 id="accordion-card-heading-1">
-                        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-1" aria-expanded="true" aria-controls="accordion-card-body-1">
-                            <span>Apa itu SIGD dan apa tujuannya?</span>
-                            <svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div id="accordion-card-body-1" class="border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-1">
-                        <div class="p-4 md:p-5">
-                            <p class="mb-2 text-[#878C91]">SIGRD adalah Sistem Informasi Gas Rumah Kaca Daerah yang bertujuan untuk memantau, melaporkan, dan mengevaluasi status emisi GRK di wilayah [Nama Daerah] secara transparan dan terintegrasi.</p>
-                        </div>
-                    </div>
-                    <h2 id="accordion-card-heading-2" class="mt-4">
-                        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-2" aria-expanded="false" aria-controls="accordion-card-body-2">
-                            <span>Bagaimanakah metodologi perhitungan emisi yang digunakan?</span>
-                            <svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div id="accordion-card-body-2" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-2">
-                        <div class="p-4 md:p-5">
-                            <p class="mb-2 text-[#878C91]">Kami menggunakan pedoman IPCC (Intergovernmental Panel on Climate Change) yang diselaraskan dengan Pedoman Teknis Inventarisasi GRK Nasional (KLHK RI). Ini memastikan data valid dan dapat diperbandingkan.</p>
-                        </div>
-                    </div>
-                    <h2 id="accordion-card-heading-3" class="mt-4">
-                        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-3" aria-expanded="false" aria-controls="accordion-card-body-3">
-                            <span>Apa saja sektor penyumbang emisi utama di daerah ini?</span>
-                            <svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div id="accordion-card-body-3" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-3">
-                        <div class="p-4 md:p-5">
-                            <p class="mb-2 text-[#878C91]">Sektor utama meliputi energi, transportasi, industri, dan limbah.</p>
-                        </div>
-                    </div>
-                    <h2 id="accordion-card-heading-4" class="mt-4">
-                        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-4" aria-expanded="false" aria-controls="accordion-card-body-4">
-                            <span>Bagaimana masyarakat umum dapat berpartisipasi dalam upaya mitigasi?</span>
-                            <svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div id="accordion-card-body-4" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-4">
-                        <div class="p-4 md:p-5">
-                            <p class="mb-2 text-[#878C91]">Masyarakat dapat berpartisipasi melalui berbagai cara seperti menggunakan transportasi ramah lingkungan, menghemat energi, dan mengurangi limbah.</p>
-                        </div>
-                    </div>
-                    <h2 id="accordion-card-heading-5" class="mt-4">
-                        <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-5" aria-expanded="false" aria-controls="accordion-card-body-5">
-                            <span>Bagaimana cara mengakses data terbaru di platform SIGD?</span>
-                            <svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
-                            </svg>
-                        </button>
-                    </h2>
-                    <div id="accordion-card-body-5" class="hidden border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-5">
-                        <div class="p-4 md:p-5">
-                            <p class="mb-2 text-[#878C91]">Data terbaru di platform SIGD dapat diakses melalui beberapa cara:</p>
-                            <ul class="mb-3 text-[#878C91] list-disc pl-5">
-                                <li>Dashboard utama yang menampilkan ringkasan data emisi terkini</li>
-                                <li>Menu "Data Inventarisasi" untuk data inventarisasi GRK lengkap</li>
-                                <li>Bagian "Laporan" untuk mengunduh laporan berkala</li>
-                                <li>Fitur "Pencarian Data" untuk mencari data spesifik berdasarkan sektor, tahun, atau wilayah</li>
-                            </ul>
-                            <p class="text-[#878C91]">Semua data diperbaharui secara berkala dan dapat diunduh dalam berbagai format seperti PDF, Excel, atau CSV untuk keperluan analisis lebih lanjut.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
+@include('partials.index.faq-section')
 
-<section class="relative bg-[#efefef] flex flex-col lg:flex-row gap-4 py-20 fade-in">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start mb-12">
-            <div class="flex-1">
-                <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
-                    Data Emisi GRK & Analisi Iklim Untuk Mendukung Aksi Iklim Daerah
-                </h2>
-            </div>
-            <div class="flex-1">
-                <p class="text-[#878C91] text-base leading-relaxed">
-                    SIGD menyediakan data emisi GRK yang kredibel dan terstandar,membantu pemerintah dan publik memahami kondisi emisi serta efektifitas program mitigasi.
-                </p>
-                <div class="mt-12"><a class="btn-minimal btn-outline border border-[#000] px-6 py-3 rounded-full" href="">Lihat Selengkapnya</a></div>
-            </div>
+@include('partials.index.article-section')
 
-        </div>
+@include('partials.index.footer')
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <!-- Article 1 -->
-            <div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
-                <div class="flex flex-col gap-6">
-                    <div class="flex items-center justify-between">
-                        <div class="w-4 h-4 bg-sky-400 rounded-full"></div>
-                    </div>
-                    <h3 class="text-xl md:text-2xl font-semibold text-black">
-                        Bagaimana Data GRK Daerah Meningkatkan Keputusan Kebijakan Iklim
-                    </h3>
-                </div>
-                <div class="flex items-end justify-between gap-4 mt-6">
-                    <p class="text-[#878C91] text-sm leading-relaxed flex-1">
-                        Data yang akurat memudahkan perencanaan mitigasi dan adaptasi berbasis kebutuhan nyata.
-                    </p>
-                    <a href="{{ route('artikel') }}" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
-                        <i class="bx bx-right-arrow-alt text-xl"></i>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Article 2 -->
-            <div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
-                <div class="flex flex-col gap-6">
-                    <div class="flex items-center justify-between">
-                        <div class="w-4 h-4 bg-red-500 rounded-full"></div>
-                    </div>
-                    <h3 class="text-xl md:text-2xl font-semibold text-black">
-                        Memahami Tren Emisi dengan Metodologi Berbasis IPCC
-                    </h3>
-                </div>
-                <div class="flex items-end justify-between gap-4 mt-6">
-                    <p class="text-[#878C91] text-sm leading-relaxed flex-1">
-                        Pelaporan inventarisasi GRK lebih konsisten dan dapat dibandingan antar-tahun.
-                    </p>
-                    <a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
-                        <i class="bx bx-right-arrow-alt text-xl"></i>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Article 3 -->
-            <div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
-                <div class="flex flex-col gap-6">
-                    <div class="flex items-center justify-between">
-                        <div class="w-4 h-4 bg-violet-700 rounded-full"></div>
-                    </div>
-                    <h3 class="text-xl md:text-2xl font-semibold text-black">
-                        Optimalkan Dampak Aksi Iklim Lewat Pelaporan Emisi yang Transparan
-                    </h3>
-                </div>
-                <div class="flex items-end justify-between gap-4 mt-6">
-                    <p class="text-[#878C91] text-sm leading-relaxed flex-1">
-                        Transparansi pelaporan membantu evaluasi dan memastikan efektivitas program iklim daerah.
-                    </p>
-                    <a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
-                        <i class="bx bx-right-arrow-alt text-xl"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="relative bg-[#fff] py-20 fade-in">
-    <div class="container mx-auto p-5">
-        <div class="flex flex-col md:flex-row gap-5">
-            <div class="flex flex-col gap-3 md:w-[50%]">
-                <div><a href=""><img src="{{ asset('assets/images/logo.png') }}" width="120" alt=""></a></div>
-                <div class="mt-3">
-                    <p class="text-[#878C91] text-sm">
-                        Sistem Informasi Gas Rumah Kaca Daerah (SIGD) menyediakan data aktivitas, faktor emisi, inventarisasi GRK, serta laporan
-                        pemantauan aksi mitigasi untuk mendukung perencanaan pembangunan rendah karbon.
-                    </p>
-                </div>
-            </div>
-            <div class="flex flex-col gap-3 md:w-[20%] lg:w-[15%]">
-                <div class="font-semibold mb-5">Tautan Cepat</div>
-                <div><a href="" class="text-[#878C91]">Dashboard</a></div>
-                <div><a href="" class="text-[#878C91]">Data Emisi</a></div>
-                <div><a href="" class="text-[#878C91]">Rencana Aksi</a></div>
-                <div><a href="" class="text-[#878C91]">Resource</a></div>
-                <div><a href="" class="text-[#878C91]">Contact</a></div>
-            </div>
-            <div class="flex flex-col gap-3 md:w-[20%] lg:w-[15%]">
-                <div class="font-semibold mb-5">License</div>
-                <div><a href="" class="text-[#878C91]">Privacy Policy</a></div>
-                <div><a href="" class="text-[#878C91]">Copyright</a></div>
-                <div><a href="" class="text-[#878C91]">Email Address</a></div>
-            </div>
-            <div class="flex flex-col gap-3 md:w-[20%] lg:w-[15%]">
-                <div class="font-semibold mb-5">Contact</div>
-                <div class="flex items-center gap-3">
-                    <div><i class="bx bx-phone"></i></div>
-                    <div><a href="" class="text-[#878C91]">0812634125</a></div>
-                </div>
-                <div class="flex items-center gap-3">
-                    <div><i class="bx bx-envelope"></i></div>
-                    <div><a href="" class="text-[#878C91]">support@gasrumahkaca.go.id</a></div>
-                </div>
-                <div class="flex items-center gap-3">
-                    <div><i class="bx bx-pin"></i></div>
-                    <div><a href="" class="text-[#878C91]">Jl. Mandala V No.67 1, RT.1/RW.2, Cililitan, Kec. Kramat jati.</a></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
 @endsection
\ No newline at end of file
diff --git a/resources/views/partials/index/accordion-item.blade.php b/resources/views/partials/index/accordion-item.blade.php
new file mode 100644
index 0000000..bc4ca47
--- /dev/null
+++ b/resources/views/partials/index/accordion-item.blade.php
@@ -0,0 +1,24 @@
+<!-- Accordion Item Component -->
+<h2 id="accordion-card-heading-{{ $id }}"{{ $id > 1 ? ' class="mt-4"' : '' }}>
+    <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-700 rounded-base shadow-xs border border-gray-200 hover:text-gray-900 hover:bg-gray-50 gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-{{ $id }}" aria-expanded="{{ $id === 1 ? 'true' : 'false' }}" aria-controls="accordion-card-body-{{ $id }}">
+        <span>{{ $question }}</span>
+        <svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7" />
+        </svg>
+    </button>
+</h2>
+<div id="accordion-card-body-{{ $id }}" class="{{ $id === 1 ? '' : 'hidden ' }}border border-t-0 border-gray-200 rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-{{ $id }}">
+    <div class="p-4 md:p-5">
+        @if(isset($listItems))
+            <p class="mb-2 text-[#878C91]">{{ $answer }}</p>
+            <ul class="mb-3 text-[#878C91] list-disc pl-5">
+                @foreach($listItems as $item)
+                    <li>{{ $item }}</li>
+                @endforeach
+            </ul>
+            <p class="text-[#878C91]">{{ $conclusion ?? '' }}</p>
+        @else
+            <p class="mb-2 text-[#878C91]">{{ $answer }}</p>
+        @endif
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/index/article-card.blade.php b/resources/views/partials/index/article-card.blade.php
new file mode 100644
index 0000000..99fe8d5
--- /dev/null
+++ b/resources/views/partials/index/article-card.blade.php
@@ -0,0 +1,19 @@
+<!-- Article Card Component -->
+<div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
+    <div class="flex flex-col gap-6">
+        <div class="flex items-center justify-between">
+            <div class="w-4 h-4 {{ $colorClass }} rounded-full"></div>
+        </div>
+        <h3 class="text-xl md:text-2xl font-semibold text-black">
+            {{ $title }}
+        </h3>
+    </div>
+    <div class="flex items-end justify-between gap-4 mt-6">
+        <p class="text-[#878C91] text-sm leading-relaxed flex-1">
+            {{ $description }}
+        </p>
+        <a href="{{ $url ?? '#' }}" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
+            <i class="bx bx-right-arrow-alt text-xl"></i>
+        </a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/index/article-section.blade.php b/resources/views/partials/index/article-section.blade.php
new file mode 100644
index 0000000..0f5ad2e
--- /dev/null
+++ b/resources/views/partials/index/article-section.blade.php
@@ -0,0 +1,41 @@
+<!-- article section -->
+<section class="relative bg-[#efefef] flex flex-col lg:flex-row gap-4 py-20 fade-in">
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start mb-12">
+            <div class="flex-1">
+                <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
+                    Data Emisi GRK & Analisi Iklim Untuk Mendukung Aksi Iklim Daerah
+                </h2>
+            </div>
+            <div class="flex-1">
+                <p class="text-[#878C91] text-base leading-relaxed">
+                    SIGD menyediakan data emisi GRK yang kredibel dan terstandar,membantu pemerintah dan publik memahami kondisi emisi serta efektifitas program mitigasi.
+                </p>
+                <div class="mt-12"><a class="btn-minimal btn-outline border border-[#000] px-6 py-3 rounded-full" href="">Lihat Selengkapnya</a></div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            @include('partials.index.article-card', [
+                'title' => 'Bagaimana Data GRK Daerah Meningkatkan Keputusan Kebijakan Iklim',
+                'description' => 'Data yang akurat memudahkan perencanaan mitigasi dan adaptasi berbasis kebutuhan nyata.',
+                'colorClass' => 'bg-sky-400',
+                'url' => route('artikel')
+            ])
+
+            @include('partials.index.article-card', [
+                'title' => 'Memahami Tren Emisi dengan Metodologi Berbasis IPCC',
+                'description' => 'Pelaporan inventarisasi GRK lebih konsisten dan dapat dibandingan antar-tahun.',
+                'colorClass' => 'bg-red-500',
+                'url' => '#'
+            ])
+
+            @include('partials.index.article-card', [
+                'title' => 'Optimalkan Dampak Aksi Iklim Lewat Pelaporan Emisi yang Transparan',
+                'description' => 'Transparansi pelaporan membantu evaluasi dan memastikan efektivitas program iklim daerah.',
+                'colorClass' => 'bg-violet-700',
+                'url' => '#'
+            ])
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/index/faq-section.blade.php b/resources/views/partials/index/faq-section.blade.php
new file mode 100644
index 0000000..a1df695
--- /dev/null
+++ b/resources/views/partials/index/faq-section.blade.php
@@ -0,0 +1,59 @@
+<!-- faq section -->
+<section class="relative mx-auto container p-5 fade-in">
+    <div class="py-20">
+        <div class="flex flex-col lg:flex-row gap-4">
+            <div class="flex flex-col gap-5 lg:w-[40%]">
+                <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
+                    FAQ Inventarisasi dan Aksi Iklim
+                </h2>
+                <p class="text-[#878C91] mt-5">Sebagai platform informasi terdepan, kami berkomitmen untuk menyediakan sumber daya edukasi yang komprehensif dan
+                    menjawab pertanyaan umum dari publik dan pemangku kepentingan mengenai data emisi dan upaya mitigasi daerah
+                </p>
+                <div class="flex gap-3 justify-center items-center mt-5">
+                    <a class="btn-minimal btn-outline border px-6 py-3 rounded-full" href="">Akses Materi Edukasi</a>
+                    <a class="btn-minimal btn-link px-6 py-3 underline" href="">Hubungi Kami</a>
+                </div>
+            </div>
+            <div class="flex flex-col gap-3 lg:w-[60%]">
+                <div id="accordion-card" data-accordion="collapse">
+                    @include('partials.index.accordion-item', [
+                        'id' => 1,
+                        'question' => 'Apa itu SIGD dan apa tujuannya?',
+                        'answer' => 'SIGRD adalah Sistem Informasi Gas Rumah Kaca Daerah yang bertujuan untuk memantau, melaporkan, dan mengevaluasi status emisi GRK di wilayah [Nama Daerah] secara transparan dan terintegrasi.'
+                    ])
+
+                    @include('partials.index.accordion-item', [
+                        'id' => 2,
+                        'question' => 'Bagaimanakah metodologi perhitungan emisi yang digunakan?',
+                        'answer' => 'Kami menggunakan pedoman IPCC (Intergovernmental Panel on Climate Change) yang diselaraskan dengan Pedoman Teknis Inventarisasi GRK Nasional (KLHK RI). Ini memastikan data valid dan dapat diperbandingkan.'
+                    ])
+
+                    @include('partials.index.accordion-item', [
+                        'id' => 3,
+                        'question' => 'Apa saja sektor penyumbang emisi utama di daerah ini?',
+                        'answer' => 'Sektor utama meliputi energi, transportasi, industri, dan limbah.'
+                    ])
+
+                    @include('partials.index.accordion-item', [
+                        'id' => 4,
+                        'question' => 'Bagaimana masyarakat umum dapat berpartisipasi dalam upaya mitigasi?',
+                        'answer' => 'Masyarakat dapat berpartisipasi melalui berbagai cara seperti menggunakan transportasi ramah lingkungan, menghemat energi, dan mengurangi limbah.'
+                    ])
+
+                    @include('partials.index.accordion-item', [
+                        'id' => 5,
+                        'question' => 'Bagaimana cara mengakses data terbaru di platform SIGD?',
+                        'answer' => 'Data terbaru di platform SIGD dapat diakses melalui beberapa cara:',
+                        'listItems' => [
+                            'Dashboard utama yang menampilkan ringkasan data emisi terkini',
+                            'Menu "Data Inventarisasi" untuk data inventarisasi GRK lengkap',
+                            'Bagian "Laporan" untuk mengunduh laporan berkala',
+                            'Fitur "Pencarian Data" untuk mencari data spesifik berdasarkan sektor, tahun, atau wilayah'
+                        ],
+                        'conclusion' => 'Semua data diperbaharui secara berkala dan dapat diunduh dalam berbagai format seperti PDF, Excel, atau CSV untuk keperluan analisis lebih lanjut.'
+                    ])
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/index/featured-section.blade.php b/resources/views/partials/index/featured-section.blade.php
new file mode 100644
index 0000000..64969b5
--- /dev/null
+++ b/resources/views/partials/index/featured-section.blade.php
@@ -0,0 +1,19 @@
+<!-- featured section -->
+<section class="relative mx-auto container p-5 fade-in">
+    <div class="bg-[#2084FF] rounded-[10px] pt-20">
+        <div class="flex flex-row  gap-4 justify-center text-center items-center text-white">
+            <div class="md:w-[70%]">
+                <h1 class="text-[32px] md:text-[42px] font-semibold">Semua yang Anda Butuhkan, Lengkap dan Terverifikasi.</h1>
+            </div>
+        </div>
+        <div class="flex flex-col lg:flex-row justify-center items-center gap-4 mt-[35px] px-20 lg:w-[90%] mx-auto text-center">
+            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Inventarisasi Sektor</a></div>
+            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Tren Tahun ke Tahun</a></div>
+            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">RAD GRK Interaktif</a></div>
+            <div class="btn-minimal btn-tab rounded-full w-full border px-6 py-3 text-white"><a href="">Peta Geografis Aksi</a></div>
+        </div>
+        <div class="flex justify-center -mt-[50px]">
+            <img src="{{ asset('assets/images/dashboard.png') }}" alt="">
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/index/footer.blade.php b/resources/views/partials/index/footer.blade.php
new file mode 100644
index 0000000..0036d90
--- /dev/null
+++ b/resources/views/partials/index/footer.blade.php
@@ -0,0 +1,45 @@
+<!-- footer section -->
+<section class="relative bg-[#fff] py-20 fade-in">
+    <div class="container mx-auto p-5">
+        <div class="flex flex-col md:flex-row gap-5">
+            <div class="flex flex-col gap-3 md:w-[50%]">
+                <div><a href=""><img src="{{ asset('assets/images/logo.png') }}" width="120" alt=""></a></div>
+                <div class="mt-3">
+                    <p class="text-[#878C91] text-sm">
+                        Sistem Informasi Gas Rumah Kaca Daerah (SIGD) menyediakan data aktivitas, faktor emisi, inventarisasi GRK, serta laporan
+                        pemantauan aksi mitigasi untuk mendukung perencanaan pembangunan rendah karbon.
+                    </p>
+                </div>
+            </div>
+            <div class="flex flex-col gap-3 md:w-[20%] lg:w-[15%]">
+                <div class="font-semibold mb-5">Tautan Cepat</div>
+                <div><a href="" class="text-[#878C91]">Dashboard</a></div>
+                <div><a href="" class="text-[#878C91]">Data Emisi</a></div>
+                <div><a href="" class="text-[#878C91]">Rencana Aksi</a></div>
+                <div><a href="" class="text-[#878C91]">Resource</a></div>
+                <div><a href="" class="text-[#878C91]">Contact</a></div>
+            </div>
+            <div class="flex flex-col gap-3 md:w-[20%] lg:w-[15%]">
+                <div class="font-semibold mb-5">License</div>
+                <div><a href="" class="text-[#878C91]">Privacy Policy</a></div>
+                <div><a href="" class="text-[#878C91]">Copyright</a></div>
+                <div><a href="" class="text-[#878C91]">Email Address</a></div>
+            </div>
+            <div class="flex flex-col gap-3 md:w-[20%] lg:w-[15%]">
+                <div class="font-semibold mb-5">Contact</div>
+                <div class="flex items-center gap-3">
+                    <div><i class="bx bx-phone"></i></div>
+                    <div><a href="" class="text-[#878C91]">0812634125</a></div>
+                </div>
+                <div class="flex items-center gap-3">
+                    <div><i class="bx bx-envelope"></i></div>
+                    <div><a href="" class="text-[#878C91]">support@gasrumahkaca.go.id</a></div>
+                </div>
+                <div class="flex items-center gap-3">
+                    <div><i class="bx bx-pin"></i></div>
+                    <div><a href="" class="text-[#878C91]">Jl. Mandala V No.67 1, RT.1/RW.2, Cililitan, Kec. Kramat jati.</a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/index/hero.blade.php b/resources/views/partials/index/hero.blade.php
new file mode 100644
index 0000000..846e11e
--- /dev/null
+++ b/resources/views/partials/index/hero.blade.php
@@ -0,0 +1,15 @@
+<!-- hero section -->
+<section class="relative min-h-[calc(100vh-120px)] flex items-center justify-center fade-in">
+    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ asset('assets/images/bg-front.png') }}');"></div>
+    <div class="absolute inset-0"></div>
+    <div class="relative z-10">
+        <div class="flex flex-col items-center text-center mx-auto gap-1 w-[80%] md:w-[80%] lg:w-[60%]">
+            <h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px] leading-[110%] tracking-[-0.03em]">Sistem Informasi</h1>
+            <h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px] leading-[110%] tracking-[-0.03em]">Gas Rumah Kaca Daerah</h1>
+            <p class="mb-0 text-[#878C91] md:w-[70%] pt-12">Platform terintegrasi untuk memantau, melaporkan, dan mengevaluasi status emisi GRK serta kemajuan Rencana Aksi Mitigasi di wilayah Jakarta. Akses data inventarisasi terbaru dan peran serta publik.</p>
+            <div class="flex flex-col md:flex-row gap-10 md:gap-3 mt-20">
+                <div><a href="{{ route('rencana-aksi') }}" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
+                <div><a href="{{ url('login') }}" class="btn-minimal btn-secondary rounded-full px-10 py-4">Akses Dashboard Terbaru</a></div>
+            </div>
+        </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/index/info-card.blade.php b/resources/views/partials/index/info-card.blade.php
new file mode 100644
index 0000000..20b1a05
--- /dev/null
+++ b/resources/views/partials/index/info-card.blade.php
@@ -0,0 +1,7 @@
+<!-- Info Card Component -->
+<div class="info-card bg-[url({{ asset($backgroundImage) }})] bg-no-repeat bg-cover flex flex-col items-start gap-3 text-white justify-end p-3 pb-[30px] rounded-[10px] h-[500px]">
+    <div class="content">
+        <h4 class="text-[20px]">{{ $title }}</h4>
+        <p class="font-thin text-sm">{{ $description }}</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/index/info-section.blade.php b/resources/views/partials/index/info-section.blade.php
new file mode 100644
index 0000000..c926cfd
--- /dev/null
+++ b/resources/views/partials/index/info-section.blade.php
@@ -0,0 +1,41 @@
+<!-- info section -->
+<section class="relative container mx-auto p-10 fade-in">
+    <div class="flex flex-col md:flex-row gap-4 justify-between items-center">
+        <div class="md:w-[50%]">
+            <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
+                Informasi Gas Rumah Kaca Daerah
+            </h2>
+        </div>
+        <div class="md:w-[50%]">
+            <p class="text-[16px] text-[#878C91]">Perhitungan emisi GRK mengikuti standar IPCC terbaru dan divalidasi oleh lembaga lingkungan terkait, serta didukung kerja sama dengan Kementerian LHK untuk memastikan akuntabilitas data.</p>
+        </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-[50px]">
+        @include('partials.index.info-card', [
+            'title' => 'Energi',
+            'description' => 'Meliputi emisi dari pembakaran bahan bakar fosil di sektor Transportasi, Pembangkit Listrik, Industri, Komersial, dan Rumah Tangga.',
+            'backgroundImage' => 'assets/images/bg1.png'
+        ])
+
+        @include('partials.index.info-card', [
+            'title' => 'Industrial Processes and Product Use',
+            'description' => 'Emisi yang dilepaskan dari proses kimia dan fisik dalam industri manufaktur, bukan dari pembakaran bahan bakar itu sendiri.',
+            'backgroundImage' => 'assets/images/bg2.png'
+        ])
+
+        @include('partials.index.info-card', [
+            'title' => 'Pertanian & Lahan',
+            'description' => 'Meliputi emisi dan serapan (penghilangan) GRK dari kegiatan pertanian, kehutanan, peternakan, dan perubahan tata guna lahan.',
+            'backgroundImage' => 'assets/images/bg3.png'
+        ])
+
+        @include('partials.index.info-card', [
+            'title' => 'Limbah',
+            'description' => 'Emisi Metana yang dihasilkan dari penguraian sampah padat di TPA dan gas dari pengelolaan air limbah domestik serta industri.',
+            'backgroundImage' => 'assets/images/bg4.png'
+        ])
+    </div>
+    <div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-[45px]">
+        <div><a href="{{ route('rencana-aksi') }}" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/index/quote-section.blade.php b/resources/views/partials/index/quote-section.blade.php
new file mode 100644
index 0000000..de1fa78
--- /dev/null
+++ b/resources/views/partials/index/quote-section.blade.php
@@ -0,0 +1,24 @@
+<!-- quote section -->
+<section class="relative mx-auto container p-5 fade-in">
+    <div class="py-20">
+        <div class="flex flex-row  gap-4 justify-center text-center items-center">
+            <div class="">
+                <h1 class="text-[22px] md:text-5xl leading-[160%]">Kami menjamin pengujian komprehensif didukung metodologi standar ISO/IEC 17025 dan tim analis tersertifikasi</h1>
+            </div>
+        </div>
+        <div class="flex md:flex-row flex-col md:justify-between items-center gap-[35px] lg:gap-4 mt-[55px] px-20">
+            <div class="flex justify-center items-center gap-3">
+                <div class="bg-[#eee] rounded-full p-3"><img width="45" src="{{ asset('assets/images/avatar.png') }}" alt="avatar"></div>
+                <div class="flex flex-col gap-1">
+                    <span class="font-semibold text-xl">Ilham</span>
+                    <span class="text-[#878C91] text-sm">Tenaga Ahli</span>
+                </div>
+            </div>
+            <div class="flex justify-between gap-5">
+                <div><a class="btn-minimal btn-icon p-3 rounded-full border" href=""><i class="bx bx-left-arrow-alt"></i></a></div>
+                <div class="text-[#878C91]">01 &nbsp;/&nbsp; 05</div>
+                <div><a class="btn-minimal btn-icon p-3 bg-[#2084FF] text-white rounded-full" href=""><i class="bx bx-right-arrow-alt"></i></a></div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/rencana-aksi/header.blade.php b/resources/views/partials/rencana-aksi/header.blade.php
new file mode 100644
index 0000000..36f49d2
--- /dev/null
+++ b/resources/views/partials/rencana-aksi/header.blade.php
@@ -0,0 +1,25 @@
+<!-- header section -->
+<section class="relative min-h-[calc(40vh-60px)] flex items-center justify-center fade-in">
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-center lg:items-start">
+            <div class="flex-1 text-center lg:text-left">
+                <h1 class="mb-4 font-semibold text-4xl md:text-5xl lg:text-6xl leading-[110%] tracking-[-0.03em]">
+                    <span class="text-black/50">Rencana Aksi</span><br/>
+                    <span class="text-black">Penurunan Emisi</span>
+                </h1>
+            </div>
+            <div class="flex-1 lg:max-w-md">
+                <p class="mb-6 text-[#878C91] text-base leading-relaxed">
+                    Data yang Andal adalah fondasi utama untuk verifikasi kepatuhan regulasi dan pembangunan keberlanjutan daerah. Kami menyajikan status dan capaian program mitigasi yang terverifikasi.
+                </p>
+                <a href="#" class="btn-minimal btn-primary rounded-full px-8 py-4 text-white inline-flex items-center gap-3">
+                    <span>Akses Dokumen RAD GRK</span>
+                    <i class="bx bx-right-arrow-alt"></i>
+                </a>
+            </div>
+        </div>
+        <div class="mt-12">
+            <img class="w-full h-64 md:h-80 rounded-2xl object-cover shadow-lg" src="{{ asset('assets/images/header-image.png') }}" alt="Rencana Aksi Penurunan Emisi" />
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/rencana-aksi/info-section.blade.php b/resources/views/partials/rencana-aksi/info-section.blade.php
new file mode 100644
index 0000000..5d2c72d
--- /dev/null
+++ b/resources/views/partials/rencana-aksi/info-section.blade.php
@@ -0,0 +1,59 @@
+<!-- info section -->
+<section class="relative mx-auto container px-4 sm:px-6 lg:px-8 py-12 fade-in">
+    <div class="py-12">
+        <div class="flex flex-col gap-8">
+            <div class="text-center lg:text-left">
+                <h2 class="text-3xl md:text-4xl lg:text-5xl font-medium leading-[120%] mb-6">
+                    <span class="text-black/50">Mewujudkan Jakarta Nol Emisi:</span>
+                    <span class="text-black"> Strategi dan Implementasi</span>
+                </h2>
+            </div>
+            <p class="text-[#878C91] text-base leading-7 w-full text-justify">
+                Upaya ambisius DKI Jakarta dalam mitigasi perubahan iklim diwujudkan melalui Rencana Aksi Daerah (RAD) Gas Rumah Kaca. Dokumen ini memetakan program spesifik di seluruh sektor untuk mencapai target penurunan emisi yang ditetapkan, didukung oleh data inventarisasi yang transparan dari SIGRD.
+            </p>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-12">
+            @include('partials.rencana-aksi.sector-card', [
+                'title' => 'Energi',
+                'description' => 'Meliputi program efisiensi energi bangunan, transisi kendaraan listrik dan pengembangan infrastruktur pendukung, serta modernisasi transportasi publik rendah emisi untuk mengurangi emisi.',
+                'image' => 'assets/images/sektor-energi.png'
+            ])
+
+            @include('partials.rencana-aksi.sector-card', [
+                'title' => 'Limbah',
+                'description' => 'Berfokus pada upaya pengurangan emisi Metana melalui optimalisasi pemanfaatan gas TPA, pembangunan PSEL, dan peningkatan kapasitas instalasi pengolahan air limbah domestik dan industri.',
+                'image' => 'assets/images/sektor-limbah.png'
+            ])
+
+            @include('partials.rencana-aksi.sector-card', [
+                'title' => 'Transportasi',
+                'description' => 'Meliputi program efisiensi energi bangunan, transisi kendaraan listrik dan pengembangan infrastruktur pendukung, serta modernisasi transportasi publik rendah emisi untuk mengurangi emisi.',
+                'image' => 'assets/images/sektor-transportasi.png'
+            ])
+
+            @include('partials.rencana-aksi.sector-card', [
+                'title' => 'IPPU',
+                'description' => 'Berfokus pada upaya pengurangan emisi Metana melalui optimalisasi pemanfaatan gas TPA, pembangunan PSEL, dan peningkatan kapasitas instalasi pengolahan air limbah domestik dan industri.',
+                'image' => 'assets/images/sektor-ippu.png'
+            ])
+        </div>
+
+        <div class="flex flex-col gap-8 mt-16 px-4 md:px-6">
+            <div class="text-center lg:text-left">
+                <h2 class="text-3xl md:text-4xl lg:text-5xl font-medium leading-[120%] mb-6">
+                    <span class="text-black/50">Merancang dan Mengukur</span><br/>
+                    <span class="text-black">Aksi Mitigasi Berbasis Data</span>
+                </h2>
+            </div>
+            <div class="text-[#878C91] text-base leading-relaxed w-full">
+                <p class="mb-8 text-justify leading-7 w-full">
+                    Rencana Aksi Daerah (RAD) GRK DKI Jakarta dimulai dengan penetapan Baseline Emisi (Tahun Dasar) dan proyeksi skenario Business as Usual (BAU). Perencanaan aksi ini adalah hasil kolaborasi multi-SKPD, memastikan target penurunan emisi yang ambisius namun realistis. Kami mengidentifikasi potensi mitigasi tertinggi di sektor Energi (terutama Transportasi) dan Limbah sebagai fokus utama, sesuai dengan analisis data inventarisasi SIGRD.
+                </p>
+                <p class="text-justify leading-7 w-full">
+                    Setiap program aksi wajib menggunakan metodologi Verifikasi dan Validasi (V&V) untuk menghitung Potensi Penurunan Emisi (PPE) yang dapat dicapai. Perhitungan ini dilakukan dengan membandingkan emisi aktual setelah aksi dengan skenario BAU. Dengan demikian, SIGRD tidak hanya mencatat daftar program, tetapi juga secara berkelanjutan mengevaluasi efektivitas setiap kebijakan dalam mendukung pencapaian target nol emisi DKI Jakarta.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/partials/rencana-aksi/sector-card.blade.php b/resources/views/partials/rencana-aksi/sector-card.blade.php
new file mode 100644
index 0000000..21ba253
--- /dev/null
+++ b/resources/views/partials/rencana-aksi/sector-card.blade.php
@@ -0,0 +1,14 @@
+<!-- Sector Card Component -->
+<div class="flex flex-col gap-6">
+    <h3 class="text-2xl md:text-3xl font-medium">
+        <span class="text-black/50">Sektor</span>
+        <span class="text-black"> {{ $title }}</span>
+    </h3>
+    <p class="text-[#878C91] text-base leading-relaxed">
+        {{ $description }}
+    </p>
+    <div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
+        <img class="w-full h-full object-cover" src="{{ asset($image) }}" alt="Sektor {{ $title }}" />
+        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/rencana-aksi/status-card.blade.php b/resources/views/partials/rencana-aksi/status-card.blade.php
new file mode 100644
index 0000000..51fbd43
--- /dev/null
+++ b/resources/views/partials/rencana-aksi/status-card.blade.php
@@ -0,0 +1,19 @@
+<!-- Status Program Card Component -->
+<div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
+    <div class="flex flex-col gap-6">
+        <div class="flex items-center justify-between">
+            <div class="w-4 h-4 {{ $colorClass }} rounded-full"></div>
+        </div>
+        <h3 class="text-xl md:text-2xl font-semibold text-black">
+            {{ $title }}
+        </h3>
+    </div>
+    <div class="flex items-end justify-between gap-4 mt-6">
+        <p class="text-[#878C91] text-sm leading-relaxed flex-1">
+            {{ $description }}
+        </p>
+        <a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
+            <i class="bx bx-right-arrow-alt text-xl"></i>
+        </a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/rencana-aksi/status-section.blade.php b/resources/views/partials/rencana-aksi/status-section.blade.php
new file mode 100644
index 0000000..32288a0
--- /dev/null
+++ b/resources/views/partials/rencana-aksi/status-section.blade.php
@@ -0,0 +1,36 @@
+<!-- status section -->
+<section class="relative bg-[#efefef] py-20 fade-in">
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start mb-12">
+            <div class="flex-1">
+                <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
+                    Status Program Mitigasi Sektoral
+                </h2>
+            </div>
+            <div class="flex-1">
+                <p class="text-[#878C91] text-base leading-relaxed">
+                    Pelacakan kinerja program mitigasi yang dilaksanakan oleh SKPD terkait di seluruh sektor. Lihat Potensi Penurunan Emisi (PPE) dan status implementasi terkini.
+                </p>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            @include('partials.rencana-aksi.status-card', [
+                'title' => 'Sektor Energi & Transportasi',
+                'description' => 'Program efisiensi energi, transisi kendaraan listrik, dan pengembangan transportasi publik rendah emisi.',
+                'colorClass' => 'bg-sky-400'
+            ])
+
+            @include('partials.rencana-aksi.status-card', [
+                'title' => 'Sektor Limbah',
+                'description' => 'Optimalisasi TPA, pembangunan PSEL, dan pengelolaan air limbah untuk mengurangi emisi.',
+                'colorClass' => 'bg-red-500'
+            ])
+
+            @include('partials.rencana-aksi.status-card', [
+                'title' => 'Sektor AFOLU & IPPU',
+                'description' => 'Konservasi lahan hijau, rehabilitasi mangrove, dan pemantauan F-Gas industri.',
+                'colorClass' => 'bg-violet-700'
+            ])
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/rencana-aksi.blade.php b/resources/views/rencana-aksi.blade.php
index 08cea76..82068ec 100644
--- a/resources/views/rencana-aksi.blade.php
+++ b/resources/views/rencana-aksi.blade.php
@@ -1,200 +1,10 @@
 @extends('layouts.front')
 @section('content')
 
-<section class="relative min-h-[calc(40vh-60px)] flex items-center justify-center fade-in">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-center lg:items-start">
-            <div class="flex-1 text-center lg:text-left">
-                <h1 class="mb-4 font-semibold text-4xl md:text-5xl lg:text-6xl leading-[110%] tracking-[-0.03em]">
-                    <span class="text-black/50">Rencana Aksi</span><br/>
-                    <span class="text-black">Penurunan Emisi</span>
-                </h1>
-            </div>
-            <div class="flex-1 lg:max-w-md">
-                <p class="mb-6 text-[#878C91] text-base leading-relaxed">
-                    Data yang Andal adalah fondasi utama untuk verifikasi kepatuhan regulasi dan pembangunan keberlanjutan daerah. Kami menyajikan status dan capaian program mitigasi yang terverifikasi.
-                </p>
-                <a href="#" class="btn-minimal btn-primary rounded-full px-8 py-4 text-white inline-flex items-center gap-3">
-                    <span>Akses Dokumen RAD GRK</span>
-                    <i class="bx bx-right-arrow-alt"></i>
-                </a>
-            </div>
-        </div>
-        <div class="mt-12">
-            <img class="w-full h-64 md:h-80 rounded-2xl object-cover shadow-lg" src="{{ asset('assets/images/header-image.png') }}" alt="Rencana Aksi Penurunan Emisi" />
-        </div>
-    </div>
-</section>
+@include('partials.rencana-aksi.header')
 
-<section class="relative mx-auto container px-4 sm:px-6 lg:px-8 py-12 fade-in">
-    <div class="py-12">
-        <div class="flex flex-col gap-8">
-            <div class="text-center lg:text-left">
-                <h2 class="text-3xl md:text-4xl lg:text-5xl font-medium leading-[120%] mb-6">
-                    <span class="text-black/50">Mewujudkan Jakarta Nol Emisi:</span>
-                    <span class="text-black"> Strategi dan Implementasi</span>
-                </h2>
-            </div>
-            <p class="text-[#878C91] text-base leading-7 w-full text-justify">
-                Upaya ambisius DKI Jakarta dalam mitigasi perubahan iklim diwujudkan melalui Rencana Aksi Daerah (RAD) Gas Rumah Kaca. Dokumen ini memetakan program spesifik di seluruh sektor untuk mencapai target penurunan emisi yang ditetapkan, didukung oleh data inventarisasi yang transparan dari SIGRD.
-            </p>
-        </div>
+@include('partials.rencana-aksi.info-section')
 
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-12">
-            <!-- Sektor Energi -->
-            <div class="flex flex-col gap-6">
-                <h3 class="text-2xl md:text-3xl font-medium">
-                    <span class="text-black/50">Sektor</span>
-                    <span class="text-black"> Energi</span>
-                </h3>
-                <p class="text-[#878C91] text-base leading-relaxed">
-                    Meliputi program efisiensi energi bangunan, transisi kendaraan listrik dan pengembangan infrastruktur pendukung, serta modernisasi transportasi publik rendah emisi untuk mengurangi emisi.
-                </p>
-                <div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
-                    <img class="w-full h-full object-cover"src="{{ asset('assets/images/sektor-energi.png') }}" alt="Sektor Energi" />
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
-                </div>
-            </div>
+@include('partials.rencana-aksi.status-section')
 
-            <!-- Sektor Limbah -->
-            <div class="flex flex-col gap-6">
-                <h3 class="text-2xl md:text-3xl font-medium">
-                    <span class="text-black/50">Sektor</span>
-                    <span class="text-black"> Limbah</span>
-                </h3>
-                <p class="text-[#878C91] text-base leading-relaxed">
-                    Berfokus pada upaya pengurangan emisi Metana melalui optimalisasi pemanfaatan gas TPA, pembangunan PSEL, dan peningkatan kapasitas instalasi pengolahan air limbah domestik dan industri.
-                </p>
-                <div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
-                    <img class="w-full h-full object-cover" src="{{ asset('assets/images/sektor-limbah.png') }}" alt="Sektor Limbah" />
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
-                </div>
-            </div>
-
-            <!-- Sektor Transportasi -->
-            <div class="flex flex-col gap-6">
-                <h3 class="text-2xl md:text-3xl font-medium">
-                    <span class="text-black/50">Sektor</span>
-                    <span class="text-black"> Transportasi</span>
-                </h3>
-                <p class="text-[#878C91] text-base leading-relaxed">
-                    Meliputi program efisiensi energi bangunan, transisi kendaraan listrik dan pengembangan infrastruktur pendukung, serta modernisasi transportasi publik rendah emisi untuk mengurangi emisi.
-                </p>
-                <div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
-                    <img class="w-full h-full object-cover" src="{{ asset('assets/images/sektor-transportasi.png') }}" alt="Sektor Transportasi" />
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
-                </div>
-            </div>
-
-            <!-- Sektor IPPU -->
-            <div class="flex flex-col gap-6">
-                <h3 class="text-2xl md:text-3xl font-medium">
-                    <span class="text-black/50">Sektor</span>
-                    <span class="text-black"> IPPU</span>
-                </h3>
-                <p class="text-[#878C91] text-base leading-relaxed">
-                    Berfokus pada upaya pengurangan emisi Metana melalui optimalisasi pemanfaatan gas TPA, pembangunan PSEL, dan peningkatan kapasitas instalasi pengolahan air limbah domestik dan industri.
-                </p>
-                <div class="relative h-64 rounded-xl overflow-hidden bg-neutral-900">
-                    <img class="w-full h-full object-cover" src="{{ asset('assets/images/sektor-ippu.png') }}" alt="Sektor IPPU" />
-                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
-                </div>
-            </div>
-        </div>
-        <div class="flex flex-col gap-8 mt-16 px-4 md:px-6">
-            <div class="text-center lg:text-left">
-                <h2 class="text-3xl md:text-4xl lg:text-5xl font-medium leading-[120%] mb-6">
-                    <span class="text-black/50">Merancang dan Mengukur</span><br/>
-                    <span class="text-black">Aksi Mitigasi Berbasis Data</span>
-                </h2>
-            </div>
-            <div class="text-[#878C91] text-base leading-relaxed w-full">
-                <p class="mb-8 text-justify leading-7 w-full">
-                    Rencana Aksi Daerah (RAD) GRK DKI Jakarta dimulai dengan penetapan Baseline Emisi (Tahun Dasar) dan proyeksi skenario Business as Usual (BAU). Perencanaan aksi ini adalah hasil kolaborasi multi-SKPD, memastikan target penurunan emisi yang ambisius namun realistis. Kami mengidentifikasi potensi mitigasi tertinggi di sektor Energi (terutama Transportasi) dan Limbah sebagai fokus utama, sesuai dengan analisis data inventarisasi SIGRD.
-                </p>
-                <p class="text-justify leading-7 w-full">
-                    Setiap program aksi wajib menggunakan metodologi Verifikasi dan Validasi (V&V) untuk menghitung Potensi Penurunan Emisi (PPE) yang dapat dicapai. Perhitungan ini dilakukan dengan membandingkan emisi aktual setelah aksi dengan skenario BAU. Dengan demikian, SIGRD tidak hanya mencatat daftar program, tetapi juga secara berkelanjutan mengevaluasi efektivitas setiap kebijakan dalam mendukung pencapaian target nol emisi DKI Jakarta.
-                </p>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section class="relative bg-[#efefef] py-20 fade-in">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex flex-col lg:flex-row gap-8 lg:gap-16 items-start mb-12">
-            <div class="flex-1">
-                <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold leading-tight">
-                    Status Program Mitigasi Sektoral
-                </h2>
-            </div>
-            <div class="flex-1">
-                <p class="text-[#878C91] text-base leading-relaxed">
-                    Pelacakan kinerja program mitigasi yang dilaksanakan oleh SKPD terkait di seluruh sektor. Lihat Potensi Penurunan Emisi (PPE) dan status implementasi terkini.
-                </p>
-            </div>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <!-- Sektor Energi & Transportasi -->
-            <div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
-                <div class="flex flex-col gap-6">
-                    <div class="flex items-center justify-between">
-                        <div class="w-4 h-4 bg-sky-400 rounded-full"></div>
-                    </div>
-                    <h3 class="text-xl md:text-2xl font-semibold text-black">
-                        Sektor Energi & Transportasi
-                    </h3>
-                </div>
-                <div class="flex items-end justify-between gap-4 mt-6">
-                    <p class="text-[#878C91] text-sm leading-relaxed flex-1">
-                        Program efisiensi energi, transisi kendaraan listrik, dan pengembangan transportasi publik rendah emisi.
-                    </p>
-                    <a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
-                        <i class="bx bx-right-arrow-alt text-xl"></i>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Sektor Limbah -->
-            <div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
-                <div class="flex flex-col gap-6">
-                    <div class="flex items-center justify-between">
-                        <div class="w-4 h-4 bg-red-500 rounded-full"></div>
-                    </div>
-                    <h3 class="text-xl md:text-2xl font-semibold text-black">
-                        Sektor Limbah
-                    </h3>
-                </div>
-                <div class="flex items-end justify-between gap-4 mt-6">
-                    <p class="text-[#878C91] text-sm leading-relaxed flex-1">
-                        Optimalisasi TPA, pembangunan PSEL, dan pengelolaan air limbah untuk mengurangi emisi.
-                    </p>
-                    <a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
-                        <i class="bx bx-right-arrow-alt text-xl"></i>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Sektor AFOLU & IPPU -->
-            <div class="bg-white rounded-[20px] p-8 shadow-lg flex flex-col justify-between h-full">
-                <div class="flex flex-col gap-6">
-                    <div class="flex items-center justify-between">
-                        <div class="w-4 h-4 bg-violet-700 rounded-full"></div>
-                    </div>
-                    <h3 class="text-xl md:text-2xl font-semibold text-black">
-                        Sektor AFOLU & IPPU
-                    </h3>
-                </div>
-                <div class="flex items-end justify-between gap-4 mt-6">
-                    <p class="text-[#878C91] text-sm leading-relaxed flex-1">
-                        Konservasi lahan hijau, rehabilitasi mangrove, dan pemantauan F-Gas industri.
-                    </p>
-                    <a href="#" class="btn-minimal btn-outline border border-black px-6 py-3 rounded-full flex items-center justify-center">
-                        <i class="bx bx-right-arrow-alt text-xl"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
 @endsection
\ No newline at end of file