136 lines
4.6 KiB
Vue
136 lines
4.6 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 lg:flex-row items-center justify-between overflow-hidden"
|
||
>
|
||
<!-- 🌐 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>
|
||
|
||
<!-- 🕷️ Laba-laba animasi -->
|
||
<div v-if="showSpider" class="absolute top-10 left-10 text-4xl animate-bounce hidden sm:block">🕷️</div>
|
||
<div
|
||
v-if="showSpider"
|
||
class="absolute top-20 right-1/4 text-3xl animate-bounce hidden sm:block"
|
||
style="animation-delay: 0.5s;"
|
||
>🕸️</div>
|
||
<div
|
||
v-if="showSpider"
|
||
class="absolute bottom-20 left-1/3 text-4xl animate-bounce hidden sm:block"
|
||
style="animation-delay: 1s;"
|
||
>🕷️</div>
|
||
|
||
<!-- ================= FOTO SPIDERMAN (BACKGROUND UNTUK MOBILE) ================= -->
|
||
<div class="absolute inset-0 lg:hidden pointer-events-none">
|
||
<img
|
||
src="/spiderman.png"
|
||
alt="Spider-Man"
|
||
class="absolute inset-0 w-full h-full object-cover object-center opacity-40"
|
||
@error="onImageError"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
|
||
</div>
|
||
|
||
<!-- ================= KONTEN TEKS (KIRI) ================= -->
|
||
<div
|
||
class="relative z-10 w-full lg:w-1/2 min-h-[50vh] flex flex-col justify-center items-center lg:items-start text-center lg:text-left px-6 lg:px-20 py-12 lg:py-0 space-y-8"
|
||
>
|
||
<div class="text-5xl sm:text-6xl animate-bounce">🕷️</div>
|
||
|
||
<h1
|
||
class="text-3xl sm:text-5xl lg:text-6xl font-extrabold text-yellow-300 drop-shadow-[0_0_10px_rgba(255,255,0,0.4)]"
|
||
>
|
||
Terima Kasih! 💙❤️
|
||
</h1>
|
||
|
||
<p class="text-lg sm:text-2xl text-blue-200">
|
||
Atas kehadiran dan doa <span class="text-yellow-300 font-semibold">spider-power</span> untuk
|
||
</p>
|
||
|
||
<p
|
||
class="text-2xl sm:text-4xl font-bold text-yellow-300 bg-black/40 py-3 sm:py-4 px-6 sm:px-8 rounded-2xl border border-yellow-500/50"
|
||
>
|
||
{{ childName || 'Spider-Kid' }}
|
||
</p>
|
||
|
||
<div class="bg-black/50 backdrop-blur-lg rounded-2xl p-6 border border-red-500/50">
|
||
<p class="text-base sm:text-lg italic leading-relaxed">
|
||
"With great age comes great responsibility!
|
||
Semoga kebahagiaan selalu menyertai kita semua 🕸️"
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tombol Kembali -->
|
||
<button
|
||
@click="reloadPage"
|
||
class="w-full bg-gradient-to-r from-red-600 to-blue-600 text-white py-4 px-8 rounded-full font-bold shadow-2xl hover:from-red-700 hover:to-blue-700 transition-all duration-300 transform hover:scale-105 border-2 border-white/30 text-lg flex items-center justify-center gap-3"
|
||
>
|
||
<span class="text-2xl">🕸️</span>
|
||
Kembali ke Awal
|
||
<span class="text-2xl">🕷️</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ================= FOTO SPIDERMAN (KANAN UNTUK DESKTOP) ================= -->
|
||
<div
|
||
class="hidden lg:flex absolute top-0 right-0 h-full w-1/2 justify-end items-center overflow-hidden"
|
||
>
|
||
<img
|
||
src="/spiderman.png"
|
||
alt="Spider-Man"
|
||
class="h-full w-auto object-cover object-right transform translate-x-10"
|
||
@error="onImageError"
|
||
/>
|
||
<!-- Efek gradasi ke kiri -->
|
||
<div class="absolute inset-0 bg-gradient-to-l from-black/80 via-black/50 to-transparent"></div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
|
||
defineProps({
|
||
childName: String,
|
||
jsonData: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
|
||
const showSpider = ref(false);
|
||
|
||
const reloadPage = () => window.location.reload();
|
||
|
||
const onImageError = (e) => {
|
||
e.target.src =
|
||
"https://images.unsplash.com/photo-1635805737707-575885ab0820?w=800&h=1000&fit=crop&auto=format";
|
||
e.target.alt = "Spider-Man Character";
|
||
};
|
||
|
||
onMounted(() => {
|
||
setTimeout(() => (showSpider.value = true), 1500);
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-15px); }
|
||
}
|
||
.animate-bounce {
|
||
animation: bounce 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* Responsif tambahan agar spiderman selalu kanan dan proporsional */
|
||
@media (max-width: 1024px) {
|
||
img[alt="Spider-Man"] {
|
||
object-position: center right;
|
||
}
|
||
}
|
||
</style>
|