update home page
marszayn
parent
f3d0e03d7e
commit
c76655e0bd
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"resources/css/app.css": {
|
"resources/css/app.css": {
|
||||||
"file": "assets/app-CPwD_p82.css",
|
"file": "assets/app-DJ73LIus.css",
|
||||||
"src": "resources/css/app.css",
|
"src": "resources/css/app.css",
|
||||||
"isEntry": true
|
"isEntry": true
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
<body>
|
||||||
|
<!-- Marquee Header -->
|
||||||
|
<div class="bg-lime-500 py-2 overflow-hidden relative">
|
||||||
|
<div id="marquee-container" class="flex whitespace-nowrap">
|
||||||
|
<div id="marquee-content" class="flex items-center space-x-6 mx-4">
|
||||||
|
<span>AMDAL</span>
|
||||||
|
<span class="text-2xl">✻</span>
|
||||||
|
<span>ANDAL</span>
|
||||||
|
<span class="text-2xl">✻</span>
|
||||||
|
<span>PERTEK</span>
|
||||||
|
<span class="text-2xl">✻</span>
|
||||||
|
<span>RINTEK</span>
|
||||||
|
<span class="text-2xl">✻</span>
|
||||||
|
<span>RLKL-RPL</span>
|
||||||
|
<span class="text-2xl">✻</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const container = document.getElementById('marquee-container');
|
||||||
|
const content = document.getElementById('marquee-content');
|
||||||
|
|
||||||
|
// Calculate the total width needed for animation
|
||||||
|
let contentWidth = content.offsetWidth;
|
||||||
|
|
||||||
|
// Clone the content multiple times to ensure smooth looping
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
const clone = content.cloneNode(true);
|
||||||
|
container.appendChild(clone);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start animation
|
||||||
|
let scrollPosition = 0;
|
||||||
|
const speed = 0.5; // slower speed (was 1)
|
||||||
|
let isAnimating = true;
|
||||||
|
|
||||||
|
// Pause on hover
|
||||||
|
container.addEventListener('mouseenter', function() {
|
||||||
|
isAnimating = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
container.addEventListener('mouseleave', function() {
|
||||||
|
isAnimating = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
function scroll() {
|
||||||
|
if (isAnimating) {
|
||||||
|
scrollPosition -= speed;
|
||||||
|
// Reset when first element is completely scrolled out
|
||||||
|
if (scrollPosition <= -contentWidth) {
|
||||||
|
scrollPosition += contentWidth;
|
||||||
|
}
|
||||||
|
container.style.transform = `translateX(${scrollPosition}px)`;
|
||||||
|
}
|
||||||
|
requestAnimationFrame(scroll);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start the animation
|
||||||
|
scroll();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-black text-white pt-16 pb-8">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
|
||||||
|
<!-- Main Footer Content -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||||
|
<!-- Logo and Description -->
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<img src="{{ asset('assets/images/asset/LOGO_PL.svg') }}" alt="" class="w-56">
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 mb-6 text-balance">
|
||||||
|
Sistem Terintegrasi untuk Pengelolaan Dokumen Lingkungan secara Digital
|
||||||
|
Mendukung proses pembuatan, pemantauan, dan integrasi dokumen lingkungan dalam satu platform yang efisien dan terpusat.
|
||||||
|
</p>
|
||||||
|
<!-- Social Icons -->
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="bg-[#487fff] text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#487fff] transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
|
||||||
|
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="bg-[#487fff] text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#487fff] transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
|
||||||
|
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="bg-[#487fff] text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#487fff] transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pinterest" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="bg-[#487fff] text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#487fff] transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="bg-[#487fff] text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-[#487fff] transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
|
||||||
|
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigasi -->
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<h3 class="text-xl font-bold mb-6">Navigasi</h3>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li><a href="#" class="hover:text-blue-300 transition-colors">Home</a></li>
|
||||||
|
<li><a href="#" class="hover:text-blue-300 transition-colors">Tata Cara Pengajuan</a></li>
|
||||||
|
<li><a href="#" class="hover:text-blue-300 transition-colors">Materi</a></li>
|
||||||
|
<li><a href="#" class="hover:text-blue-300 transition-colors">Formulir</a></li>
|
||||||
|
<li><a href="#" class="hover:text-blue-300 transition-colors">Data & Informasi</a></li>
|
||||||
|
<li><a href="#" class="hover:text-blue-300 transition-colors">Kebijakan</a></li>
|
||||||
|
<li><a href="#" class="hover:text-blue-300 transition-colors">Catatan Rilis</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<h3 class="text-xl font-bold mb-6">Kontak</h3>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li class="hover:text-blue-300 transition-colors">+0123-456-789</li>
|
||||||
|
<li class="hover:text-blue-300 transition-colors">dlhjakarta@jakarta.go.id</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Visitor Counter -->
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<h3 class="text-xl font-bold mb-6">Statistik Pengunjung</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Today's visitors -->
|
||||||
|
<div class="bg-gray-900 rounded-lg p-4 border-l-4 border-blue-400 hover:transform hover:scale-105 transition-all duration-300">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-400">Pengunjung Hari Ini</p>
|
||||||
|
<p class="text-2xl font-bold text-white">{{ $todayVisitors ?? '128' }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-lime-500/20 p-3 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Monthly visitors -->
|
||||||
|
<div class="bg-gray-900 rounded-lg p-4 border-l-4 border-blue-400 hover:transform hover:scale-105 transition-all duration-300">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-400">Pengunjung Sebulan Terakhir</p>
|
||||||
|
<p class="text-2xl font-bold text-white">{{ $monthlyVisitors ?? '3,547' }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-lime-500/20 p-3 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-gray-800 my-8">
|
||||||
|
|
||||||
|
<!-- Copyright -->
|
||||||
|
<div class="flex justify-center items-center mx-auto text-center">
|
||||||
|
<div>
|
||||||
|
Copyright © {{ date('Y') }} <span class="text-lime-400">Dinas Lingkungan Hidup Provinsi DKI Jakarta</span>. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<section class="bg-gradient-to-b from-gray-50 to-gray-100 font-sans py-6">
|
||||||
|
<div class="container mx-auto max-w-7xl px-4">
|
||||||
|
|
||||||
|
<div class="flex flex-col md:flex-row gap-8">
|
||||||
|
<!-- Left Column - FAQ -->
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold custom-blue mb-4">Frequently Asked Questions</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="faq-item bg-white rounded-xl shadow-sm hover:shadow-lg mb-5 overflow-hidden transition-all duration-300">
|
||||||
|
<div class="faq-header flex justify-between items-center p-5 cursor-pointer">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="faq-icon bg-blue-50 text-custom-blue p-2 rounded-full">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#003296" stroke-width="2"/>
|
||||||
|
<path d="M12 17V17.01M12 14C12.5523 14 13 13.5523 13 13V9.5C13 8.94772 12.5523 8.5 12 8.5C11.4477 8.5 11 8.94772 11 9.5V13C11 13.5523 11.4477 14 12 14Z" stroke="#003296" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold custom-blue">Bagaimana mekanisme penapisan dengan hasil jenis dokumen SPPL?</h3>
|
||||||
|
</div>
|
||||||
|
<div class="faq-toggle w-8 h-8 flex items-center justify-center text-custom-blue rounded-full transition-all duration-300">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" class="transform transition-transform duration-300">
|
||||||
|
<path d="M12 5V19M5 12H19" stroke="#003296" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-content overflow-hidden max-h-0 transition-all duration-500 px-5">
|
||||||
|
<div class="py-5 border-t border-gray-100">
|
||||||
|
<p class="text-gray-600">Proses penapisan dilakukan untuk menentukan jenis dokumen yang sesuai berdasarkan kegiatan yang diajukan. Jika hasil penapisan menunjukkan bahwa jenis dokumen yang diperlukan adalah SPPL (Surat Pernyataan Pengelolaan Lingkungan), pengguna dapat mengikuti panduan penggunaan (manual guide) SPPL yang t</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item bg-white rounded-xl shadow-sm hover:shadow-lg mb-5 overflow-hidden transition-all duration-300">
|
||||||
|
<div class="faq-header flex justify-between items-center p-5 cursor-pointer">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="faq-icon bg-blue-50 text-custom-blue p-2 rounded-full">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#003296" stroke-width="2"/>
|
||||||
|
<path d="M12 17V17.01M12 14C12.5523 14 13 13.5523 13 13V9.5C13 8.94772 12.5523 8.5 12 8.5C11.4477 8.5 11 8.94772 11 9.5V13C11 13.5523 11.4477 14 12 14Z" stroke="#003296" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold custom-blue">Bagaimana cara Validator Administrasi melakukan uji administrasi?</h3>
|
||||||
|
</div>
|
||||||
|
<div class="faq-toggle w-8 h-8 flex items-center justify-center text-custom-blue rounded-full transition-all duration-300">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" class="transform transition-transform duration-300">
|
||||||
|
<path d="M12 5V19M5 12H19" stroke="#003296" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-content overflow-hidden max-h-0 transition-all duration-500 px-5">
|
||||||
|
<div class="py-5 border-t border-gray-100">
|
||||||
|
<p class="text-gray-600">Validator Administrasi memeriksa kesesuaian berkas administrasi dengan cara mengklik menu AMDAL atau UKL-UPL, memilih menu sebelum rapat, dan mengakses tab Uji Admin. Validator menentukan kelengkapan administrasi dengan memberikan keterangan di kolom yang sesuai</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Column - Tracking Document -->
|
||||||
|
<div>
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-custom-blue">
|
||||||
|
<h2 class="text-2xl font-bold custom-blue mb-6">Track Your Document</h2>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<label for="documentNumber" class="block text-sm font-medium text-gray-700 mb-2">Nomor Registrasi Kegiatan</label>
|
||||||
|
<div class="flex">
|
||||||
|
<input type="text" id="documentNumber" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-200 focus:border-custom-blue outline-none" placeholder="Masukkan Nomor Registrasi Kegiatan...">
|
||||||
|
<button class="bg-custom-blue text-white px-5 py-2 rounded-r-lg hover:bg-blue-800 transition">
|
||||||
|
Track
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.querySelectorAll('.faq-header').forEach(header => {
|
||||||
|
header.addEventListener('click', () => {
|
||||||
|
const parent = header.parentElement;
|
||||||
|
const content = parent.querySelector('.faq-content');
|
||||||
|
const toggle = parent.querySelector('.faq-toggle svg');
|
||||||
|
|
||||||
|
// Close all other FAQs
|
||||||
|
document.querySelectorAll('.faq-item').forEach(item => {
|
||||||
|
if (item !== parent && item.classList.contains('active')) {
|
||||||
|
item.classList.remove('active');
|
||||||
|
item.querySelector('.faq-content').style.maxHeight = '0';
|
||||||
|
item.querySelector('.faq-toggle svg').classList.remove('rotate-45');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Toggle current FAQ
|
||||||
|
parent.classList.toggle('active');
|
||||||
|
|
||||||
|
if (parent.classList.contains('active')) {
|
||||||
|
content.style.maxHeight = content.scrollHeight + "px";
|
||||||
|
toggle.classList.add('rotate-45');
|
||||||
|
} else {
|
||||||
|
content.style.maxHeight = '0';
|
||||||
|
toggle.classList.remove('rotate-45');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.custom-blue {
|
||||||
|
color: #003296;
|
||||||
|
}
|
||||||
|
.custom-blue-bg, .bg-custom-blue {
|
||||||
|
background-color: #003296;
|
||||||
|
}
|
||||||
|
.border-custom-blue {
|
||||||
|
border-color: #003296;
|
||||||
|
}
|
||||||
|
.faq-item {
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.faq-item:hover, .faq-item.active {
|
||||||
|
border-left: 4px solid #003296;
|
||||||
|
}
|
||||||
|
.faq-item.active {
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0, 50, 150, 0.1);
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.faq-icon {
|
||||||
|
transform: scale(0.9);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
.faq-item:hover .faq-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tagline -->
|
<!-- Tagline -->
|
||||||
<div class="relative z-10 max-w-7xl mx-auto px-4 mt-20 md:mt-10">
|
<div class="relative z-10 max-w-7xl mx-auto px-4 mt-20 md:mt-10" style="z-index: 0;>
|
||||||
<div class="grid grid-cols-1 items-center">
|
<div class="grid grid-cols-1 items-center">
|
||||||
<div class="text-center space-y-6 animate-fade-in-up">
|
<div class="text-center space-y-6 animate-fade-in-up">
|
||||||
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
|
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
|
||||||
|
|
@ -0,0 +1,233 @@
|
||||||
|
<section class="bg-gray-100">
|
||||||
|
<div class="container mx-auto max-w-7xl px-4 py-8 sm:py-15">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<h1 class="text-2xl sm:text-4xl font-bold text-blue-900">Daftar Pengumuman & Informasi</h1>
|
||||||
|
<p class="text-gray-700 mt-1 text-sm sm:text-base">Daftar Pengumuman dan Informasi terkait kegiatan yang mengajukan izin lingkungan</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter Buttons and Search -->
|
||||||
|
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
|
||||||
|
<div class="flex flex-wrap gap-2 w-full sm:w-auto">
|
||||||
|
<button id="tab-amdal" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('amdal')">AMDAL</button>
|
||||||
|
<button id="tab-addendum" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('addendum')">Addendum</button>
|
||||||
|
<button id="tab-ukl-upl" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('ukl-upl')">UKL - UPL</button>
|
||||||
|
<button id="tab-audit" class="tab-btn bg-blue-800 text-white px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('audit')">AUDIT</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2 w-full sm:w-auto mt-3 sm:mt-0">
|
||||||
|
<div class="relative flex-grow sm:flex-grow-0">
|
||||||
|
<input type="text" placeholder="Search" class="pl-10 pr-3 py-2 border border-gray-300 rounded w-full sm:w-64">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-2.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="filter-button" class="bg-yellow-500 text-white px-4 sm:px-6 py-2 rounded flex items-center text-sm sm:text-base whitespace-nowrap">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 sm:h-5 w-4 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||||
|
</svg>
|
||||||
|
Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter dropdown section - positioned below the filters button -->
|
||||||
|
<div id="filter-section" class="hidden w-full mb-6 bg-white border border-gray-200 rounded-md p-4 shadow-md">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label for="provinsi" class="block text-sm font-medium text-gray-700 mb-1">Provinsi</label>
|
||||||
|
<select id="provinsi" name="provinsi" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||||
|
<option value="">Semua Provinsi</option>
|
||||||
|
<option value="aceh">Aceh</option>
|
||||||
|
<option value="sumut">Sumatera Utara</option>
|
||||||
|
<option value="sumbar">Sumatera Barat</option>
|
||||||
|
<!-- Add more provinces as needed -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="kabkota" class="block text-sm font-medium text-gray-700 mb-1">Kabupaten/Kota</label>
|
||||||
|
<select id="kabkota" name="kabkota" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||||
|
<option value="">Semua Kabupaten/Kota</option>
|
||||||
|
<option value="aceh">Aceh</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 flex justify-end gap-2">
|
||||||
|
<button id="clear-filter" class="bg-gray-600 text-white px-4 py-2 rounded text-sm">Clear Filter</button>
|
||||||
|
<button class="bg-blue-600 text-white px-4 py-2 rounded text-sm">Terapkan Filter</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AMDAL Content -->
|
||||||
|
<div id="content-amdal" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
|
||||||
|
<!-- Announcement 1 -->
|
||||||
|
<div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||||
|
<div class="flex gap-3 sm:gap-4 w-full">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="bg-blue-500 p-2 rounded">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-white font-bold text-sm sm:text-base">Kegiatan Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY</h2>
|
||||||
|
<p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes</p>
|
||||||
|
<a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||||
|
<div class="text-white text-xs sm:text-sm text-right">27 Maret - 10 April 2025</div>
|
||||||
|
<button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Announcement 2 -->
|
||||||
|
<div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||||
|
<div class="flex gap-3 sm:gap-4 w-full">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="bg-blue-500 p-2 rounded">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
|
||||||
|
<p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
|
||||||
|
<a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||||
|
<div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
|
||||||
|
<button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Addendum Content -->
|
||||||
|
<div id="content-addendum" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
|
||||||
|
<!-- Similar content as AMDAL but for Addendum -->
|
||||||
|
<div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||||
|
<div class="flex gap-3 sm:gap-4 w-full">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="bg-blue-500 p-2 rounded">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
|
||||||
|
<p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
|
||||||
|
<a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||||
|
<div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
|
||||||
|
<button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- UKL-UPL Content -->
|
||||||
|
<div id="content-ukl-upl" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
|
||||||
|
<div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||||
|
<div class="flex gap-3 sm:gap-4 w-full">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="bg-blue-500 p-2 rounded">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
|
||||||
|
<p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
|
||||||
|
<a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
|
||||||
|
<div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
|
||||||
|
<button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AUDIT Content - Table View -->
|
||||||
|
<div id="content-audit" class="tab-content bg-white rounded overflow-hidden shadow">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-xs sm:text-base">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-blue-800 text-white">
|
||||||
|
<th class="py-2 sm:py-3 px-2 sm:px-4 text-left w-12 sm:w-16">No</th>
|
||||||
|
<th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Nama PT</th>
|
||||||
|
<th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Judul</th>
|
||||||
|
<th class="py-2 sm:py-3 px-2 sm:px-4 text-left hidden md:table-cell">Deskripsi</th>
|
||||||
|
<th class="py-2 sm:py-3 px-2 sm:px-4 text-center w-20 sm:w-32">Aksi</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="border-b border-gray-200">
|
||||||
|
<td class="py-3 sm:py-4 px-2 sm:px-4 align-top">1</td>
|
||||||
|
<td class="py-3 sm:py-4 px-2 sm:px-4 align-top">PT PETROKIMIA GRESIK</td>
|
||||||
|
<td class="py-3 sm:py-4 px-2 sm:px-4 align-top">PENGUMUMAN AUDIT LINGKUNGAN HIDUP WAJIB BERKALA INDUSTRI PETROKIMIA</td>
|
||||||
|
<td class="py-3 sm:py-4 px-2 sm:px-4 align-top hidden md:table-cell">
|
||||||
|
<div class="max-h-24 sm:max-h-32 overflow-y-auto pr-2">
|
||||||
|
PT Petrokimia Gresik merupakan Kegiatan pada sektor Industri Petrokimia : Industri Pupuk dan Bahan Kimia (Amonia, Pupuk, Asam Sulfat, Asam Fosfat, dan Asam Klorida) yang telah dikenakan Audit Lingkungan Hidup Wajib Berkala untuk kegiatan berisiko tinggi terhadap lingkungan berdasarkan Lampiran I Peraturan
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 sm:py-4 px-2 sm:px-4 align-top">
|
||||||
|
<button class="bg-lime-500 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded w-full text-xs sm:text-sm">Download</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('filter-button').addEventListener('click', function() {
|
||||||
|
const filterSection = document.getElementById('filter-section');
|
||||||
|
filterSection.classList.toggle('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('clear-filter').addEventListener('click', function() {
|
||||||
|
// Reset province and city dropdowns
|
||||||
|
document.getElementById('provinsi').value = '';
|
||||||
|
document.getElementById('kabkota').value = '';
|
||||||
|
|
||||||
|
// Reset search input
|
||||||
|
const searchInput = document.querySelector('input[placeholder="Search"]');
|
||||||
|
if (searchInput) searchInput.value = '';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function changeTab(tabName) {
|
||||||
|
const contentSections = document.querySelectorAll('.tab-content');
|
||||||
|
contentSections.forEach(section => {
|
||||||
|
section.classList.add('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
||||||
|
tabButtons.forEach(button => {
|
||||||
|
button.classList.remove('bg-blue-900', 'text-white');
|
||||||
|
button.classList.add('bg-white', 'border', 'border-gray-300');
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectedTab = document.getElementById('tab-' + tabName);
|
||||||
|
selectedTab.classList.remove('bg-white', 'border', 'border-gray-300');
|
||||||
|
selectedTab.classList.add('bg-blue-900', 'text-white');
|
||||||
|
|
||||||
|
const selectedContent = document.getElementById('content-' + tabName);
|
||||||
|
selectedContent.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
changeTab('amdal');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,533 @@
|
||||||
|
<section class="news-section relative overflow-hidden py-20 bg-gradient-to-b from-[#0c1a3f] via-[#0c2a6f] to-[#0c1a3f]">
|
||||||
|
<!-- Advanced particle background -->
|
||||||
|
<div class="container max-w-6xl mx-auto">
|
||||||
|
<div class="absolute inset-0">
|
||||||
|
<div id="particles-js" class="absolute inset-0 opacity-30"></div>
|
||||||
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(12,42,111,0.8),rgba(8,8,40,0.9))] mix-blend-multiply"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enhanced 3D floating elements -->
|
||||||
|
<div class="absolute w-full h-full overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-1/5 left-10 w-80 h-80 rounded-full mix-blend-screen opacity-10 animate-float-slow" style="background: radial-gradient(circle, rgba(139,92,246,0.8) 0%, rgba(76,29,149,0) 70%); filter: blur(60px);"></div>
|
||||||
|
<div class="absolute bottom-1/4 right-5 w-96 h-96 rounded-full mix-blend-screen opacity-10 animate-float-slow-reverse" style="background: radial-gradient(circle, rgba(72,127,255,0.8) 0%, rgba(8,145,178,0) 70%); filter: blur(70px); animation-delay: 2s;"></div>
|
||||||
|
<div class="absolute top-2/3 left-1/4 w-72 h-72 rounded-full mix-blend-screen opacity-10 animate-float" style="background: radial-gradient(circle, rgba(124,207,0,0.6) 0%, rgba(5,150,105,0) 70%); filter: blur(60px); animation-delay: 3s;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<!-- 3D Floating Section Header with perspective -->
|
||||||
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-16 perspective-hero relative z-10">
|
||||||
|
<!-- Sisi Kiri: Title and subtitle -->
|
||||||
|
<div class="mb-10 lg:mb-0 lg:w-1/2">
|
||||||
|
<div class="relative">
|
||||||
|
<h2 class="text-5xl sm:text-6xl font-extrabold bg-clip-text mb-3 tracking-tight text-white">
|
||||||
|
Berita & Updates
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p class="mt-6 text-gray-300 max-w-2xl text-lg">
|
||||||
|
Temukan informasi terbaru dan video menarik seputar Sistem Pengelolaan Dokumen Lingkungan dan kebijakan lingkungan hidup
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sisi Kanan: Interactive 3D Glass Tabs -->
|
||||||
|
<div class="lg:w-auto transform transition-all duration-500 hover:translate-y-[-5px]">
|
||||||
|
<div class="relative flex flex-row sm:flex-row p-1 sm:p-1.5 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl z-10 tab-glass-container">
|
||||||
|
<div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#487fff]/20 to-purple-500/20 blur-xl transform scale-[0.96] z-0"></div>
|
||||||
|
<div class="absolute -inset-0.5 rounded-2xl bg-gradient-to-r from-[#487fff]/30 to-purple-500/30 blur opacity-50 transform animate-pulse-slow"></div>
|
||||||
|
<button id="beritaTab" onclick="switchTab('berita')" class="relative group z-20 px-4 sm:px-6 md:px-8 py-3 sm:py-4 text-base sm:text-lg font-medium transition-all duration-500 ease-out bg-gradient-to-r from-[#7ccf00]/80 to-[#7ccf00]/80 text-white rounded-xl m-1 hover:shadow-lg w-full sm:w-auto">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-[#7ccf00] to-[#7ccf00] rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-300 blur-xl -z-10"></div>
|
||||||
|
<div class="relative flex items-center justify-center space-x-2">
|
||||||
|
<svg class="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM14 11a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0v-1h-1a1 1 0 110-2h1v-1a1 1 0 011-1z"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Berita</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button id="videoTab" onclick="switchTab('video')" class="relative group z-20 px-4 sm:px-6 md:px-8 py-3 sm:py-4 text-base sm:text-lg font-medium transition-all duration-500 ease-out bg-white/5 text-white/80 rounded-xl m-1 hover:bg-white/10 w-full sm:w-auto">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-[#487fff] to-[#487fff] rounded-xl opacity-0 group-hover:opacity-10 transition-all duration-300 blur-xl -z-10"></div>
|
||||||
|
<div class="relative flex items-center justify-center space-x-2">
|
||||||
|
<svg class="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
|
||||||
|
</svg>
|
||||||
|
<span>Video</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Decorative element - hidden on small screens -->
|
||||||
|
<div class="absolute -right-4 -bottom-4 w-20 h-20 bg-gradient-to-br from-[#7ccf00]/30 to-[#487fff]/30 rounded-full blur-xl opacity-70 animate-pulse-slow hidden lg:block"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Konten Berita -->
|
||||||
|
<div id="beritaContent" class="transition-all transform duration-500 opacity-100">
|
||||||
|
<!-- Berita Utama -->
|
||||||
|
<div class="mb-12 rounded-2xl transform transition-all duration-500 group">
|
||||||
|
<div class="bg-gradient-to-br from-black/80 to-indigo-950/50 backdrop-blur-md border border-white/10 overflow-hidden rounded-2xl">
|
||||||
|
<div class="lg:flex">
|
||||||
|
<div class="lg:w-3/5 xl:w-2/3 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-tr from-[#7ccf00]/40 to-[#487fff]/40 mix-blend-overlay opacity-50"></div>
|
||||||
|
<div class="parallax-container h-[400px] lg:h-full overflow-hidden">
|
||||||
|
<img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="Featured news"
|
||||||
|
class="w-full h-full object-cover parallax-img transform transition-transform duration-1000">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-4 left-4 flex items-center space-x-2">
|
||||||
|
<span class="bg-gradient-to-r from-[#7ccf00]/80 to-[#7ccf00]/80 backdrop-blur-sm text-white px-3 py-1 rounded-full text-xs font-medium shadow-md">Environment</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:w-2/5 xl:w-1/3 p-8 lg:p-12 flex flex-col justify-center relative lg:min-h-[500px]">
|
||||||
|
<div class="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-[#7ccf00] via-[#7ccf00] to-[#487fff] rounded-full hidden lg:block transform transition-transform duration-500 group-hover:scale-y-110"></div>
|
||||||
|
<div class="featured-content">
|
||||||
|
<div class="flex items-center space-x-2 mb-3">
|
||||||
|
<svg class="w-5 h-5 text-[#7ccf00]" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="text-[#7ccf00] text-sm font-medium">11 Desember 2024</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-white font-black text-3xl my-4 leading-tight group-hover:text-[#7ccf00] transition-colors duration-300">
|
||||||
|
Pengenalan dan Uji Coba Aplikasi Perling untuk Mendukung Sistem Persetujuan Lingkungan
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-300 mb-8 line-clamp-3 text-lg">
|
||||||
|
Bogor, 11 Desember 2024 - Dalam upaya meningkatkan efisiensi sistem persetujuan lingkungan di Indonesia, Kementerian Lingkungan Hidup dan Kehutanan telah meluncurkan aplikasi Perling yang inovatif...
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<a href="#" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#7ccf00] to-[#7ccf00] text-white text-sm font-medium rounded-lg overflow-hidden relative transition-all duration-300 hover:pr-9 hover:shadow-lg hover:shadow-[#7ccf00]/20">
|
||||||
|
<span>Baca Selengkapnya</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span class="absolute right-0 w-8 h-full translate-x-full group-hover:translate-x-0 transition-transform duration-300 bg-white/10 flex items-center justify-center"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3 Berita Tambahan -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||||
|
@for($i = 0; $i < 3; $i++)
|
||||||
|
<div class="news-card group transform hover:-translate-y-1 transition-all duration-500 overflow-hidden">
|
||||||
|
<div class="h-full flex flex-col bg-gradient-to-br from-black/60 to-indigo-950/20 backdrop-filter backdrop-blur-md border border-white/10 rounded-2xl shadow-lg hover:shadow-[#7ccf00]/10 hover:border-[#7ccf00]/20 transition-all duration-300">
|
||||||
|
<div class="relative overflow-hidden">
|
||||||
|
<img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="News thumbnail"
|
||||||
|
class="w-full h-64 object-cover transform group-hover:scale-105 transition-all duration-700 ease-in-out">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent opacity-80"></div>
|
||||||
|
<div class="absolute top-4 right-4 flex space-x-2">
|
||||||
|
<span class="bg-gradient-to-r from-[#7ccf00]/80 to-[#7ccf00]/80 backdrop-blur-sm text-white px-3 py-1 rounded-full text-xs font-medium shadow-md">{{ ['Environment', 'Policy', 'Technology', 'Climate'][$i % 4] }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-0 left-0 w-full p-5">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<span class="bg-black/40 backdrop-blur-sm text-white/90 px-3 py-1 rounded-full text-xs font-medium border border-white/10">{{ 11 - $i % 10 }} Desember 2024</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-white font-bold text-xl mt-3 group-hover:text-[#7ccf00] transition-colors duration-300 line-clamp-2">{{ ['Implementasi Sistem Monitoring Lingkungan Terbaru', 'Kebijakan Pengelolaan Limbah untuk Industri', 'Teknologi Hijau untuk Smart City', 'Mitigasi Perubahan Iklim di Indonesia'][$i % 4] }}</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-5 pt-4 flex-grow flex flex-col">
|
||||||
|
<p class="text-gray-300 text-sm mb-5 flex-grow line-clamp-3">
|
||||||
|
{{ ['Jakarta, 11 Desember 2024 - Kementerian Lingkungan Hidup memperkenalkan sistem baru untuk monitoring kualitas lingkungan yang mengintegrasikan teknologi IoT dan AI untuk pemantauan real-time.',
|
||||||
|
'Pemerintah mengeluarkan kebijakan baru terkait pengelolaan limbah industri yang bertujuan untuk mengurangi dampak negatif terhadap lingkungan dan mendorong ekonomi sirkular.',
|
||||||
|
'Smart city di Indonesia mulai mengadopsi teknologi hijau untuk mengurangi emisi karbon dan meningkatkan efisiensi energi dalam pengelolaan kota.',
|
||||||
|
'Program mitigasi perubahan iklim baru diluncurkan untuk mengurangi emisi gas rumah kaca dan mempersiapkan masyarakat menghadapi dampak perubahan iklim.'][$i % 4] }}
|
||||||
|
</p>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#7ccf00] hover:text-white font-medium text-sm transition-all duration-300 group-hover:translate-x-1 mt-auto">
|
||||||
|
Baca selengkapnya
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endfor
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Konten Video -->
|
||||||
|
<div id="videoContent" class="transition-all transform duration-500 opacity-0 hidden">
|
||||||
|
<!-- Video Utama -->
|
||||||
|
<div class="mb-12 rounded-2xl transform transition-all duration-500 group">
|
||||||
|
<div class="bg-gradient-to-br from-black/80 to-blue-950/50 backdrop-blur-md border border-white/10 overflow-hidden rounded-2xl">
|
||||||
|
<div class="lg:flex">
|
||||||
|
<div class="lg:w-3/5 xl:w-2/3 relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-tr from-[#487fff]/30 to-purple-500/30 mix-blend-overlay opacity-50"></div>
|
||||||
|
<div class="h-[400px] lg:h-full">
|
||||||
|
<div class="featured-video-preview relative h-full group">
|
||||||
|
<img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="Featured video thumbnail"
|
||||||
|
class="w-full h-full object-cover brightness-[0.8] group-hover:brightness-[0.9] transition-all duration-500 group-hover:scale-105">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent"></div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div class="transform group-hover:scale-110 transition-all duration-500">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-[#487fff] to-[#487fff] blur-xl opacity-70 group-hover:opacity-100 transition-opacity duration-300 scale-125"></div>
|
||||||
|
<button class="relative bg-gradient-to-r from-[#487fff] to-[#487fff] hover:from-[#487fff] hover:to-[#487fff] rounded-full p-6 shadow-lg group-hover:shadow-[#487fff]/30 transition-all duration-300">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="white" stroke-width="0">
|
||||||
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="ripple-effect"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:w-2/5 xl:w-1/3 p-8 lg:p-12 flex flex-col justify-center relative lg:min-h-[500px]">
|
||||||
|
<div class="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-[#487fff] via-[#487fff] to-purple-400 rounded-full hidden lg:block transform transition-transform duration-500 group-hover:scale-y-110"></div>
|
||||||
|
<div class="featured-content">
|
||||||
|
<div class="flex items-center space-x-2 mb-3">
|
||||||
|
<svg class="w-5 h-5 text-[#487fff]" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="text-[#487fff] text-sm font-medium">10 Desember 2024</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-white font-black text-3xl my-4 leading-tight group-hover:text-[#487fff] transition-colors duration-300">
|
||||||
|
Tutorial Lengkap Penggunaan Aplikasi Perling
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-300 mb-8 line-clamp-3 text-lg">
|
||||||
|
Video tutorial lengkap ini akan membantu Anda memahami semua fitur dan kemampuan dari aplikasi Perling terbaru yang dikeluarkan Kementerian Lingkungan Hidup...
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<a href="#" class="group inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#487fff] to-[#487fff] text-white text-sm font-medium rounded-lg overflow-hidden relative transition-all duration-300 hover:pr-9 hover:shadow-lg hover:shadow-[#487fff]/20">
|
||||||
|
<span>Tonton Video</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
<span class="absolute right-0 w-8 h-full translate-x-full group-hover:translate-x-0 transition-transform duration-300 bg-white/10 flex items-center justify-center"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Video Tambahan -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||||
|
@for($i = 0; $i < 3; $i++)
|
||||||
|
<div class="video-card perspective-card group transform hover:-translate-y-1 transition-all duration-500 overflow-hidden">
|
||||||
|
<div class="h-full flex flex-col bg-gradient-to-br from-black/60 to-blue-950/20 backdrop-filter backdrop-blur-md border border-white/10 rounded-2xl shadow-lg hover:shadow-[#487fff]/10 hover:border-[#487fff]/20 transition-all duration-300 transform-3d group-hover:rotate-y-2 group-hover:rotate-x-2">
|
||||||
|
<div class="relative overflow-hidden">
|
||||||
|
<div class="video-preview h-64 cursor-pointer">
|
||||||
|
<img src="https://s3.palapacloud.id/amdalnet/public/berita/_DEC2485.jpg" alt="Video thumbnail"
|
||||||
|
class="w-full h-full object-cover brightness-[0.85] group-hover:brightness-100 transition-all duration-500 transform group-hover:scale-105">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div class="transform group-hover:scale-110 transition-transform duration-500">
|
||||||
|
<button class="bg-gradient-to-r from-[#487fff]/90 to-[#487fff]/90 hover:from-[#487fff] hover:to-[#487fff] rounded-full p-4 shadow-lg transition-all duration-300">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white" stroke-width="0">
|
||||||
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-5 flex-grow flex flex-col">
|
||||||
|
<h3 class="text-white font-bold text-xl mb-3 group-hover:text-[#487fff] transition-colors duration-300 line-clamp-2">
|
||||||
|
{{ ['Wawancara dengan Menteri LHK', 'Pembahasan UU Perlindungan Lingkungan', 'Tips Implementasi Kebijakan Lingkungan', 'Diskusi Panel: Masa Depan Energi Hijau', 'Panduan Lengkap AMDAL', 'Workshop Perling untuk Pemda'][$i % 6] }}
|
||||||
|
</h3>
|
||||||
|
<p class="text-gray-300 text-sm mb-5 flex-grow line-clamp-2">
|
||||||
|
{{ ['Menteri Lingkungan Hidup dan Kehutanan berbicara tentang kebijakan terbaru dan rencana strategis...',
|
||||||
|
'Diskusi mendalam mengenai UU Perlindungan Lingkungan yang baru disahkan dan implikasinya...',
|
||||||
|
'Panduan praktis untuk mengimplementasikan kebijakan lingkungan yang efektif di daerah...',
|
||||||
|
'Para ahli membahas tren dan inovasi dalam pengembangan energi hijau di Indonesia...',
|
||||||
|
'Penjelasan detail tentang proses AMDAL dan perubahan terbaru dalam regulasinya...',
|
||||||
|
'Workshop khusus untuk pemerintah daerah dalam menggunakan aplikasi Perling...'][$i % 6] }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endfor
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enhanced "See More" button with 3D effect -->
|
||||||
|
<div class="flex justify-center mt-20">
|
||||||
|
<a href="#" class="inline-flex items-center px-8 py-3 bg-lime-500 text-white font-medium rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#487fff]/20 hover:-translate-y-1">
|
||||||
|
<span>Lihat Selengkapnya</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform transition-transform duration-300 group-hover:translate-x-1" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ParticlesJS script -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
if (typeof particlesJS !== 'undefined') {
|
||||||
|
particlesJS('particles-js', {
|
||||||
|
particles: {
|
||||||
|
number: { value: 80, density: { enable: true, value_area: 1000 } },
|
||||||
|
color: { value: "#ffffff" },
|
||||||
|
shape: { type: "circle" },
|
||||||
|
opacity: { value: 0.1, random: true },
|
||||||
|
size: { value: 3, random: true },
|
||||||
|
line_linked: {
|
||||||
|
enable: true, distance: 150,
|
||||||
|
color: "#ffffff", opacity: 0.05, width: 1
|
||||||
|
},
|
||||||
|
move: {
|
||||||
|
enable: true, speed: 0.5, direction: "none",
|
||||||
|
random: true, out_mode: "out", bounce: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
interactivity: {
|
||||||
|
detect_on: "canvas",
|
||||||
|
events: {
|
||||||
|
onhover: { enable: true, mode: "bubble" },
|
||||||
|
resize: true
|
||||||
|
},
|
||||||
|
modes: {
|
||||||
|
bubble: { distance: 200, size: 4, duration: 2, opacity: 0.2 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
retina_detect: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parallax effect image utama
|
||||||
|
initParallaxEffect();
|
||||||
|
|
||||||
|
initHoverEffects();
|
||||||
|
});
|
||||||
|
|
||||||
|
function initParallaxEffect() {
|
||||||
|
const parallaxContainers = document.querySelectorAll('.parallax-container');
|
||||||
|
|
||||||
|
parallaxContainers.forEach(container => {
|
||||||
|
const img = container.querySelector('.parallax-img');
|
||||||
|
|
||||||
|
if (img) {
|
||||||
|
container.addEventListener('mousemove', (e) => {
|
||||||
|
const rect = container.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
const y = e.clientY - rect.top;
|
||||||
|
|
||||||
|
const xPercent = (x / rect.width - 0.5) * 2; // -1 to 1
|
||||||
|
const yPercent = (y / rect.height - 0.5) * 2; // -1 to 1
|
||||||
|
|
||||||
|
img.style.transform = `translate(${xPercent * -10}px, ${yPercent * -10}px) scale(1.1)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
container.addEventListener('mouseleave', () => {
|
||||||
|
img.style.transform = 'translate(0, 0) scale(1.05)';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initHoverEffects() {
|
||||||
|
const perspectiveCards = document.querySelectorAll('.perspective-card');
|
||||||
|
|
||||||
|
perspectiveCards.forEach(card => {
|
||||||
|
card.addEventListener('mousemove', (e) => {
|
||||||
|
const rect = card.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
const y = e.clientY - rect.top;
|
||||||
|
|
||||||
|
const xPercent = (x / rect.width - 0.5) * 2; // -1 to 1
|
||||||
|
const yPercent = (y / rect.height - 0.5) * -2; // -1 to 1
|
||||||
|
|
||||||
|
const inner = card.querySelector('.transform-3d');
|
||||||
|
if (inner) {
|
||||||
|
inner.style.transform = `rotateY(${xPercent * 5}deg) rotateX(${yPercent * 5}deg)`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
card.addEventListener('mouseleave', () => {
|
||||||
|
const inner = card.querySelector('.transform-3d');
|
||||||
|
if (inner) {
|
||||||
|
inner.style.transform = 'rotateY(0) rotateX(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchTab(tabName) {
|
||||||
|
const beritaContent = document.getElementById('beritaContent');
|
||||||
|
const videoContent = document.getElementById('videoContent');
|
||||||
|
const beritaTab = document.getElementById('beritaTab');
|
||||||
|
const videoTab = document.getElementById('videoTab');
|
||||||
|
|
||||||
|
if (tabName === 'berita') {
|
||||||
|
// Update tab styles
|
||||||
|
beritaTab.classList.add('bg-gradient-to-r', 'from-[#7ccf00]/80', 'to-[#7ccf00]/80', 'text-white');
|
||||||
|
beritaTab.classList.remove('bg-white/5', 'text-white/80');
|
||||||
|
videoTab.classList.remove('bg-gradient-to-r', 'from-[#487fff]/80', 'to-[#487fff]/80', 'text-white');
|
||||||
|
videoTab.classList.add('bg-white/5', 'text-white/80');
|
||||||
|
|
||||||
|
// Enhanced transition effects
|
||||||
|
beritaContent.style.transform = 'translateX(20px)';
|
||||||
|
beritaContent.style.opacity = '0';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
videoContent.classList.add('hidden');
|
||||||
|
beritaContent.classList.remove('hidden');
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
beritaContent.style.transform = 'translateX(0)';
|
||||||
|
beritaContent.style.opacity = '1';
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
videoTab.classList.add('bg-gradient-to-r', 'from-[#487fff]/80', 'to-[#487fff]/80', 'text-white');
|
||||||
|
videoTab.classList.remove('bg-white/5', 'text-white/80');
|
||||||
|
beritaTab.classList.remove('bg-gradient-to-r', 'from-[#7ccf00]/80', 'to-[#7ccf00]/80', 'text-white');
|
||||||
|
beritaTab.classList.add('bg-white/5', 'text-white/80');
|
||||||
|
|
||||||
|
videoContent.style.transform = 'translateX(20px)';
|
||||||
|
videoContent.style.opacity = '0';
|
||||||
|
beritaContent.style.opacity = '0';
|
||||||
|
beritaContent.style.transform = 'translateX(-20px)';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
beritaContent.classList.add('hidden');
|
||||||
|
videoContent.classList.remove('hidden');
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
videoContent.style.transform = 'translateX(0)';
|
||||||
|
videoContent.style.opacity = '1';
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes gradient-x {
|
||||||
|
0%, 100% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
}
|
||||||
|
.animate-gradient-x {
|
||||||
|
background-size: 200% 200%;
|
||||||
|
animation: gradient-x 3s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-slow {
|
||||||
|
0%, 100% { opacity: 0.3; }
|
||||||
|
50% { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
.animate-pulse-slow {
|
||||||
|
animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-15px); }
|
||||||
|
}
|
||||||
|
.animate-float {
|
||||||
|
animation: float 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-slow {
|
||||||
|
animation: float 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.animate-float-slow-reverse {
|
||||||
|
animation: float 12s ease-in-out infinite reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-text {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-5px) rotate(2deg); }
|
||||||
|
}
|
||||||
|
.animate-float-text {
|
||||||
|
animation: float-text 2s ease-in-out infinite;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes subtle-rotate {
|
||||||
|
0%, 100% { transform: rotate(-1deg); }
|
||||||
|
50% { transform: rotate(1deg); }
|
||||||
|
}
|
||||||
|
.animate-subtle-rotate {
|
||||||
|
animation: subtle-rotate 12s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* efek 3d */
|
||||||
|
.perspective {
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
.perspective-hero {
|
||||||
|
perspective: 2000px;
|
||||||
|
}
|
||||||
|
.perspective-card {
|
||||||
|
perspective: 1000px;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
.transform-3d {
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.4, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow-line {
|
||||||
|
box-shadow: 0 0 15px 2px rgba(124, 207, 0, 0.6);
|
||||||
|
animation: glow-pulse 3s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0% { box-shadow: 0 0 10px 1px rgba(124, 207, 0, 0.5); }
|
||||||
|
100% { box-shadow: 0 0 25px 5px rgba(124, 207, 0, 0.8); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.ripple-effect {
|
||||||
|
position: absolute;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(72, 127, 255, 0.4);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
animation: ripple 2s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes ripple {
|
||||||
|
0% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
|
||||||
|
20% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
|
||||||
|
100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.masonry-card-wide {
|
||||||
|
grid-row: span 1;
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.masonry-card:nth-child(4n+1) {
|
||||||
|
grid-row: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#beritaContent, #videoContent {
|
||||||
|
transition: all 0.5s cubic-bezier(0.2, 0.85, 0.4, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-clamp-2 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.line-clamp-3 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-glass-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.tab-glass-container::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</section>
|
||||||
|
|
@ -32,8 +32,8 @@
|
||||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<div class="absolute hidden group-hover:block bg-white rounded-xl shadow-2xl mt-0 pt-3 w-72 z-50 overflow-hidden
|
<div class="absolute hidden group-hover:block bg-white rounded-xl shadow-2xl mt-0 pt-3 w-72 z-[100] overflow-hidden
|
||||||
animate-fade-in-down border border-blue-100">
|
animate-fade-in-down border border-blue-100" style="position: absolute; top: 100%;">
|
||||||
<div class="p-4 space-y-2">
|
<div class="p-4 space-y-2">
|
||||||
<a href="#" class="px-4 py-3 text-gray-800 hover:bg-blue-50 rounded-lg transition-colors
|
<a href="#" class="px-4 py-3 text-gray-800 hover:bg-blue-50 rounded-lg transition-colors
|
||||||
flex items-center space-x-3 group">
|
flex items-center space-x-3 group">
|
||||||
|
|
@ -114,10 +114,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Login Button with enhanced style -->
|
<!-- Login Button with enhanced style -->
|
||||||
<a href="#login" class="ml-4 bg-blue-500 text-white px-6 py-2.5 rounded-full
|
<a href="#login" class=" bg-lime-500 ml-4 relative overflow-hidden group text-white px-6 py-2.5 rounded-full
|
||||||
hover:bg-blue-600 transition-all duration-300
|
hover:shadow-lg">
|
||||||
transform hover:-translate-y-1 hover:shadow-lg">
|
<span class="relative z-10">MASUK</span>
|
||||||
MASUK
|
<span class="absolute left-0 bottom-0 w-0 h-full bg-blue-600 group-hover:w-full transition-all duration-300"></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
<section class="container mx-auto px-4 max-w-7xl">
|
|
||||||
<div class="relative w-full overflow-hidden h-96 group rounded-3xl mt-10">
|
|
||||||
<div id="slider-container" class="relative h-full w-full">
|
|
||||||
<!-- Images -->
|
|
||||||
<div class="absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out slide" data-active="true">
|
|
||||||
<div class="absolute inset-0 transition-transform duration-10000 ease-linear transform animate-ken-burns rounded-3xl">
|
|
||||||
<img src="{{ asset('assets/images/home/slider_1.webp') }}" alt="Slide 1" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out slide">
|
|
||||||
<div class="absolute inset-0 transition-transform duration-10000 ease-linear transform animate-ken-burns rounded-3xl">
|
|
||||||
<img src="{{ asset('assets/images/home/slider_2.webp') }}" alt="Slide 2" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Gradient bawah -->
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
<button id="prev-button" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-white/20 hover:bg-white/40 text-white p-3 rounded-full transition-all duration-300 z-10 opacity-0 group-hover:opacity-100">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button id="next-button" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-white/20 hover:bg-white/40 text-white p-3 rounded-full transition-all duration-300 z-10 opacity-0 group-hover:opacity-100">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Indicator -->
|
|
||||||
<div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-3 z-10">
|
|
||||||
<button data-index="0" class="h-1.5 w-12 bg-white rounded-full opacity-60 hover:opacity-100 transition-all duration-300 indicator active-indicator"></button>
|
|
||||||
<button data-index="1" class="h-1.5 w-8 bg-white rounded-full opacity-60 hover:opacity-100 transition-all duration-300 indicator"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* @keyframes kenBurns {
|
|
||||||
from {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
} */
|
|
||||||
|
|
||||||
.animate-ken-burns {
|
|
||||||
animation: kenBurns 20s infinite alternate ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-indicator {
|
|
||||||
height: 0.375rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const slides = document.querySelectorAll('.slide');
|
|
||||||
const prevButton = document.getElementById('prev-button');
|
|
||||||
const nextButton = document.getElementById('next-button');
|
|
||||||
const indicators = document.querySelectorAll('.indicator');
|
|
||||||
let currentIndex = 0;
|
|
||||||
const slidesCount = slides.length;
|
|
||||||
|
|
||||||
// Initialize the first slide
|
|
||||||
slides[0].classList.add('opacity-100');
|
|
||||||
|
|
||||||
// Set active indicator
|
|
||||||
function setActiveIndicator(index) {
|
|
||||||
indicators.forEach((indicator, i) => {
|
|
||||||
if (i === index) {
|
|
||||||
indicator.classList.add('opacity-100');
|
|
||||||
indicator.classList.add('active-indicator');
|
|
||||||
indicator.classList.add('w-12');
|
|
||||||
} else {
|
|
||||||
indicator.classList.remove('opacity-100');
|
|
||||||
indicator.classList.remove('active-indicator');
|
|
||||||
indicator.classList.remove('w-12');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Go to slide
|
|
||||||
function goToSlide(index) {
|
|
||||||
if (index < 0) {
|
|
||||||
index = slidesCount - 1;
|
|
||||||
} else if (index >= slidesCount) {
|
|
||||||
index = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide all slides
|
|
||||||
slides.forEach((slide) => {
|
|
||||||
slide.classList.remove('opacity-100');
|
|
||||||
slide.classList.add('opacity-0');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Show the target slide
|
|
||||||
slides[index].classList.add('opacity-100');
|
|
||||||
slides[index].classList.remove('opacity-0');
|
|
||||||
|
|
||||||
currentIndex = index;
|
|
||||||
setActiveIndicator(currentIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Navigation
|
|
||||||
prevButton.addEventListener('click', () => goToSlide(currentIndex - 1));
|
|
||||||
nextButton.addEventListener('click', () => goToSlide(currentIndex + 1));
|
|
||||||
|
|
||||||
// Indicator clicks
|
|
||||||
indicators.forEach((indicator, index) => {
|
|
||||||
indicator.addEventListener('click', () => goToSlide(index));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Touch swipe support
|
|
||||||
let touchStartX = 0;
|
|
||||||
const sliderContainer = document.getElementById('slider-container');
|
|
||||||
|
|
||||||
sliderContainer.addEventListener('touchstart', (e) => {
|
|
||||||
touchStartX = e.changedTouches[0].screenX;
|
|
||||||
});
|
|
||||||
|
|
||||||
sliderContainer.addEventListener('touchend', (e) => {
|
|
||||||
const touchEndX = e.changedTouches[0].screenX;
|
|
||||||
const diff = touchStartX - touchEndX;
|
|
||||||
|
|
||||||
if (Math.abs(diff) > 50) {
|
|
||||||
if (diff > 0) {
|
|
||||||
goToSlide(currentIndex + 1); // Swipe left
|
|
||||||
} else {
|
|
||||||
goToSlide(currentIndex - 1); // Swipe right
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Autoplay
|
|
||||||
let autoplayInterval = setInterval(() => goToSlide(currentIndex + 1), 5000);
|
|
||||||
|
|
||||||
sliderContainer.addEventListener('mouseenter', () => clearInterval(autoplayInterval));
|
|
||||||
sliderContainer.addEventListener('mouseleave', () => {
|
|
||||||
autoplayInterval = setInterval(() => goToSlide(currentIndex + 1), 5000);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize
|
|
||||||
setActiveIndicator(currentIndex);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<section id="layanan" class="py-16 mt-10">
|
|
||||||
<div class="container mx-auto px-4 max-w-7xl">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Layanan Perizinan Lingkungan</h2>
|
|
||||||
<div class="w-24 h-1 bg-blue-500 mx-auto mb-6"></div>
|
|
||||||
<p class="text-gray-600 max-w-2xl mx-auto">Kami menyediakan berbagai layanan berkualitas untuk memenuhi kebutuhan Anda</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
||||||
<!-- Layanan 1 -->
|
|
||||||
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg class="w-8 h-8 text-blue-600" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Layanan Pertama</h3>
|
|
||||||
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.</p>
|
|
||||||
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
|
|
||||||
Selengkapnya
|
|
||||||
<svg class="w-4 h-4 ml-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>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layanan 2 -->
|
|
||||||
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg class="w-8 h-8 text-green-600" 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="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Layanan Kedua</h3>
|
|
||||||
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.</p>
|
|
||||||
<a href="#" class="inline-flex items-center text-green-600 hover:text-green-700 font-medium">
|
|
||||||
Selengkapnya
|
|
||||||
<svg class="w-4 h-4 ml-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>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Layanan 3 -->
|
|
||||||
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
|
|
||||||
<svg class="w-8 h-8 text-purple-600" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold text-gray-800 mb-3">Layanan Ketiga</h3>
|
|
||||||
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare.</p>
|
|
||||||
<a href="#" class="inline-flex items-center text-purple-600 hover:text-purple-700 font-medium">
|
|
||||||
Selengkapnya
|
|
||||||
<svg class="w-4 h-4 ml-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>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
@extends('components.frontend.layout')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
{{-- @include('components.home.hero') --}}
|
||||||
|
@include('components.frontend.home.hero')
|
||||||
|
@include('components.frontend.home.layanan')
|
||||||
|
@include('components.frontend.home.faq')
|
||||||
|
@include('components.frontend.home.news')
|
||||||
|
@include('components.frontend.footer')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@endsection
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
@extends('components.frontend.layout')
|
|
||||||
|
|
||||||
@section('content')
|
|
||||||
|
|
||||||
{{-- @include('components.home.hero') --}}
|
|
||||||
@include('components.home.hero2')
|
|
||||||
@include('components.home.layanan')
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@endsection
|
|
||||||
|
|
@ -10,7 +10,7 @@ use App\Http\Controllers\SuratArahanController;
|
||||||
use Illuminate\Support\Facades\Route;
|
use Illuminate\Support\Facades\Route;
|
||||||
|
|
||||||
Route::get('/', function () {
|
Route::get('/', function () {
|
||||||
return view('home');
|
return view('/frontend/home');
|
||||||
});
|
});
|
||||||
|
|
||||||
Route::get('/surat', [SuratArahanController::class, 'show']);
|
Route::get('/surat', [SuratArahanController::class, 'show']);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue