ilham
/
sigd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add 'Artikel' page and update routing; enhance UI with new background image and styles

john
Falih Ananta 2025-12-16 11:19:03 +07:00
parent 63104d83ea
commit 596367ca1a
6 changed files with 255 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/FrontController.php
View File

@ -20,4 +20,8 @@ class FrontController extends Controller
$data['title'] = 'Rencana Aksi';
return view('rencana-aksi',$data);
}
function artikel() {
$data['title'] = 'Artikel';
return view('artikel',$data);
}
}

BIN
public/assets/images/article-header-image.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 MiB

165
resources/views/artikel.blade.php 100644
View File

@ -0,0 +1,165 @@
@extends('layouts.front')
@section('content')
<!-- Hero Section with Background Image -->
<section class="relative h-screen bg-cover bg-center bg-no-repeat" style="background-image: url('{{ asset('assets/images/article-header-image.png') }}');">
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/70"></div>
<div class="relative z-10 h-full flex items-center">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-semibold text-white mb-8">
Dari Angka Menjadi Aksi: Bagaimana Data GRK Daerah Mengubah Kualitas Kebijakan Iklim
</h1>
<!-- Down Button -->
<a href="#" class="inline-flex items-center justify-center w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full border-2 border-white/30 text-white hover:bg-white/30 transition-all duration-300">
<i class="bx bx-chevron-down text-xl"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Main Content -->
<section class="relative bg-white py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- Breadcrumb -->
<nav class="mb-8">
<div class="inline-flex items-center space-x-2 text-sm bg-gray-50 px-4 py-3 rounded-lg border">
<a href="{{ route('index') }}" class="text-blue-600 hover:text-blue-800 flex items-center">
<i class="bx bx-home mr-1"></i>
Beranda
</a>
<i class="bx bx-chevron-right text-gray-400"></i>
<a href="{{ route('artikel') }}" class="text-blue-600 hover:text-blue-800">Artikel</a>
<i class="bx bx-chevron-right text-gray-400"></i>
<span class="text-gray-500 text-xs">Dari Angka Menjadi Aksi...</span>
</div>
</nav>
<!-- Article Content -->
<div class="max-w-4xl mx-auto">
<article class="prose prose-lg max-w-none">
<div class="text-gray-800 space-y-6">
<p class="text-base leading-7">
Dalam upaya global memerangi perubahan iklim, seringkali sorotan utama tertuju pada target nasional (seperti Nationally Determined Contribution atau NDC). Namun, pertempuran sesungguhnya terjadi di tingkat tapak: di provinsi, kabupaten, dan kota.
</p>
<p class="text-base leading-7">
Pepatah manajemen kuno mengatakan, "You can't manage what you can't measure" (Anda tidak bisa mengelola apa yang tidak bisa Anda ukur). Hal ini sangat relevan dalam konteks iklim. Data Gas Rumah Kaca (GRK) daerah bukan sekadar tumpukan statistik; ia adalah kompas navigasi bagi pemerintah daerah untuk membuat keputusan yang presisi, hemat anggaran, dan berdampak nyata.
</p>
<p class="text-base leading-7">
Berikut adalah penjelasan mendalam mengenai bagaimana data GRK daerah meningkatkan kualitas keputusan kebijakan iklim.
</p>
<h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4">
Diagnosis yang Presisi: Menghindari Solusi "Satu Ukuran untuk Semua"
</h3>
<p class="text-base leading-7">
Indonesia adalah negara kepulauan dengan karakteristik daerah yang sangat beragam. Kebijakan nasional seringkali bersifat general, namun data GRK daerah memungkinkan adanya diagnosis spesifik.
</p>
<div class="bg-gray-50 p-6 rounded-lg my-6">
<h4 class="font-semibold mb-3">Contoh Kasus:</h4>
<ul class="list-disc pl-6 space-y-2 text-base">
<li>Data GRK DKI Jakarta mungkin menunjukkan bahwa 70% emisi berasal dari sektor Energi (Transportasi).</li>
<li>Sebaliknya, Data GRK Kalimantan Timur mungkin menunjukkan emisi terbesar berasal dari sektor Kehutanan dan Penggunaan Lahan (FOLU).</li>
</ul>
</div>
<p class="text-base leading-7">
<strong>Dampak pada Kebijakan:</strong> Tanpa data ini, pemerintah daerah mungkin salah memprioritaskan program. Dengan data, Jakarta bisa fokus pada elektrifikasi transportasi umum, sementara Kalimantan Timur fokus pada pencegahan deforestasi.
</p>
<h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4">
Efisiensi Anggaran Daerah (APBD)
</h3>
<p class="text-base leading-7">
Sumber daya finansial pemerintah daerah terbatas. Data GRK berfungsi sebagai alat analisis biaya-manfaat untuk menentukan intervensi mana yang memberikan pengurangan emisi terbesar per rupiah yang dikeluarkan.
</p>
<p class="text-base leading-7">
<strong>Ilustrasi:</strong> Jika data menunjukkan bahwa sektor limbah menyumbang emisi metana yang tinggi namun hanya membutuhkan investasi teknologi rendah untuk pengelolaannya, pemerintah dapat memprioritaskan anggaran ke sektor tersebut untuk mendapatkan quick wins (kemenangan cepat) sebelum beralih ke proyek infrastruktur energi yang mahal.
</p>
<h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4">
Membuka Pintu Pendanaan Hijau dan Perdagangan Karbon
</h3>
<p class="text-base leading-7">
Di era carbon pricing (nilai ekonomi karbon), data adalah mata uang baru. Investor hijau, lembaga donor internasional, dan mekanisme pasar karbon menuntut transparansi dan verifikasi.
</p>
<ul class="list-disc pl-6 space-y-2 text-base leading-7">
<li><strong>Kredibilitas:</strong> Proposal proyek iklim yang didukung oleh data historis GRK yang rapi (time-series) jauh lebih dipercaya oleh investor.</li>
<li><strong>Nilai Ekonomi Karbon (NEK):</strong> Untuk berpartisipasi dalam bursa karbon, sebuah daerah harus memiliki baseline emisi yang terukur. Data GRK yang valid memungkinkan daerah untuk menjual kredit karbon dari proyek pelestarian lingkungan mereka, menciptakan Pendapatan Asli Daerah (PAD) baru.</li>
</ul>
<h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4">
Monitoring, Pelaporan, dan Verifikasi (MRV) yang Akuntabel
</h3>
<p class="text-base leading-7">
Kebijakan iklim bukanlah proses sekali jadi, melainkan siklus yang terus berputar. Data GRK memungkinkan pemerintah melakukan evaluasi berbasis bukti (evidence-based evaluation).
</p>
<ul class="list-disc pl-6 space-y-2 text-base leading-7">
<li><strong>Pelacakan Progres:</strong> Apakah larangan penggunaan kantong plastik mengurangi emisi dari pembakaran sampah? Apakah pembangunan jalur sepeda mengurangi emisi transportasi?</li>
<li><strong>Koreksi Kebijakan:</strong> Jika data inventarisasi tahun berikutnya tidak menunjukkan penurunan emisi yang signifikan, pemerintah dapat segera merevisi kebijakan tersebut tanpa harus menunggu bertahun-tahun hingga krisis memburuk.</li>
</ul>
<h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4">
Integrasi dengan Rencana Pembangunan Jangka Menengah Daerah (RPJMD)
</h3>
<p class="text-base leading-7">
Data GRK membantu "membumikan" isu lingkungan ke dalam bahasa pembangunan ekonomi. Dengan data ini, Bappeda (Badan Perencanaan Pembangunan Daerah) dapat mengintegrasikan target iklim ke dalam dokumen perencanaan utama.
</p>
<p class="text-base leading-7">
Ini memastikan bahwa pertumbuhan ekonomi daerah tidak lagi dipisahkan dari daya dukung lingkungan. Kebijakan tata ruang (RTRW) dapat disesuaikan berdasarkan area yang memiliki stok karbon tinggi (seperti lahan gambut atau hutan lindung) agar tidak dikonversi menjadi area industri.
</p>
<div class="bg-blue-50 p-6 rounded-lg my-8">
<h3 class="text-xl font-semibold text-gray-900 mb-4">
Kesimpulan: Data adalah Fondasi Ketahanan
</h3>
<p class="text-base leading-7 mb-4">
Transformasi menuju ekonomi rendah karbon tidak bisa dilakukan hanya dengan intuisi atau mengikuti tren semata. Data GRK daerah memberikan landasan ilmiah yang kuat bagi para pembuat kebijakan.
</p>
<p class="text-base leading-7">
Ketika data dikumpulkan secara akurat, dianalisis dengan cerdas, dan dilaporkan secara transparan, ia berubah dari sekadar angka di atas kertas menjadi alat yang ampuh untuk melindungi masa depan lingkungan sekaligus menjamin kesejahteraan ekonomi daerah.
</p>
</div>
</div>
</article>
<!-- Seconndary Footer Section -->
<div class="mt-12 pt-8 border-t border-gray-200">
<div class="flex items-center justify-between">
<span class="text-gray-600 text-sm">© 2026 Sistem Informasi Gas Rumah Kaca Daerah. All rights reserved.</span>
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors">
<i class="bx bxl-facebook text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">
<i class="bx bxl-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-700 transition-colors">
<i class="bx bxl-linkedin text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-green-600 transition-colors">
<i class="bx bxl-whatsapp text-xl"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection

