69 lines
1.8 KiB
Vue
69 lines
1.8 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"
|
|
>
|
|
<!-- Background Ornamen -->
|
|
<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>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
jsonData: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@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;
|
|
}
|
|
</style>
|