369 lines
19 KiB
Plaintext
369 lines
19 KiB
Plaintext
<section id="section1" class="relative min-h-screen overflow-hidden md:pt-20">
|
|
<!-- Enhanced Animated Background Elements -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-gray-100">
|
|
<div class="absolute inset-0 bg-grid-pattern opacity-[0.03]"></div>
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
|
|
<div class="blob blob-1 absolute top-[10%] right-[15%] w-[40vw] h-[40vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow opacity-15 bg-gradient-to-br from-green-300 to-emerald-400"></div>
|
|
<div class="blob blob-2 absolute bottom-[5%] left-[20%] w-[35vw] h-[35vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-2000 opacity-15 bg-gradient-to-br from-amber-300 to-orange-400"></div>
|
|
<div class="blob blob-3 absolute top-[30%] left-[10%] w-[30vw] h-[30vw] rounded-full mix-blend-multiply filter blur-[80px] animate-blob-slow animation-delay-4000 opacity-15 bg-gradient-to-tr from-green-400 to-teal-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Image -->
|
|
@* <div class="absolute inset-0 opacity-20">
|
|
<img src="@Url.Content("~/assets/images/home/pancoran-bg.svg")" alt="Background" class="w-full h-full object-cover object-center">
|
|
</div> *@
|
|
|
|
<!-- Header Content - Enhanced -->
|
|
<div class="container mx-auto px-4 items-center text-center relative z-10">
|
|
<div class="animate-fade-in" style="animation-delay: 0.2s">
|
|
<span class="inline-flex items-center rounded-full bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-1.5 text-xs md:text-sm font-medium text-ijo ring-1 ring-green-600/20 ring-inset my-4 shadow-sm transition-transform duration-300 hover:scale-105">
|
|
<span class="mr-2 bg-green-500 rounded-full w-1.5 h-1.5 animate-pulse"></span>
|
|
Selamat Datang di ✨
|
|
</span>
|
|
</div>
|
|
|
|
<h2 class="text-2xl md:text-3xl lg:text-5xl font-extrabold animate-fade-in" style="animation-delay: 0.4s">
|
|
<span class="text-oren">Website Resmi</span>
|
|
</h2>
|
|
|
|
<div class="h-16 md:h-16 lg:h-24 flex items-center justify-center overflow-hidden animate-fade-in" style="animation-delay: 0.6s">
|
|
<span id="typing-text" class="bg-oren bg-clip-text text-transparent text-2xl md:text-3xl lg:text-5xl font-bold"></span>
|
|
<span id="cursor" class="text-2xl md:text-3xl lg:text-5xl font-bold animate-blink text-oren">|</span>
|
|
</div>
|
|
|
|
<p class="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed mt-2 animate-fade-in" style="animation-delay: 0.8s">
|
|
Jelajahi berbagai layanan untuk menjaga kebersihan dan kelestarian lingkungan Provinsi DKI Jakarta.
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Service Cards - Enhanced -->
|
|
<div class="select-none w-full flex items-center justify-center py-8 overflow-x-hidden max-w-7xl mx-auto">
|
|
<div class="w-full text-center flex flex-col md:flex-row items-center justify-center gap-5 px-4">
|
|
<!-- Item 1 - DLH -->
|
|
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[calc(33.333%-1rem)] md:h-[28vh] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative overflow-hidden group shadow-xl" style="background-image: url('@Url.Content("~/assets/images/home/hero-section-1.jpg")')">
|
|
<!-- Subtle border with glow effect -->
|
|
<div class="absolute inset-0 rounded-2xl border-2 border-white/30 group-hover:border-white/50 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transition-all duration-500"></div>
|
|
|
|
<!-- Content cover with better backdrop blur -->
|
|
<div class="cover absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-sm transition-all duration-500">
|
|
<h3 class="title text-white text-xl md:text-2xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110 drop-shadow-lg">DLH</h3>
|
|
</div>
|
|
|
|
<!-- Status indicator dot -->
|
|
<div class="absolute top-3 right-3 w-3 h-3 bg-green-500/80 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.7)]"></div>
|
|
|
|
<!-- Enhanced action button with subtle shine effect -->
|
|
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
|
<a href="#" class="relative overflow-hidden bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white px-6 py-2.5 rounded-lg text-sm font-semibold shadow-lg backdrop-blur-sm border border-white/10 transition-all duration-300 hover:scale-105">
|
|
<span class="relative z-10">Telusuri</span>
|
|
<span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 2 - BPS-RW -->
|
|
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[calc(33.333%-1rem)] md:h-[28vh] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative overflow-hidden group shadow-xl" style="background-image: url('@Url.Content("~/assets/images/home/hero-section-2.jpg")')">
|
|
<!-- Subtle border with glow effect -->
|
|
<div class="absolute inset-0 rounded-2xl border-2 border-white/30 group-hover:border-white/50 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transition-all duration-500"></div>
|
|
|
|
<!-- Enhanced gradient overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent rounded-b-2xl"></div>
|
|
|
|
<!-- Content cover with better backdrop blur -->
|
|
<div class="cover absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-sm transition-all duration-500">
|
|
<h3 class="title text-white text-xl md:text-2xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110 drop-shadow-lg">BPS-RW</h3>
|
|
</div>
|
|
|
|
<!-- Status indicator dot -->
|
|
<div class="absolute top-3 right-3 w-3 h-3 bg-green-500/80 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.7)]"></div>
|
|
|
|
<!-- Enhanced action button with subtle shine effect -->
|
|
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
|
<a href="#" class="relative overflow-hidden bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white px-6 py-2.5 rounded-lg text-sm font-semibold shadow-lg backdrop-blur-sm border border-white/10 transition-all duration-300 hover:scale-105">
|
|
<span class="relative z-10">Telusuri</span>
|
|
<span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3 - AMDAL -->
|
|
<div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[calc(33.333%-1rem)] md:h-[28vh] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative overflow-hidden group shadow-xl" style="background-image: url('@Url.Content("~/assets/images/home/hero-section-3.jpg")')">
|
|
<!-- Subtle border with glow effect -->
|
|
<div class="absolute inset-0 rounded-2xl border-2 border-white/30 group-hover:border-white/50 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] transition-all duration-500"></div>
|
|
|
|
<!-- Enhanced gradient overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent rounded-b-2xl"></div>
|
|
|
|
<!-- Content cover with better backdrop blur -->
|
|
<div class="cover absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-sm transition-all duration-500">
|
|
<h3 class="title text-white text-xl md:text-2xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110 drop-shadow-lg">AMDAL</h3>
|
|
</div>
|
|
|
|
<!-- Status indicator dot -->
|
|
<div class="absolute top-3 right-3 w-3 h-3 bg-green-500/80 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.7)]"></div>
|
|
|
|
<!-- Enhanced action button with subtle shine effect -->
|
|
<div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
|
|
<a href="#" class="relative overflow-hidden bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white px-6 py-2.5 rounded-lg text-sm font-semibold shadow-lg backdrop-blur-sm border border-white/10 transition-all duration-300 hover:scale-105">
|
|
<span class="relative z-10">Telusuri</span>
|
|
<span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Scroll indicator -->
|
|
<div class="absolute left-1/2 bottom-4 transform -translate-x-1/2 opacity-70 animate-bounce hidden md:flex flex-col items-center cursor-pointer hover:opacity-100 transition-opacity duration-300" onclick="scrollToLayanan()">
|
|
<span class="text-sm text-gray-500">Scroll</span>
|
|
<i class="w-4 h-4 text-gray-500" data-lucide="chevron-down"></i>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<register-block dynamic-section="css" key="cssSlider">
|
|
<style>
|
|
/* Animation keyframes */
|
|
@@keyframes fade-in {
|
|
0% { opacity: 0; transform: translateY(20px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
@@keyframes blob-slow {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(20px, -15px) scale(1.05); }
|
|
50% { transform: translate(0, 15px) scale(0.95); }
|
|
75% { transform: translate(-20px, -5px) scale(1.05); }
|
|
}
|
|
|
|
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
|
|
.animate-blink { animation: blink 1s step-end infinite; }
|
|
.animate-blob-slow { animation: blob-slow 20s ease-in-out infinite; }
|
|
|
|
.animation-delay-2000 { animation-delay: 2s; }
|
|
.animation-delay-4000 { animation-delay: 4s; }
|
|
|
|
/* Grid background */
|
|
.bg-grid-pattern {
|
|
background-image: radial-gradient(circle, #000 0.5px, transparent 0.5px);
|
|
background-size: 30px 30px;
|
|
}
|
|
</style>
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsSlider">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script>
|
|
// GSAP enhanced animations
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const items = document.querySelectorAll(".item");
|
|
const covers = document.querySelectorAll(".cover");
|
|
const actionButtons = document.querySelectorAll(".action-button");
|
|
const isMobile = window.innerWidth <= 768;
|
|
|
|
// Enhanced expand function with smoother animations
|
|
const expand = (item, i) => {
|
|
const cover = item.querySelector(".cover");
|
|
const button = item.querySelector(".action-button");
|
|
const title = item.querySelector(".title");
|
|
|
|
// Reset other items
|
|
items.forEach((it, ind) => {
|
|
if (i === ind) return;
|
|
it.clicked = false;
|
|
const otherCover = it.querySelector(".cover");
|
|
const otherButton = it.querySelector(".action-button");
|
|
const otherTitle = it.querySelector(".title");
|
|
|
|
gsap.to(otherCover, { opacity: 1, backdropFilter: "blur(5px)", duration: 0.6, ease: "power2.out" });
|
|
gsap.to(otherButton, { opacity: 0, y: 20, duration: 0.4, ease: "power2.out" });
|
|
gsap.to(otherTitle, { scale: 1, opacity: 1, duration: 0.4, rotation: isMobile ? 0 : -90, ease: "power2.out" });
|
|
gsap.to(it, {
|
|
scale: 1,
|
|
rotationY: 0,
|
|
boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
duration: 0.8,
|
|
ease: "power2.out"
|
|
});
|
|
});
|
|
|
|
// Mobile animations
|
|
if (isMobile) {
|
|
gsap.to(items, {
|
|
height: item.clicked ? "18vh" : "12vh",
|
|
duration: 1.3,
|
|
ease: "elastic(1, .6)",
|
|
});
|
|
|
|
item.clicked = !item.clicked;
|
|
gsap.to(item, {
|
|
height: item.clicked ? "38vh" : "18vh",
|
|
duration: 1.6,
|
|
ease: "elastic(1, .3)",
|
|
scale: item.clicked ? 1 : 1,
|
|
boxShadow: item.clicked ?
|
|
"0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 255, 255, 0.2)" :
|
|
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
|
|
});
|
|
}
|
|
// Desktop animations
|
|
else {
|
|
gsap.to(items, {
|
|
width: item.clicked ? "calc(25% - 1rem)" : "calc(25% - 1rem)",
|
|
duration: 1.6,
|
|
ease: "elastic(1, .6)",
|
|
});
|
|
|
|
item.clicked = !item.clicked;
|
|
gsap.to(item, {
|
|
width: item.clicked ? "calc(50% - 1rem)" : "calc(33.333% - 1rem)",
|
|
duration: 1.8,
|
|
ease: "elastic(1, .3)",
|
|
scale: item.clicked ? 1 : 1,
|
|
rotationY: item.clicked ? 5 : 0,
|
|
});
|
|
}
|
|
|
|
// Content animations
|
|
gsap.to(cover, {
|
|
opacity: item.clicked ? 0.3 : 1,
|
|
backdropFilter: item.clicked ? "blur(0px)" : "blur(5px)",
|
|
duration: 0.6,
|
|
ease: "power2.out"
|
|
});
|
|
|
|
gsap.to(title, {
|
|
opacity: item.clicked ? 0 : 1,
|
|
scale: item.clicked ? 0.8 : 1,
|
|
duration: 0.4,
|
|
ease: "power2.out"
|
|
});
|
|
|
|
gsap.to(button, {
|
|
opacity: item.clicked ? 1 : 0,
|
|
y: item.clicked ? 0 : 20,
|
|
duration: item.clicked ? 0.6 : 0.4,
|
|
delay: item.clicked ? 0.2 : 0,
|
|
ease: "power2.out"
|
|
});
|
|
};
|
|
|
|
// Enhanced hover effects
|
|
items.forEach((item, i) => {
|
|
item.clicked = false;
|
|
|
|
item.addEventListener("click", (e) => {
|
|
if (!e.target.closest(".action-button")) expand(item, i);
|
|
});
|
|
|
|
item.addEventListener("mouseenter", () => {
|
|
if (!item.clicked) {
|
|
gsap.to(item, {
|
|
scale: 1.03,
|
|
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 15px rgba(255, 255, 255, 0.1)",
|
|
duration: 0.4,
|
|
ease: "power2.out"
|
|
});
|
|
|
|
const title = item.querySelector(".title");
|
|
gsap.to(title, { scale: 1.1, duration: 0.4, ease: "power2.out" });
|
|
}
|
|
});
|
|
|
|
item.addEventListener("mouseleave", () => {
|
|
if (!item.clicked) {
|
|
gsap.to(item, {
|
|
scale: 1,
|
|
boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
duration: 0.4,
|
|
ease: "power2.out"
|
|
});
|
|
|
|
const title = item.querySelector(".title");
|
|
gsap.to(title, { scale: 1, duration: 0.4, ease: "power2.out" });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Enhanced entrance animations
|
|
gsap.fromTo(
|
|
items,
|
|
{ opacity: 0, y: 50, scale: 0.9 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
duration: 1.2,
|
|
stagger: 0.25,
|
|
ease: "back.out(1.7)",
|
|
delay: 0.8
|
|
}
|
|
);
|
|
|
|
// Auto-expand first item with delay
|
|
setTimeout(() => expand(items[0], 0), 1500);
|
|
});
|
|
|
|
// Enhanced typing animation
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const texts = ['Dinas Lingkungan Hidup Provinsi DKI Jakarta'];
|
|
let textIndex = 0;
|
|
let charIndex = 0;
|
|
let isDeleting = false;
|
|
let typingSpeed = 80;
|
|
|
|
const typingElement = document.getElementById('typing-text');
|
|
const cursorElement = document.getElementById('cursor');
|
|
|
|
function typeWriter() {
|
|
const currentText = texts[textIndex];
|
|
|
|
if (isDeleting) {
|
|
typingElement.textContent = currentText.substring(0, charIndex - 1);
|
|
charIndex--;
|
|
typingSpeed = 40;
|
|
} else {
|
|
typingElement.textContent = currentText.substring(0, charIndex + 1);
|
|
charIndex++;
|
|
typingSpeed = 80;
|
|
}
|
|
|
|
if (!isDeleting && charIndex === currentText.length) {
|
|
setTimeout(() => {
|
|
isDeleting = true;
|
|
}, 2000);
|
|
} else if (isDeleting && charIndex === 0) {
|
|
isDeleting = false;
|
|
textIndex = (textIndex + 1) % texts.length;
|
|
setTimeout(() => {
|
|
typeWriter();
|
|
}, 500);
|
|
return;
|
|
}
|
|
|
|
setTimeout(typeWriter, typingSpeed);
|
|
}
|
|
|
|
// Start typing animation with slight delay
|
|
setTimeout(typeWriter, 800);
|
|
});
|
|
</script>
|
|
<script>
|
|
function scrollToLayanan() {
|
|
const layananSection = document.querySelector('[id*="headerLayanan-section"]');
|
|
if (layananSection) {
|
|
layananSection.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
</register-block> |