@{
    ViewData["Title"] = "BPS-RW Jakarta";
}

<!-- Hero Section -->
<section class="w-full h-[720px] p-4 lg:p-28 relative flex justify-center items-center gap-20 overflow-hidden">
    <!-- Background gradient -->
    <img src="/images/hero-bg.png" class="w-full h-full left-0 top-0 absolute bg-gradient-to-l from-green-800/0 to-green-900" alt="Hero BG"/>

    <!-- Content -->
    <div class="flex-1 max-w-[1280px] relative z-10 flex flex-col justify-start items-start gap-20">
        <div class="self-stretch flex justify-start items-center gap-8">
            <div class="w-full max-w-[800px] pr-0 lg:pr-10 flex flex-col justify-start items-start gap-8">
                <div class="self-stretch flex flex-col justify-start items-start gap-8">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-green-50 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-900 rounded-full"></div>
                        </div>
                        <div class="text-green-900 text-base font-bold font-jakarta leading-normal">BPS-RW Jakarta</div>
                    </div>

                    <!-- Title and Description -->
                    <div class="self-stretch flex flex-col justify-start items-start gap-2">
                        <h1 class="self-stretch text-white text-4xl lg:text-7xl font-bold font-jakarta leading-[50px] lg:leading-[90px]">
                            Pengelolaan Sampah Berbasis RW
                        </h1>
                        <p class="self-stretch text-white text-lg font-medium font-jakarta leading-7">
                            Program dari Dinas Lingkungan Hidup Provinsi Jakarta yang bertujuan untuk mengoptimalkan pengelolaan sampah berbasis komunitas di tingkat RW.
                        </p>
                    </div>
                </div>

                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row justify-start items-start gap-4">
                    <button class="px-8 py-3 bg-white hover:bg-gray-100 rounded-full flex justify-center items-center gap-2 transition-colors">
                        <span class="text-green-800 text-base font-semibold font-jakarta leading-normal">Pelajari Selengkapnya</span>
                        <div class="w-5 h-5 relative">
                            <svg class="w-5 h-5 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                    </button>
                    <button class="px-8 py-3 rounded-full border border-gray-300 hover:bg-white/10 flex justify-center items-center gap-2 transition-colors">
                        <span class="text-white text-base font-semibold font-jakarta leading-normal">Hubungi Kami</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Right side icons (hidden on mobile) -->
    <div class="hidden lg:flex absolute right-28 top-1/2 transform -translate-y-1/2 flex-col justify-start items-start gap-4">
        <button class="p-3 bg-white/20 hover:bg-white/30 rounded-full border border-white flex justify-center items-center gap-2 transition-colors">
            <i class="ph ph-caret-left text-white"></i>
        </button>
        <button class="p-3 bg-white hover:bg-gray-100 rounded-full border border-white flex justify-center items-center gap-2 transition-colors">
            <i class="ph ph-caret-right"></i>
        </button>
    </div>
</section>

<!-- About BPS-RW Section -->
<section class="w-full px-4 lg:px-28 py-24 bg-white flex flex-col justify-start items-center gap-20 overflow-hidden">
    <div class="w-full max-w-[1280px] flex flex-col justify-start items-start gap-20">
        <div class="self-stretch flex flex-col lg:flex-row justify-start items-center gap-20">
            <!-- Image Section -->
            <div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
                <div class="w-60 h-[552px] left-0 top-[40px] absolute bg-green-800"></div>
                <img class="w-80 lg:w-96 h-[400px] lg:h-[552px] left-[40px] top-0 absolute object-cover" src="/images/hero-plastics.png" alt="BPS-RW Image" />
                <img class="w-48 lg:w-64 h-48 lg:h-64 right-0 lg:left-[322px] top-[161px] absolute border-8 border-white object-cover" src="/images/hero-truck.png" alt="Logo" />
            </div>

            <!-- Content Section -->
            <div class="flex-1 flex flex-col justify-start items-start gap-8">
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                        </div>
                        <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Tentang Kami</div>
                    </div>

                    <div class="self-stretch flex flex-col justify-start items-start gap-6">
                        <h2 class="self-stretch text-gray-900 text-4xl font-bold font-jakarta leading-10">Tentang BPS-RW</h2>
                        <p class="self-stretch text-slate-700 text-lg font-normal font-jakarta leading-7">
                            BPS-RW (Bank Pengelolaan Sampah Rukun Warga) adalah Program dari Dinas Lingkungan Hidup Provinsi DKI Jakarta yang bertujuan untuk mengoptimalkan pengelolaan sampah berbasis komunitas di tingkat RW. Program ini hadir untuk meningkatkan kesadaran masyarakat dalam memilah, mengelola, serta mendaur ulang sampah guna menciptakan lingkungan yang lebih bersih dan sehat.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Statistics Section -->
