@extends('layouts.front')
@section('content')

<section class="relative continer py-[90px]">
    <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="rounded-full bg-[#2084FF] px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
            <div><a href="" class="rounded-full px-10 py-4 border">Akses Dashboard Terbaru</a></div>
        </div>
    </div>
</section>
<section class="relative container mx-auto p-10">
    <div class="flex flex-col md:flex-row gap-4 justify-between items-center">
        <div class="md:w-[50%]"><h1 class="text-[32px] md:text-[42px] font-semibold">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="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] bg-blend-overlay">
            <h4 class="text-[20px]">Energi</h4>
            <p class="font-thin text-sm">We're a UK-based Laravel agency. We'll get your project moving so you can focus on what matters most. You'll have peac.</p>
        </div>
        <div class="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] bg-blend-overlay">
            <h4 class="text-[20px]">Industrial Processes and Product Use</h4>
            <p class="font-thin text-sm">As the largest on-shore Laravel development company in the United States, Active Logic is headquartered in.</p>
        </div>
        <div class="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] bg-blend-overlay">
            <h4 class="text-[20px]">Pertanian & Lahan</h4>
            <p class="font-thin text-sm">We’re the Laravel agency you couldn’t afford locally. But we’re based in Georgia, the country. So, you can.</p>
        </div>
        <div class="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] bg-blend-overlay">
            <h4 class="text-[20px]">Limbah</h4>
            <p class="font-thin text-sm">We're the experts in all things Laravel. If you need an app built or rescued, or you need your team built or leveled up, we'v</p>
        </div>
    </div>
    <div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-[45px]">
        <div><a href="" class="rounded-full bg-[#2084FF] px-10 py-4 text-white">Lihat Rencana Aksi&nbsp;<i class="bx bx-right-arrow-alt"></i></a></div>
    </div>
</section>

<section class="relative mx-auto container p-5">
    <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="rounded-full w-full border px-6 py-3 text-white"><a href="">Investasi Sektor</a></div>
            <div class="rounded-full w-full border px-6 py-3 text-[#2084FF] bg-white"><a href="">Tren Tahun ke Tahun</a></div>
            <div class="rounded-full w-full border px-6 py-3 text-white"><a href="">RAD GRK Interaktif</a></div>
            <div class="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">
    <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-[32px] font-semibold">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="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="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">
    <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="border px-6 py-3 rounded-full" href="">Akses Materi Edukasi</a>
                    <a class="px-6 py-3 underline" href="">Hubungi Kami</a>
                </div>
            </div>
            <div class="flex flex-col gap-3 lg:w-[60%]">
                <div class="flex flex-col gap-3 p-3">
                    <div class=" flex justify-between items-center">
                        <div class="w-2/1"><h1 class="font-reguler text-2xl">Apa itu SIGD dan apa tujuannya ?</h1></div>
                        <div class="w-1/4 text-right"><i class="bx bx-minus"></i></div>
                    </div>
                    <div class="deskripsi">
                        <p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
                    </div>
                </div>
                <hr>
                <div class="flex flex-col gap-3 p-3">
                    <div class=" flex justify-between items-center">
                        <div class="w-2/1"><h1 class="font-reguler text-2xl">Bagaimanakah metodologi perhitungan emisi yang digunakan ?</h1></div>
                        <div class="w-1/4 text-right"><i class="bx bx-plus"></i></div>
                    </div>
                    <div class="deskripsi hidden">
                        <p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
                    </div>
                </div>
                <div class="flex flex-col gap-3 p-3">
                    <div class=" flex justify-between items-center">
                        <div class="w-2/1"><h1 class="font-reguler text-2xl">Apa saja sektor penyumbang emisi utama di daerah ini ?</h1></div>
                        <div class="w-1/4 text-right"><i class="bx bx-plus"></i></div>
                    </div>
                    <div class="deskripsi hidden">
                        <p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
                    </div>
                </div>
                <div class="flex flex-col gap-3 p-3">
                    <div class=" flex justify-between items-center">
                        <div class="w-2/1"><h1 class="font-reguler text-2xl">Bagaimana masyarakat umum dapat berpartisipasi dalam upaya mitibasi ?</h1></div>
                        <div class="w-1/4 text-right"><i class="bx bx-plus"></i></div>
                    </div>
                    <div class="deskripsi hidden">
                        <p class="text-[#878C91]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis, voluptates quos odio nihil, cupiditate reiciendis repellat aliquam aperiam autem sit possimus, veniam accusamus? Nam doloribus neque tenetur veniam quae.</p>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</section>

<section class="relative bg-[#efefef] py-20">
    <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="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]">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut laborum assumenda...</p></div>
                        <div class="w-[30%] text-right flex justify-center items-center"><a href="" class="px-8 py-3 border rounded-full bg-[#2084FF] text-white"><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">&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]">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut laborum assumenda...</p></div>
                        <div class="w-[30%] text-right flex justify-center items-center"><a href="" class="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">&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]">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut laborum assumenda...</p></div>
                        <div class="w-[30%] text-right flex justify-center items-center"><a href="" class="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">
    <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