298 lines
22 KiB
PHP
298 lines
22 KiB
PHP
@extends('layouts.front')
|
|
@section('content')
|
|
|
|
<section class="relative continer py-[90px] fade-in">
|
|
<div class="flex flex-col items-center text-center mx-auto py-100 gap-1 w-[80%] md:w-[80%] lg:w-[60%]">
|
|
<h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px]">Sistem Informasi</h1>
|
|
<h1 class="mb-0 font-semibold text-[42px] md:text-[52px] lg:text-[72px]">Gas Rumah Kaca Daerah</h1>
|
|
<p class="mb-0 text-[#878C91] md:w-[70%]">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="" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi <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>
|
|
</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>
|
|
</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="" class="btn-minimal btn-primary rounded-full px-10 py-4 text-white">Lihat Rencana Aksi <i class="bx bx-right-arrow-alt"></i></a></div>
|
|
</div>
|
|
</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>
|
|
|
|
<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">Kami menjamin pengujian komprehensif didukung metodologi standar <br> 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="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png" alt=""></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 / 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>
|
|
|
|
<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%]">
|
|
<h1 class="text-[22px] md:text-5xl">FAQ Inventarisasi dan Aksi Iklim</h1>
|
|
<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>
|
|
|
|
<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>
|
|
</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>
|
|
</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"> </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>
|
|
</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"> </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>
|
|
</div>
|
|
</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"> </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>
|
|
</div>
|
|
</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 |