<section class="w-full p-4 lg:p-28 relative bg-green-950 flex flex-col justify-start items-center gap-20 overflow-hidden">
    <!-- Background overlay -->
    <div class="w-full h-full left-0 top-0 absolute opacity-60 overflow-hidden">
        <div class="w-full h-full absolute bg-green-950"></div>
    </div>

    <!-- Content -->
    <div class="w-full max-w-[1280px] relative z-10 flex flex-col justify-start items-start gap-6">
        <div class="self-stretch flex flex-col lg:flex-row justify-start items-center gap-8">
            <!-- Left Content -->
            <div class="flex-1 flex flex-col justify-start items-start gap-8">
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                        </div>
                        <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Statistik</div>
                    </div>

                    <div class="self-stretch flex flex-col justify-start items-start gap-6">
                        <h2 class="self-stretch text-white text-3xl lg:text-5xl font-bold font-jakarta leading-[40px] lg:leading-[60px]">
                            Jumlah Rumah Memilah
                        </h2>
                        <p class="self-stretch text-white text-lg font-normal font-jakarta leading-7">
                            Rumah Memilah adalah program dari BPSRW DKI Jakarta yang mendorong partisipasi aktif warga dalam memilah sampah rumah tangga menjadi beberapa kategori.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Statistics Grid -->
            <div class="flex-1 flex flex-col justify-start items-start gap-12">
                <div class="self-stretch flex flex-col lg:flex-row justify-start items-start gap-8">
                    <!-- Stat 1 -->
                    <div class="flex-1 pl-8 border-l-4 border-white flex flex-col justify-start items-start gap-1">
                        <div class="self-stretch text-white text-3xl lg:text-5xl font-bold font-jakarta leading-[40px] lg:leading-[60px]">1.522.356</div>
                        <div class="self-stretch text-white text-xl font-normal font-jakarta leading-loose">Jumlah Rumah</div>
                    </div>

                    <!-- Stat 2 -->
                    <div class="flex-1 pl-8 border-l-4 border-white flex flex-col justify-start items-start gap-1">
                        <div class="self-stretch text-white text-3xl lg:text-5xl font-bold font-jakarta leading-[40px] lg:leading-[60px]">2.755</div>
                        <div class="self-stretch text-white text-xl font-normal font-jakarta leading-loose">Jumlah RW</div>
                    </div>
                </div>

                <div class="self-stretch flex flex-col lg:flex-row justify-start items-start gap-8">
                    <!-- Stat 3 -->
                    <div class="flex-1 pl-8 border-l-4 border-white flex flex-col justify-start items-start gap-1">
                        <div class="self-stretch text-white text-3xl lg:text-5xl font-bold font-jakarta leading-[40px] lg:leading-[60px]">203.511</div>
                        <div class="self-stretch text-white text-xl font-normal font-jakarta leading-loose">Jumlah Rumah Memilah</div>
                    </div>

                    <!-- Stat 4 -->
                    <div class="flex-1 pl-8 border-l-4 border-white flex flex-col justify-start items-start gap-1">
                        <div class="self-stretch text-white text-3xl lg:text-5xl font-bold font-jakarta leading-[40px] lg:leading-[60px]">126.023</div>
                        <div class="self-stretch text-white text-xl font-normal font-jakarta leading-loose">Jumlah Nasabah</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- What is Rumah Memilah Section -->
