pesapakawan/Views/Website/Shared/Components/Frontend/_Faq.cshtml

<div class="container mx-auto max-w-6xl py-5">
    <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/2 md:w-1/2 mb-4 md:mb-0 relative">
            <div class="text-center p-8">
            <img src="@Url.Content("~/website/images/bg-faq.svg")" alt="FAQ Illustration" class="max-w-full h-auto rounded-2xl">
            </div>
             <div class="text-left absolute top-1/2 left-1/7 z-10 text-white">
                <h3 class="text-2xl md:text-4xl font-bold mb-4">Kenapa Harus Melakukan</h3>
                <h2 class="text-2xl md:text-4xl font-bold">PESAPA KAWAN ?</h2>
            </div>
        </div>
        
        <div class="w-full lg:w-1/2 md:w-1/2">
            <div class="faq-content">
                @* <div class="mb-8">
                    <h2 class="text-3xl font-bold bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent mb-2">
                        Frequently Asked Questions
                    </h2>
                    <p class="text-gray-600">Pertanyaan yang sering diajukan tentang PESAPA KAWAN</p>
                </div> *@
                <div class="space-y-4">
                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
                            <span class="font-medium text-gray-800">Kewajiban Pengelolaan Sampah</span>
                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
                            <p>Kewajiban pengelolaan sampah oleh penanggung jawab dan/atau pengelola kawasan permukiman, komersial, industri dan perusahaan.</p>
                        </div>
                    </div>

                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
                            <span class="font-medium text-gray-800">Sampah Terkelola di Sumber Sampah</span>
                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
                            <p>Mengutamakan prinsip bahwa pengelolaan sampah harus selesai terkelola di sumber sampah.</p>
                        </div>
                    </div>

                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
                            <span class="font-medium text-gray-800">Pengelolaan Sampah Mandiri bagi Pemegang AMDAL/UKL-UPL</span>
                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
                            <p>Usaha dan/atau kegiatan yang telah memiliki dokumen Izin Lingkungan (AMDAL atau UKL- UPL) wajib melakukan pengelolaan sampah secara mandiri.</p>
                        </div>
                    </div>

                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
                            <span class="font-medium text-gray-800">Pengurangan Ketergantungan pada TPA Bantargebang</span>
                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
                            <p>Mengurangi ketergantungan terhadap TPA Bantargebang.</p>
                        </div>
                    </div>

                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
                            <span class="font-medium text-gray-800">Kemitraan Pengelola Kawasan dan Jasa Pengolahan Sampah Berizin</span>
                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
                            <p>Terciptanya kemitraan pelaku pengelola kawasan dan perusahaan dengan pelaku jasa pengolahan sampah yang berizin.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<register-block dynamic-section="scripts" key="jsFaq">
<script>
document.addEventListener('DOMContentLoaded', function() {
    const faqItems = document.querySelectorAll('.faq-item');
    
    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        const answer = item.querySelector('.faq-answer');
        const icon = item.querySelector('.faq-icon');
        
        question.addEventListener('click', function() {
            const isOpen = !answer.classList.contains('hidden');
            
            // Close all other FAQ items
            faqItems.forEach(otherItem => {
                if (otherItem !== item) {
                    otherItem.querySelector('.faq-answer').classList.add('hidden');
                    otherItem.querySelector('.faq-icon').classList.remove('rotate-180');
                }
            });
            
            // Toggle current item
            if (isOpen) {
                answer.classList.add('hidden');
                icon.classList.remove('rotate-180');
            } else {
                answer.classList.remove('hidden');
                icon.classList.add('rotate-180');
            }
        });
    });
});
</script>
</register-block>