35 lines
1.3 KiB
Vue
35 lines
1.3 KiB
Vue
<template>
|
|
<div class="p-6 text-center max-w-4xl mx-auto">
|
|
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
|
|
📸 Galeri Foto 📸
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div
|
|
v-for="(img, i) in images"
|
|
:key="i"
|
|
class="group relative overflow-hidden rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-500"
|
|
>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"></div>
|
|
<img
|
|
:src="img"
|
|
alt="Galeri"
|
|
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
|
|
/>
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-20">
|
|
<p class="font-semibold">Foto {{ i + 1 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="images.length === 0" class="bg-white/80 rounded-2xl p-8 shadow-lg">
|
|
<p class="text-gray-600 text-lg">Belum ada foto yang diunggah</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
images: Array
|
|
})
|
|
</script> |