140
resources/views/index.blade.php
View File

@ -2,20 +2,26 @@
@section('content')
<section class="relative min-h-[calc(100vh-120px)] flex items-center justify-center fade-in">
<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="" class="btn-minimal btn-secondary rounded-full px-10 py-4">Akses Dashboard Terbaru</a></div>
<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>
</div>
</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%]">
<h1 class="text-[22px] md:text-5xl">Informasi Gas Rumah Kaca Daerah</h1>
<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>
@ -99,7 +105,9 @@
<div class="py-20">
<div class="flex flex-col lg:flex-row gap-4">
<div class="flex flex-col gap-5 lg:w-[40%]">
<h1 class="text-[22px] md:text-5xl">FAQ Inventarisasi dan Aksi Iklim</h1>
<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>
@ -188,63 +196,81 @@
</div>
</section>
<section class="relative bg-[#efefef] py-20 fade-in">
<div class="container mx-auto p-5">
<div class="flex flex-col lg:flex-row gap-4">
<div class="lg:w-[60%]">
<h1 class="text-3xl md:text-5xl">Data Emisi GRK & Analisi Iklim Untuk Mendukung Aksi Iklim Daerah</h1>
<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 flex-col gap-5 lg:w-[40%]">
<div>
<p class="text-[#878C91]">
SIGD menyediakan data emisi GRK yang kredibel dan terstandar,membantu pemerintah dan publik memahami
kondisi emisi serta efektifitas program mitigasi.
</p>
</div>
<div class="mt-5"><a class="btn-minimal btn-outline border border-[#000] px-6 py-3 rounded-full" href="">Lihat Selengkapnya</a></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-5 mt-[50px]">
<div class="p-6 bg-white rounded-[20px] shadow-xl">
<div class="flex flex-col gap-3">
<div class="flex justify-between">
<div class="px-1 py-0 bg-[#2084FF] rounded-full">&nbsp;</div>
</div>
<div class="text-xl md:text-2xl font-reguler">Bagaimana Data GRK Daerah Meningkatkan Keputusan Kebijakan Iklim</div>
<div class="flex justify-between items-center mt-5">
<div class="w-[70%]">
<p class="text-[#878C91]">Data yang akurat memudahkan perencanaan mitigasi dan adaptasi berbasis kebutuhan nyata.</p>
</div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="btn-minimal btn-icon px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></div>
<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>
<div class="p-6 bg-white rounded-[20px] shadow-xl">
<div class="flex flex-col gap-3">
<div class="flex justify-between">
<div class="px-1 py-0 bg-[#2084FF] rounded-full">&nbsp;</div>
</div>
<div class="text-xl md:text-2xl font-reguler">Memahami Tren Emisi dengan Metodologi Berbasis IPCC</div>
<div class="flex justify-between items-center mt-5">
<div class="w-[70%]">
<p class="text-[#878C91]">Pelaporan inventarisasi GRK lebih konsisten dan dapat dibandingan antar-tahun.</p>
</div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="btn-minimal btn-icon px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></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>
<div class="p-6 bg-white rounded-[20px] shadow-xl">
<div class="flex flex-col gap-3">
<div class="flex justify-between">
<div class="px-1 py-0 bg-[#2084FF] rounded-full">&nbsp;</div>
</div>
<div class="text-xl md:text-2xl font-reguler">Optimalkan Dampak Aksi Iklim Lewat Pelaporan Emisi yang Transparan</div>
<div class="flex justify-between items-center mt-5">
<div class="w-[70%]">
<p class="text-[#878C91]">Transparansi pelaporan membantu evaluasi dan memastikan efektivitas program iklim daerah.</p>
</div>
<div class="w-[30%] text-right flex justify-center items-center"><a href="" class="btn-minimal btn-icon px-8 py-3 border rounded-full border-[#000]"><i class="bx bx-right-arrow-alt text-2xl"></i></a></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>

