109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<template>
|
|
<section
|
|
class="min-h-screen flex flex-col justify-center items-center text-center bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 px-6 py-12 relative overflow-hidden"
|
|
>
|
|
<!-- Ornamen Cahaya -->
|
|
<div class="absolute inset-0 opacity-10 pointer-events-none">
|
|
<div class="absolute top-10 left-10 w-24 h-24 bg-orange-500 rounded-full blur-2xl"></div>
|
|
<div class="absolute bottom-10 right-10 w-32 h-32 bg-yellow-600 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<!-- Konten Utama -->
|
|
<div
|
|
class="relative z-10 w-full max-w-3xl bg-white/60 backdrop-blur-md rounded-3xl shadow-2xl p-8 md:p-12 border border-yellow-200"
|
|
>
|
|
<h1 class="text-orange-700 text-4xl md:text-5xl font-extrabold mb-6 animate-fade-in">
|
|
Terima Kasih
|
|
</h1>
|
|
|
|
<p class="text-orange-800 text-lg md:text-xl mb-8 leading-relaxed animate-fade-in delay-100">
|
|
Kehadiran dan doa restu Bapak/Ibu/Saudara/i merupakan kebahagiaan besar bagi kami.
|
|
</p>
|
|
|
|
<div
|
|
class="bg-gradient-to-r from-yellow-300 to-yellow-400 rounded-3xl py-6 px-8 shadow-md animate-fade-in delay-200"
|
|
>
|
|
<p class="text-orange-700 font-bold text-2xl md:text-3xl mb-2">
|
|
{{ jsonData.nama_bapak }} & {{ jsonData.nama_ibu }}
|
|
</p>
|
|
<p class="text-orange-800 text-lg">
|
|
Orang Tua {{ jsonData.nama_panggilan }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 🟡 Minion Kiri -->
|
|
<img
|
|
src="/minion03f.png"
|
|
alt="Minion kiri"
|
|
class="fixed bottom-[-5px] left-0 w-34 md:w-51 z-40 drop-shadow-xl animate-bounce-slow -translate-x-[-18%] transition-transform duration-500 ease-in-out hover:scale-110 hover:rotate-6 cursor-pointer"
|
|
/>
|
|
|
|
<!-- 🟡 Minion Kanan -->
|
|
<img
|
|
src="/minion01.png"
|
|
alt="Minion kanan"
|
|
class="fixed bottom-[20px] right-0 w-34 md:w-56 z-40 drop-shadow-xl animate-bounce-slow translate-x-[-16%] transition-transform duration-500 ease-in-out hover:scale-110 hover:-rotate-6 cursor-pointer"
|
|
/>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
jsonData: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ✨ Animasi Fade-in Konten */
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.animate-fade-in {
|
|
animation: fade-in 0.8s ease-out forwards;
|
|
}
|
|
.delay-100 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
.delay-200 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
/* 🌀 Animasi Minion Kiri Melambai */
|
|
@keyframes wave {
|
|
0%, 100% {
|
|
transform: rotate(3deg);
|
|
}
|
|
50% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
}
|
|
.animate-wave {
|
|
animation: wave 3s ease-in-out infinite;
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
/* 🪩 Animasi Minion Kanan Loncat Pelan */
|
|
@keyframes bounce-slow {
|
|
0%, 100% {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px) scale(1.02);
|
|
}
|
|
}
|
|
.animate-bounce-slow {
|
|
animation: bounce-slow 4s ease-in-out infinite;
|
|
}
|
|
</style>
|