105 lines
3.3 KiB
Vue
105 lines
3.3 KiB
Vue
<template>
|
||
<section
|
||
class="relative w-full min-h-screen bg-gradient-to-b from-blue-900 via-red-800 to-black text-white flex flex-col justify-center items-center overflow-hidden py-16 px-6"
|
||
>
|
||
<!-- Efek jaring latar -->
|
||
<div class="absolute inset-0 opacity-10 pointer-events-none">
|
||
<div class="absolute top-0 left-1/3 w-0.5 h-full bg-gradient-to-b from-blue-200 to-red-200"></div>
|
||
<div class="absolute top-0 left-2/3 w-0.5 h-full bg-gradient-to-b from-blue-200 to-red-200"></div>
|
||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.15),transparent_70%)]"></div>
|
||
</div>
|
||
|
||
<!-- Judul -->
|
||
<div class="relative z-10 text-center mb-12">
|
||
<h2
|
||
class="text-5xl md:text-6xl font-extrabold text-yellow-300 drop-shadow-[0_0_10px_rgba(255,255,0,0.4)] tracking-tight"
|
||
>
|
||
🕸️ Galeri Petualangan 🕷️
|
||
</h2>
|
||
<p class="mt-3 text-base md:text-lg text-gray-200 italic tracking-wide">
|
||
Momen seru para Spider-Hero yang tertangkap kamera!
|
||
</p>
|
||
<div class="w-32 h-1 bg-gradient-to-r from-red-500 to-blue-500 mx-auto mt-4 rounded-full"></div>
|
||
</div>
|
||
|
||
<!-- Grid Foto -->
|
||
<div
|
||
class="relative z-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"
|
||
>
|
||
<div
|
||
v-for="(img, index) in images"
|
||
:key="index"
|
||
class="relative group rounded-2xl overflow-hidden shadow-[0_0_25px_rgba(255,255,255,0.15)] border border-white/10 bg-black/40 backdrop-blur-sm hover:shadow-[0_0_35px_rgba(255,0,0,0.4)] transition-all duration-500"
|
||
>
|
||
<!-- Gambar -->
|
||
<img
|
||
:src="img"
|
||
alt="Foto"
|
||
class="w-full h-72 object-cover transform group-hover:scale-110 transition-transform duration-700 ease-out"
|
||
/>
|
||
|
||
<!-- Overlay hover -->
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 flex flex-col items-center justify-end pb-5"
|
||
>
|
||
<span class="text-yellow-300 font-semibold text-lg mb-1 drop-shadow-md">Photo {{ index + 1 }}</span>
|
||
<span class="text-sm text-gray-200">🕷️ Klik untuk zoom</span>
|
||
</div>
|
||
|
||
<!-- Icon Spider -->
|
||
<div
|
||
class="absolute top-3 right-3 bg-gradient-to-r from-red-600 to-red-800 text-white px-3 py-1 rounded-full text-sm font-bold shadow-lg"
|
||
>
|
||
🕷️
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div
|
||
v-if="images.length === 0"
|
||
class="relative z-10 text-center mt-16 animate-pulse"
|
||
>
|
||
<div class="text-6xl mb-3">🕸️</div>
|
||
<p class="text-xl font-semibold">Foto-foto sedang dalam petualangan...</p>
|
||
<p class="text-yellow-300 mt-2">Mereka akan segera muncul!</p>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
images: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Efek muncul halus untuk tiap foto */
|
||
.group {
|
||
animation: fadeInUp 0.8s ease both;
|
||
}
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Responsif tambahan */
|
||
@media (max-width: 640px) {
|
||
h2 {
|
||
font-size: 2.25rem;
|
||
}
|
||
img {
|
||
height: 12rem;
|
||
}
|
||
}
|
||
</style>
|