webdlh-net/Views/Shared/Partials/MegaMenus/_MegaMenu5-SeputarDLH.cshtml

52 lines
3.9 KiB
Plaintext

@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide
<div id="mega-menu-5" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
<div class="max-w-7xl mx-auto px-4 py-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<a href="@Url.Action("Berita", "Seputar")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="newspaper"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Berita</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kegiatan dan informasi terkini dari DLH</p>
</a>
<a href="@Url.Action("Video", "Seputar")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="video"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Video</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kegiatan dan Video terkini dari DLH</p>
</a>
<a href="@Url.Action("Kontak", "Seputar")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
<i class="w-6 h-6 text-white" data-lucide="phone"></i>
</div>
<div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Kontak Kami</div>
<p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Informasi kontak untuk keperluan masyarakat</p>
</a>
</div>
</div>
</div>
<script>
// Define mobile template for Seputar DLH section
window.seputarMobileContent = `
<div class="space-y-2 p-4 border-t border-orange-100">
<a href="@Url.Action("Berita", "Seputar")" class="flex items-center gap-3 p-3 bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600" data-lucide="newspaper"></i>
<span class="font-medium text-gray-900">Berita</span>
</a>
<a href="@Url.Action("Video", "Seputar")" class="flex items-center gap-3 p-3 bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600" data-lucide="video"></i>
<span class="font-medium text-gray-900">Video</span>
</a>
<a href="@Url.Action("Kontak", "Seputar")" class="flex items-center gap-3 p-3 bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
<i class="w-5 h-5 text-orange-600" data-lucide="phone"></i>
<span class="font-medium text-gray-900">Kontak Kami</span>
</a>
</div>
`;
</script>