6
resources/views/layouts/front.blade.php
View File

@ -179,9 +179,7 @@
<body>
<a href="{{ route('index') }}" class="absolute">
<img src="{{ asset('assets/images/bg-front.png') }}" alt="">
</a>
<a href="{{ route('index') }}" class="absolute"></a>
<section class="navbar px-5 py-8 relative container mx-auto hidden md:block">
<div class="flex justify-between items-center">
@ -190,7 +188,7 @@
<div class="flex gap-4">
<a href="">Edukasi & Regulasi</a>
<a href="">Dokumentasi</a>
<a href="">Inventarisasi</a>
<a href="{{ url('login') }}">Inventarisasi</a>
</div>
</div>
<div><a href="{{ url('login') }}" class="rounded-full px-6 py-3 border">Login</a></div>

1
routes/web.php
View File

@ -8,6 +8,7 @@ use App\Http\Controllers\Auth\CustomRegisterController;
Route::get('/',[FrontController::class,'index'])->name('index');
Route::get('/rencana-aksi',[FrontController::class,'rencanaAksi'])->name('rencana-aksi');
Route::get('/artikel',[FrontController::class,'artikel'])->name('artikel');
Route::get('forgotpass',[CustomLoginController::class,'forgotpass'])->name('forgotpass');
Route::post('forgotpass',[CustomLoginController::class,'forgotpass_post'])->name('forgotpass_post');