<section class="w-full px-4 lg:px-28 py-24 bg-white flex flex-col justify-start items-center gap-20 overflow-hidden">
    <div class="w-full max-w-[1280px] flex flex-col justify-start items-start gap-20">
        <div class="self-stretch flex flex-col lg:flex-row justify-start items-center gap-20">
            <!-- Image Section -->
            <div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
                <div class="w-60 h-[552px] left-0 top-[40px] absolute bg-green-800"></div>
                <img class="w-80 lg:w-96 h-[400px] lg:h-[552px] left-[40px] top-0 absolute object-cover" src="/images/hero-choosen.png" alt="Rumah Memilah Image" />
                <img class="w-48 lg:w-64 h-48 lg:h-64 right-0 lg:left-[322px] top-[161px] absolute border-8 border-white object-cover" src="/images/hero-choosen-trash.png" alt="Logo" />
            </div>

            <!-- Content Section -->
            <div class="flex-1 flex flex-col justify-start items-start gap-8">
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                        </div>
                        <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Rumah Memilah</div>
                    </div>

                    <div class="self-stretch flex flex-col justify-start items-start gap-6">
                        <h2 class="self-stretch text-gray-900 text-4xl font-bold font-jakarta leading-10">Apa Itu Rumah Memilah</h2>
                        <div class="self-stretch text-slate-700 text-lg font-normal font-jakarta leading-7">
                            Rumah Memilah adalah program dari BPSRW DKI Jakarta yang mendorong partisipasi aktif warga dalam memilah sampah rumah tangga menjadi beberapa kategori. Program ini bertujuan untuk mengurangi volume sampah yang masuk ke TPA (Tempat Pembuangan Akhir) dan meningkatkan tingkat daur ulang di Jakarta.<br/><br/>
                            Dengan bergabung menjadi Rumah Memilah, Anda berkontribusi langsung pada kebersihan lingkungan dan ekonomi sirkular di Jakarta, serta mendapatkan berbagai keuntungan menarik.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How Rumah Memilah Works Section -->
<section class="w-full px-4 lg:px-28 py-24 bg-gray-100 flex flex-col justify-start items-center gap-20 overflow-hidden">
    <div class="w-full max-w-[1280px] flex flex-col justify-start items-start gap-20">
        <div class="self-stretch flex flex-col justify-start items-start gap-14">
            <div class="self-stretch flex flex-col justify-start items-start gap-8">
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-green-800 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-white rounded-full"></div>
                        </div>
                        <div class="text-white text-base font-bold font-jakarta leading-normal">Rumah Memilah</div>
                    </div>
                    <h2 class="self-stretch text-gray-900 text-4xl font-bold font-jakarta leading-10">Bagaimana Cara Kerja Rumah Memilah</h2>
                </div>
            </div>

            <!-- Steps Grid -->
            <div class="self-stretch grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Step 1 -->
                <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                    <div class="self-stretch flex justify-between items-center">
                        <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#eee8e8" viewBox="0 0 256 256"><path d="M230.93,220a8,8,0,0,1-6.93,4H32a8,8,0,0,1-6.92-12c15.23-26.33,38.7-45.21,66.09-54.16a72,72,0,1,1,73.66,0c27.39,8.95,50.86,27.83,66.09,54.16A8,8,0,0,1,230.93,220Z"></path></svg>
                        </div>
                        <div class="text-[56px] font-bold leading-[72px] capitalize font-inter text-transparent stroke-[#91B998] stroke-2" style="-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#91B998;">
                            01
                        </div>
                    </div>
                    <div class="self-stretch flex flex-col justify-start items-start gap-4">
                        <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Daftar</h3>
                        <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                            Mendaftar sebagai peserta program Rumah Memilah
                        </p>
                    </div>
                    <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                        <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                    <div class="self-stretch flex justify-between items-center">
                        <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#eee8e8" viewBox="0 0 256 256"><path d="M227.81,66.76l-.08.09L160,139.17v55.49A16,16,0,0,1,152.87,208l-32,21.34A16,16,0,0,1,96,216V139.17L28.27,66.85l-.08-.09A16,16,0,0,1,40,40H216a16,16,0,0,1,11.84,26.76Z"></path></svg>
                        </div>
                        <div class="text-[56px] font-bold leading-[72px] capitalize font-inter text-transparent stroke-[#91B998] stroke-2" style="-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#91B998;">
                            02
                        </div>
                    </div>
                    <div class="self-stretch flex flex-col justify-start items-start gap-4">
                        <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Pilah</h3>
                        <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                            Memilah sampah organik, anorganik dan B3 di rumah
                        </p>
                    </div>
                    <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                        <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                    <div class="self-stretch flex justify-between items-center">
                        <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#eee8e8" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm0-120H96V40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8Z"></path></svg>
                        </div>
                        <div class="text-[56px] font-bold leading-[72px] capitalize font-inter text-transparent stroke-[#91B998] stroke-2" style="-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#91B998;">
                            03
                        </div>
                    </div>
                    <div class="self-stretch flex flex-col justify-start items-start gap-4">
                        <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Kumpulkan</h3>
                        <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                            Mengumpulkan sampah terpilah ke bank sampah atau drop box
                        </p>
                    </div>
                    <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                        <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </div>
                </div>

                <!-- Step 4 -->
                <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                    <div class="self-stretch flex justify-between items-center">
                        <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#eee8e8" viewBox="0 0 256 256"><path d="M244.24,60a8,8,0,0,0-7.75-.4c-42.93,21-73.59,11.16-106,.78C96.4,49.53,61.2,38.28,12.49,62.06A8,8,0,0,0,8,69.24V189.17a8,8,0,0,0,11.51,7.19c42.93-21,73.59-11.16,106.05-.78,19.24,6.15,38.84,12.42,61,12.42,17.09,0,35.73-3.72,56.91-14.06a8,8,0,0,0,4.49-7.18V66.83A8,8,0,0,0,244.24,60ZM48,152a8,8,0,0,1-16,0V88a8,8,0,0,1,16,0Zm80,8a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm96,8a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
                        </div>
                        <div class="text-[56px] font-bold leading-[72px] capitalize font-inter text-transparent stroke-[#91B998] stroke-2" style="-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#91B998;">
                            04
                        </div>
                    </div>
                    <div class="self-stretch flex flex-col justify-start items-start gap-4">
                        <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Dapatkan Manfaat</h3>
                        <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                            Menerima insentif dan manfaat sebagai Rumah Memilah
                        </p>
                    </div>
                    <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                        <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Benefits Section -->
