97 lines
5.0 KiB
Plaintext
97 lines
5.0 KiB
Plaintext
@{
|
|
var breadcrumbText = ViewData["BreadcrumbText"] as string ?? "Default Breadcrumb";
|
|
var titleBeforeHighlight = ViewData["TitleBeforeHighlight"] as string ?? "Judul Sebelum";
|
|
var titleHighlight = ViewData["TitleHighlight"] as string ?? "Judul Highlight";
|
|
}
|
|
|
|
<div class="relative bg-white text-gray-800 py-12 container mx-auto max-w-6xl rounded-2xl shadow-xl overflow-hidden mt-6 h-80">
|
|
<!-- Background Image -->
|
|
<div class="absolute inset-0">
|
|
<img src="@Url.Content("~/assets/images/bg-breadcumb.png")" alt="Background" class="w-full h-full object-cover object-right md:object-center" />
|
|
</div>
|
|
|
|
<!-- Animated Background Pattern -->
|
|
<div class="absolute inset-0 opacity-15">
|
|
<div class="absolute top-0 left-0 w-48 h-48 bg-green-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse"></div>
|
|
<div class="absolute top-0 right-0 w-48 h-48 bg-green-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-2000"></div>
|
|
<div class="absolute bottom-0 left-1/2 w-48 h-48 bg-amber-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-4000"></div>
|
|
</div>
|
|
|
|
<!-- Grid Pattern Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/5 to-transparent"></div>
|
|
|
|
<div class="relative px-6 lg:px-12 h-full flex flex-col justify-center">
|
|
<!-- Modern Breadcrumb -->
|
|
<nav class="flex items-center justify-center lg:justify-start mb-6 hidden md:flex" aria-label="breadcrumb">
|
|
<div class="flex items-center space-x-3 bg-orange-500/10 backdrop-blur-sm rounded-full px-5 py-2 border border-gray-300">
|
|
<a href="@Url.Action("Index", "Home")" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900 transition-all duration-300 group">
|
|
<div class="p-1.5 bg-green-500/20 rounded-full group-hover:bg-green-500/40 transition-all duration-300">
|
|
<i class="w-3 h-3" data-lucide="home"></i>
|
|
</div>
|
|
<span class="font-medium text-sm">Beranda</span>
|
|
</a>
|
|
<div class="w-px h-4 bg-gray-400"></div>
|
|
<span class="text-gray-800 font-medium text-sm">@breadcrumbText</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Title Section -->
|
|
<div class="text-center lg:text-left max-w-4xl mx-auto lg:mx-0">
|
|
<!-- Main Title with Enhanced Typography -->
|
|
<div class="mb-4">
|
|
<h1 class="text-2xl lg:text-4xl font-black mb-2 leading-tight tracking-tight">
|
|
<span class="block text-gray-800">@titleBeforeHighlight</span>
|
|
<span class="block bg-gradient-to-r from-green-600 via-amber-600 to-green-600 bg-clip-text text-transparent animate-pulse">
|
|
@titleHighlight
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Subtitle with Icon -->
|
|
<div class="flex items-center justify-center lg:justify-start space-x-4 mb-4">
|
|
@* <div class="hidden lg:block w-12 h-px bg-gradient-to-r from-transparent to-green-600"></div> *@
|
|
<div class="flex items-center space-x-3 bg-green-300/10 backdrop-blur-sm rounded-xl px-4 py-2 border border-gray-300">
|
|
<div class="p-1.5 bg-green-500/20 rounded-full hidden md:block">
|
|
<i class="w-4 h-4 text-green-600" data-lucide="leaf"></i>
|
|
</div>
|
|
<p class="text-sm lg:text-base text-gray-700 font-medium">
|
|
Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
|
</p>
|
|
</div>
|
|
@* <div class="hidden lg:block w-12 h-px bg-gradient-to-l from-transparent to-green-600"></div> *@
|
|
</div>
|
|
|
|
<!-- Decorative Elements -->
|
|
@* <div class="flex justify-center lg:justify-start items-center space-x-3">
|
|
<div class="w-6 h-6 border-2 border-green-600 rounded-full animate-spin-slow"></div>
|
|
<div class="w-24 h-0.5 bg-gradient-to-r from-green-600 via-green-600 to-amber-600 rounded-full shadow-lg shadow-green-500/50"></div>
|
|
<div class="w-6 h-6 border-2 border-green-600 rounded-full animate-spin-slow animation-reverse"></div>
|
|
</div> *@
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Glow Effect -->
|
|
@* <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-1 bg-gradient-to-r from-transparent via-green-600 to-transparent blur-sm"></div> *@
|
|
</div>
|
|
|
|
<register-block dynamic-section="css" key="cssBreadcumb">
|
|
<style>
|
|
@@keyframes spin-slow {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.animate-spin-slow {
|
|
animation: spin-slow 8s linear infinite;
|
|
}
|
|
.animation-reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
.animation-delay-2000 {
|
|
animation-delay: 2s;
|
|
}
|
|
.animation-delay-4000 {
|
|
animation-delay: 4s;
|
|
}
|
|
</style>
|
|
</register-block>
|