perling/resources/views/components/frontend/news/index_news.blade.php

<section class="relative bg-gradient-to-b from-gray-50 to-white font-sans" style="z-index: 9;">
    <div class="relative overflow-hidden bg-gradient-to-r from-blue-700 to-indigo-900 text-white">
        <div class="absolute inset-0">
            <svg class="absolute bottom-0 left-0 right-0 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path fill="currentColor" fill-opacity="0.05" d="M0,192L48,202.7C96,213,192,235,288,229.3C384,224,480,192,576,181.3C672,171,768,181,864,197.3C960,213,1056,235,1152,229.3C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
            <svg class="absolute bottom-0 left-0 right-0 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path fill="currentColor" fill-opacity="0.1" d="M0,256L48,240C96,224,192,192,288,181.3C384,171,480,181,576,186.7C672,192,768,192,864,181.3C960,171,1056,149,1152,149.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
        </div>
        <div class="container mx-auto px-4 py-20 md:py-28 relative">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl font-extrabold mb-6 leading-tight tracking-tight">
                    Berita & Updates
                </h1>
                <p class="text-xl md:text-2xl opacity-90 font-light leading-relaxed">Temukan informasi terbaru dan video menarik seputar Sistem Pengelolaan Dokumen Lingkungan dan kebijakan lingkungan hidup</p>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 py-12 max-w-7xl">
        <div class="flex justify-center mb-10 relative">
            <div class="bg-gray-100 rounded-full p-1.5 inline-flex shadow-md relative">
                <button class="tab-btn text-lg px-6 py-2 rounded-full transition-all duration-300 relative z-10 font-medium" data-tab="news">Berita</button>
                <button class="tab-btn text-lg px-6 py-2 rounded-full transition-all duration-300 relative z-10 text-gray-600" data-tab="videos">Video</button>
                <div id="tab-indicator" class="absolute h-full top-0 rounded-full transition-all duration-300 bg-gradient-to-r from-blue-600 to-indigo-600 z-0"></div>
            </div>
        </div>


        <!-- News Section -->
        <div class="tab-content" id="news-content">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="news-container">
            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                <div class="relative overflow-hidden">
                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Perizinan Lingkungan" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4">
                    <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-md">5 April 2025</span>
                </div>
                </div>
                <div class="p-6">
                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors">Perubahan Terbaru dalam Regulasi Perizinan Lingkungan</h3>
                <p class="text-gray-600 mb-5 line-clamp-3">Informasi mengenai pembaruan kebijakan perizinan lingkungan dan bagaimana hal ini akan memengaruhi proses pengajuan izin untuk perusahaan di berbagai sektor industri...</p>
                <a href="#" class="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-800 transition-colors">
                    <span>Baca Selengkapnya</span>
                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                </a>
                </div>
            </div>

            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                <div class="relative overflow-hidden">
                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Perizinan Lingkungan" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4">
                    <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-md">5 April 2025</span>
                </div>
                </div>
                <div class="p-6">
                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors">Panduan Praktis Pengajuan AMDAL dan UKL-UPL</h3>
                <p class="text-gray-600 mb-5 line-clamp-3">Tahapan dan persyaratan terkini dalam pengajuan dokumen AMDAL dan UKL-UPL yang perlu diperhatikan untuk mempercepat proses perizinan lingkungan...</p>
                <a href="#" class="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-800 transition-colors">
                    <span>Baca Selengkapnya</span>
                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                </a>
                </div>
            </div>

            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                <div class="relative overflow-hidden">
                <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Perizinan Lingkungan" class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute top-4 left-4">
                    <span class="bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-md">5 April 2025</span>
                </div>
                </div>
                <div class="p-6">
                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors">Digitalisasi Sistem Perizinan Lingkungan Nasional</h3>
                <p class="text-gray-600 mb-5 line-clamp-3">Pemerintah meluncurkan platform digital terpadu untuk memudahkan proses pengajuan, pemantauan, dan perpanjangan izin lingkungan bagi pelaku usaha...</p>
                <a href="#" class="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-800 transition-colors">
                    <span>Baca Selengkapnya</span>
                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                </a>
                </div>
            </div>
            </div>
        </div>

        <!-- Video Section -->
        <div class="tab-content hidden" id="videos-content">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="video-container">
            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                <div class="relative overflow-hidden">
                <video class="w-full h-56 object-cover" poster="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" controls>
                    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <div class="bg-white/20 backdrop-blur-sm p-3 rounded-full">
                    <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
                    </svg>
                    </div>
                </div>
                </div>
                <div class="p-6">
                <div class="flex items-center mb-3">
                    <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">5 April 2025</span>
                </div>
                <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">Panduan Praktis Perizinan Lingkungan Hidup</h3>
                <p class="text-gray-600 mb-5 line-clamp-3">Langkah-langkah lengkap mengurus dokumen perizinan lingkungan sesuai dengan regulasi terbaru dan praktik terbaik...</p>
                <a href="#" class="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-800 transition-colors">
                    <span>Tonton Video</span>
                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                </a>
                </div>
            </div>

            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                <div class="relative overflow-hidden">
                <video class="w-full h-56 object-cover" poster="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" controls>
                    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <div class="bg-white/20 backdrop-blur-sm p-3 rounded-full">
                    <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
                    </svg>
                    </div>
                </div>
                </div>
                <div class="p-6">
                <div class="flex items-center mb-3">
                    <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">5 April 2025</span>
                </div>
                <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">Tutorial Penyusunan Dokumen AMDAL yang Benar</h3>
                <p class="text-gray-600 mb-5 line-clamp-3">Penjelasan detail tentang cara menyusun dokumen AMDAL yang memenuhi standar dan persyaratan dari Kementerian Lingkungan Hidup...</p>
                <a href="#" class="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-800 transition-colors">
                    <span>Tonton Video</span>
                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                </a>
                </div>
            </div>

            <div class="bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                <div class="relative overflow-hidden">
                <video class="w-full h-56 object-cover" poster="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" controls>
                    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <div class="bg-white/20 backdrop-blur-sm p-3 rounded-full">
                    <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
                    </svg>
                    </div>
                </div>
                </div>
                <div class="p-6">
                <div class="flex items-center mb-3">
                    <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">5 April 2025</span>
                </div>
                <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-indigo-600 transition-colors">Sistem Online Perizinan Lingkungan Terpadu</h3>
                <p class="text-gray-600 mb-5 line-clamp-3">Demo penggunaan platform digital terbaru untuk mengajukan, melacak, dan memperbarui dokumen perizinan lingkungan secara efisien...</p>
                <a href="#" class="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-800 transition-colors">
                    <span>Tonton Video</span>
                    <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                </a>
                </div>
            </div>
            </div>
        </div>

        <div class="flex justify-center mt-12">
            <button id="load-more-btn" class="group bg-gradient-to-r from-blue-600 to-indigo-700 text-white font-bold py-3.5 px-10 rounded-full transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg flex items-center">
                <span>Lihat Lainnya</span>
                <svg class="w-5 h-5 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </button>
        </div>
    </div>
</section>