<section class="w-full p-4 lg:p-28 bg-white flex flex-col justify-start items-center gap-20 overflow-hidden">
    <div class="w-full max-w-[1280px] flex flex-col justify-start items-center gap-20">
        <!-- Header -->
        <div class="w-full max-w-[800px] flex flex-col justify-start items-center gap-4">
            <!-- Badge -->
            <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                <div class="w-4 h-4 relative">
                    <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                </div>
                <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Keuntungan</div>
            </div>

            <div class="self-stretch flex flex-col justify-start items-start gap-6">
                <h2 class="self-stretch text-center text-gray-900 text-4xl font-bold font-jakarta leading-10">
                    Keuntungan Menjadi Rumah Memilah
                </h2>
                <p class="self-stretch text-center text-slate-600 text-lg font-normal font-jakarta leading-7">
                    Bergabung dengan program Rumah Memilah memberi Anda berbagai manfaat ekonomi, sosial, dan lingkungan yang signifikan. Berikut adalah keuntungan yang akan Anda dapatkan:
                </p>
            </div>
        </div>

        <!-- Benefits Grid -->
        <div class="self-stretch grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Benefit 1 - Economic -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-amber-100 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#DC6803" viewBox="0 0 256 256"><path d="M216,64H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,56V184a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64Zm-36,80a12,12,0,1,1,12-12A12,12,0,0,1,180,144Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Insentif Ekonomi</h3>
                    <div class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Poin JakOne yang dapat ditukarkan dengan berbagai kebutuhan<br/>
                        Penghasilan tambahan dari penjualan sampah daur ulang<br/>
                        Potongan retribusi sampah bulanan hingga 20%<br/>
                        Kupon belanja di pasar rakyat dan mini market mitra
                    </div>
                </div>
            </div>

            <!-- Benefit 2 - Environmental -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-[#D3E3D6] rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#247332" viewBox="0 0 256 256"><path d="M208,48a87.48,87.48,0,0,0-35.36,7.43c-15.1-25.37-39.92-38-41.06-38.59a8,8,0,0,0-7.16,0c-1.14.58-26,13.22-41.06,38.59A87.48,87.48,0,0,0,48,48a8,8,0,0,0-8,8V96a88.11,88.11,0,0,0,80,87.63v35.43L83.58,200.84a8,8,0,1,0-7.16,14.32l48,24a8,8,0,0,0,7.16,0l48-24a8,8,0,0,0-7.16-14.32L136,219.06V183.63A88.11,88.11,0,0,0,216,96V56A8,8,0,0,0,208,48ZM56,96V64.44A72.1,72.1,0,0,1,120,136v31.56A72.1,72.1,0,0,1,56,96Zm144,0a72.1,72.1,0,0,1-64,71.56V136a72.1,72.1,0,0,1,64-71.56Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Manfaat Lingkungan</h3>
                    <div class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Mengurangi sampah yang berakhir di TPA hingga 30%<br/>
                        Mengurangi emisi gas rumah kaca dari timbunan sampah<br/>
                        Penanganan sampah B3 yang lebih aman dan bertanggung jawab<br/>
                        Lingkungan rumah dan sekitar yang lebih bersih dan sehat
                    </div>
                </div>
            </div>

            <!-- Benefit 3 - Social & Educational -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#667085" viewBox="0 0 256 256"><path d="M230.4,219.19A8,8,0,0,1,224,232H32a8,8,0,0,1-6.4-12.8A67.88,67.88,0,0,1,53,197.51a40,40,0,1,1,53.93,0,67.42,67.42,0,0,1,21,14.29,67.42,67.42,0,0,1,21-14.29,40,40,0,1,1,53.93,0A67.85,67.85,0,0,1,230.4,219.19ZM27.2,126.4a8,8,0,0,0,11.2-1.6,52,52,0,0,1,83.2,0,8,8,0,0,0,12.8,0,52,52,0,0,1,83.2,0,8,8,0,0,0,12.8-9.61A67.85,67.85,0,0,0,203,93.51a40,40,0,1,0-53.93,0,67.42,67.42,0,0,0-21,14.29,67.42,67.42,0,0,0-21-14.29,40,40,0,1,0-53.93,0A67.88,67.88,0,0,0,25.6,115.2,8,8,0,0,0,27.2,126.4Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Manfaat Sosial & Pendidikan</h3>
                    <div class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Sertifikat Rumah Memilah yang diakui pemerintah DKI Jakarta<br/>
                        Akses ke workshop dan pelatihan pengelolaan sampah<br/>
                        Kunjungan edukatif ke fasilitas pengelolaan sampah<br/>
                        Menjadi bagian dari komunitas peduli lingkungan di Jakarta
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Regulation Section -->
<section class="w-full px-4 lg:px-28 py-24 bg-gray-100 flex flex-col justify-start items-center gap-20 overflow-hidden">
    <div class="w-full max-w-[1280px] flex flex-col justify-start items-start gap-12">
        <div class="self-stretch flex flex-col lg:flex-row justify-start items-center gap-12">
            <!-- Content Section -->
            <div class="flex-1 flex flex-col justify-start items-start gap-8">
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                        </div>
                        <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Pergub DKI Jakarta</div>
                    </div>

                    <div class="self-stretch flex flex-col justify-start items-start gap-6">
                        <h2 class="self-stretch text-gray-900 text-4xl font-bold font-jakarta leading-10">Peraturan Gubernur DKI Jakarta</h2>

                        <!-- Regulation Card -->
                        <div class="w-full p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                            <div class="self-stretch flex flex-col justify-start items-start gap-2">
                                <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">No. 77 Tahun 2020</h3>
                                <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                                    Pengelolaan Sampah di Lingkungan RT/RW
                                </p>
                            </div>
                            <p class="self-stretch text-slate-700 text-base font-normal font-jakarta leading-normal">
                                Peraturan Gubernur Nomor 77 Tahun 2020 mengatur tentang pengelolaan sampah dari sumbernya melalui peran aktif warga di tingkat RT dan RW, dengan tujuan mengurangi volume sampah yang masuk ke TPA.
                            </p>
                            <div class="self-stretch flex flex-wrap justify-start items-start gap-2">
                                <div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                                    <div class="w-4 h-4 relative">
                                        <div class="w-3 h-3 left-[2px] top-[1px] absolute bg-green-800 rounded-full"></div>
                                    </div>
                                    <span class="text-green-800 text-sm font-bold font-jakarta">Ditetapkan: 13 Juli 2020</span>
                                </div>
                                <div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                                    <div class="w-4 h-4 relative">
                                        <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                                    </div>
                                    <span class="text-green-800 text-sm font-bold font-jakarta">Status: Berlaku</span>
                                </div>
                                <div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                                    <div class="w-4 h-4 relative">
                                        <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                                    </div>
                                    <span class="text-green-800 text-sm font-bold font-jakarta">Unduh PDF</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Image Section -->
            <div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative transform">
                <div class="w-60 h-[552px] absolute right-0 bottom-0 bg-green-800"></div>
                <img class="w-80 lg:w-96 h-[400px] lg:h-[552px] absolute right-10 bottom-0 object-cover transform" src="/images/gubernur.png" alt="Regulation Image" />
                <img class="w-48 lg:w-64 h-48 lg:h-64 left-0 top-[161px] absolute border-8 border-white object-cover" src="/images/person-01.png" alt="Logo" />
            </div>
        </div>
    </div>
</section>

<!-- Goals Section -->
<section class="w-full p-4 lg:p-28 relative bg-green-950 flex flex-col justify-start items-center gap-20 overflow-hidden">
    <!-- Background overlay -->
    <div class="w-full h-full left-0 top-0 absolute opacity-60 overflow-hidden">
        <div class="w-full h-full absolute bg-green-950"></div>
    </div>

    <!-- Content -->
    <div class="w-full max-w-[1280px] relative z-10 flex flex-col justify-start items-start gap-10">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch flex flex-col justify-start items-start gap-4">
                <!-- Badge -->
                <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                    <div class="w-4 h-4 relative">
                        <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                    </div>
                    <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Tujuan</div>
                </div>
                <h2 class="self-stretch text-white text-4xl font-bold font-jakarta leading-10">Tujuan Utama Pergub 77/2020</h2>
            </div>
        </div>

        <!-- Goals Grid -->
        <div class="self-stretch grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Goal 1 -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M96,208a8,8,0,0,1-8,8H40a24,24,0,0,1-20.77-36l28-48.3-13.82-8A8,8,0,0,1,35.33,109l32.77-8.77a8,8,0,0,1,9.8,5.66l8.79,32.77a8,8,0,0,1-11.73,9l-13.88-8L33.11,188A8,8,0,0,0,40,200H88A8,8,0,0,1,96,208ZM128,32a7.85,7.85,0,0,1,6.92,4l28,48.3-13.82,8A8,8,0,0,0,151,106.92l32.78,8.79a8.23,8.23,0,0,0,2.07.27,8,8,0,0,0,7.72-5.93l8.79-32.79a8,8,0,0,0-11.72-9l-13.89,8L148.77,28a24,24,0,0,0-41.54,0L84.07,68a8,8,0,0,0,13.85,8l23.16-40A7.85,7.85,0,0,1,128,32ZM236.73,180l-23.14-40a8,8,0,0,0-13.84,8l23.14,40A8,8,0,0,1,216,200H160V184a8,8,0,0,0-13.66-5.66l-24,24a8,8,0,0,0,0,11.32l24,24A8,8,0,0,0,160,232V216h56a24,24,0,0,0,20.77-36Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Pengurangan Sampah</h3>
                    <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Mengurangi volume sampah dari sumbernya melalui pemilahan dan pengolahan di tingkat RT/RW.
                    </p>
                </div>
                <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                    <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>
            </div>

            <!-- Goal 2 -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M230.4,219.19A8,8,0,0,1,224,232H32a8,8,0,0,1-6.4-12.8A67.88,67.88,0,0,1,53,197.51a40,40,0,1,1,53.93,0,67.42,67.42,0,0,1,21,14.29,67.42,67.42,0,0,1,21-14.29,40,40,0,1,1,53.93,0A67.85,67.85,0,0,1,230.4,219.19ZM27.2,126.4a8,8,0,0,0,11.2-1.6,52,52,0,0,1,83.2,0,8,8,0,0,0,12.8,0,52,52,0,0,1,83.2,0,8,8,0,0,0,12.8-9.61A67.85,67.85,0,0,0,203,93.51a40,40,0,1,0-53.93,0,67.42,67.42,0,0,0-21,14.29,67.42,67.42,0,0,0-21-14.29,40,40,0,1,0-53.93,0A67.88,67.88,0,0,0,25.6,115.2,8,8,0,0,0,27.2,126.4Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Partisipasi Masyarakat</h3>
                    <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Meningkatkan keterlibatan warga dalam pengelolaan sampah di lingkungan tempat tinggal
                    </p>
                </div>
                <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                    <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>
            </div>

            <!-- Goal 3 -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49A101.72,101.72,0,0,0,46.7,175.2a4,4,0,0,0,6.61,1.43l85-86.3a8,8,0,0,1,11.32,11.32L56.74,195.94,42.55,210.13a8.2,8.2,0,0,0-.6,11.1,8,8,0,0,0,11.71.43l16.79-16.79c14.14,6.84,28.41,10.57,42.56,11.07q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-4">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Lingkungan Berkelanjutan</h3>
                    <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Mewujudkan Jakarta yang bersih, sehat, dan memiliki pengelolaan sampah yang berkelanjutan
                    </p>
                </div>
                <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                    <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="w-full px-4 lg:px-28 py-24 bg-white flex flex-col justify-start items-center gap-20 overflow-hidden">
    <div class="w-full max-w-[1280px] flex flex-col justify-start items-start gap-20">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch flex flex-col justify-start items-start gap-4">
                <!-- Badge -->
                <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                    <div class="w-4 h-4 relative">
                        <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                    </div>
                    <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Hubungi Kami</div>
                </div>
                <h2 class="self-stretch text-slate-800 text-4xl font-bold font-jakarta leading-10">Informasi Kontak</h2>
            </div>
        </div>

        <!-- Contact Grid -->
        <div class="self-stretch grid grid-cols-1 lg:grid-cols-3 gap-12">
            <!-- Phone -->
            <div class="flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                    <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                    </svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-6">
                    <div class="self-stretch flex flex-col justify-start items-start gap-2">
                        <h3 class="self-stretch text-gray-900 text-2xl font-bold font-jakarta leading-loose">Phone</h3>
                        <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                            Senin-Jumat, 08.00-16.00 WIB
                        </p>
                    </div>
                    <a href="tel:02138657455" class="self-stretch text-green-800 text-base font-normal underline leading-normal">
                        (021) 3865745
                    </a>
                </div>
            </div>

            <!-- Email -->
            <div class="flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                    <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                    </svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-6">
                    <div class="self-stretch flex flex-col justify-start items-start gap-2">
                        <h3 class="self-stretch text-gray-900 text-2xl font-bold font-jakarta leading-loose">Email</h3>
                        <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                            Respon dalam 1-2 hari kerja
                        </p>
                    </div>
                    <a href="mailto:sampah@jakarta.go.id" class="self-stretch text-green-800 text-base font-normal underline leading-normal">
                        sampah@jakarta.go.id
                    </a>
                </div>
            </div>

            <!-- Office -->
            <div class="flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                    <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-6">
                    <div class="self-stretch flex flex-col justify-start items-start gap-2">
                        <h3 class="self-stretch text-gray-900 text-2xl font-bold font-jakarta leading-loose">Office</h3>
                        <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                            Dinas Lingkungan Hidup DKI Jakarta
                        </p>
                    </div>
                    <div class="self-stretch text-green-800 text-base font-normal underline leading-normal">
                        Jl. Mandala V No. 67, Cililitan, Jakarta Timur
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Documents Section -->
<section class="w-full p-4 lg:p-28 bg-gray-100 flex flex-col justify-start items-center gap-20 overflow-hidden">
    <div class="w-full max-w-[1280px] flex flex-col justify-start items-start gap-10">
        <div class="self-stretch flex flex-col justify-start items-start gap-8">
            <div class="self-stretch flex flex-col justify-start items-start gap-4">
                <!-- Badge -->
                <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                    <div class="w-4 h-4 relative">
                        <div class="w-3 h-3 left-[1.50px] top-[1.50px] absolute bg-green-800 rounded-full"></div>
                    </div>
                    <div class="text-green-800 text-base font-bold font-jakarta leading-normal">Dokumen</div>
                </div>
                <h2 class="self-stretch text-gray-900 text-4xl font-bold font-jakarta leading-10">Unduh Dokumen Pendukung</h2>
            </div>
        </div>

        <!-- Documents Grid -->
        <div class="self-stretch grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Document 1 -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-green-800 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M44,120H212a4,4,0,0,0,4-4V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v76A4,4,0,0,0,44,120ZM152,44l44,44H152Zm72,108.53a8.18,8.18,0,0,1-8.25,7.47H192v16h15.73a8.17,8.17,0,0,1,8.25,7.47,8,8,0,0,1-8,8.53H192v15.73a8.17,8.17,0,0,1-7.47,8.25,8,8,0,0,1-8.53-8V152a8,8,0,0,1,8-8h32A8,8,0,0,1,224,152.53ZM64,144H48a8,8,0,0,0-8,8v55.73A8.17,8.17,0,0,0,47.47,216,8,8,0,0,0,56,208v-8h7.4c15.24,0,28.14-11.92,28.59-27.15A28,28,0,0,0,64,144Zm-.35,40H56V160h8a12,12,0,0,1,12,13.16A12.25,12.25,0,0,1,63.65,184ZM128,144H112a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8h15.32c19.66,0,36.21-15.48,36.67-35.13A36,36,0,0,0,128,144Zm-.49,56H120V160h8a20,20,0,0,1,20,20.77C147.58,191.59,138.34,200,127.51,200Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-2">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Pergub 77 Tahun 2020</h3>
                    <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Dokumen lengkap peraturan
                    </p>
                </div>
                <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                    <a href="#" class="rounded-full flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
                        <span class="text-base font-semibold font-jakarta leading-normal">Download</span>
                    </a>
                </div>
            </div>

            <!-- Document 2 -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-amber-500 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M224,152.53a8.17,8.17,0,0,1-8.25,7.47H204v47.73a8.17,8.17,0,0,1-7.47,8.25,8,8,0,0,1-8.53-8V160H176.27a8.17,8.17,0,0,1-8.25-7.47,8,8,0,0,1,8-8.53h40A8,8,0,0,1,224,152.53ZM92,172.85C91.54,188.08,78.64,200,63.4,200H56v7.73A8.17,8.17,0,0,1,48.53,216,8,8,0,0,1,40,208V152a8,8,0,0,1,8-8H64A28,28,0,0,1,92,172.85Zm-16-2A12.25,12.25,0,0,0,63.65,160H56v24h8A12,12,0,0,0,76,170.84Zm84,2C159.54,188.08,146.64,200,131.4,200H124v7.73a8.17,8.17,0,0,1-7.47,8.25,8,8,0,0,1-8.53-8V152a8,8,0,0,1,8-8h16A28,28,0,0,1,160,172.85Zm-16-2A12.25,12.25,0,0,0,131.65,160H124v24h8A12,12,0,0,0,144,170.84ZM40,116V40A16,16,0,0,1,56,24h96a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88v28a4,4,0,0,1-4,4H44A4,4,0,0,1,40,116ZM152,88h44L152,44Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-2">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Presentasi Sosialisasi</h3>
                    <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Bahan presentasi untuk warga
                    </p>
                </div>
                <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                    <a href="#" class="rounded-full flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
                        <span class="text-base font-semibold font-jakarta leading-normal">Download</span>
                    </a>
                </div>
            </div>

            <!-- Document 3 -->
            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <div class="w-16 h-16 bg-slate-700 rounded-full flex flex-col justify-center items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#ffffff" viewBox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,176H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm-8-56V44l44,44Z"></path></svg>
                </div>
                <div class="self-stretch flex flex-col justify-start items-start gap-2">
                    <h3 class="text-gray-900 text-2xl font-bold font-jakarta leading-loose">Panduan Praktis</h3>
                    <p class="self-stretch text-gray-500 text-base font-normal font-jakarta leading-normal">
                        Langkah-langkah implementasi untuk RT/RW
                    </p>
                </div>
                <div class="self-stretch pt-[3px] pb-1 flex justify-start items-start">
                    <a href="#" class="rounded-full flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
                        <span class="text-base font-semibold font-jakarta leading-normal">Download</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@section Scripts {
    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });

        // Animation on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in');
                }
            });
        }, observerOptions);

        // Observe all sections
        document.querySelectorAll('section').forEach(section => {
            observer.observe(section);
        });
    </script>
}