Undangan/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue
2025-10-20 15:29:12 +07:00

38 lines
1.6 KiB
Vue

<template>
<div class="flex flex-col items-center justify-center text-center p-6 space-y-8 max-w-2xl mx-auto">
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent">
Terima Kasih! 🙏
</h2>
<div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 space-y-6">
<p class="text-lg text-gray-700">Sudah meluangkan waktu untuk melihat undangan ulang tahunku 💛</p>
<p class="text-xl font-semibold text-gray-800">
Salam hangat dari <span class="bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent font-bold">{{ childName }}</span>
</p>
<div v-if="jsonData?.pesan_terimakasih" class="bg-gradient-to-r from-yellow-100 to-orange-100 p-6 rounded-xl border-l-4 border-orange-400">
<p class="italic text-gray-600 text-lg">"{{ jsonData.pesan_terimakasih }}"</p>
</div>
<div v-if="jsonData?.rekening" class="bg-gradient-to-r from-green-100 to-emerald-100 p-6 rounded-xl border-l-4 border-green-400">
<p class="text-gray-700 mb-2">🎁 Kirim hadiah ke rekening:</p>
<p class="font-bold text-green-600 text-lg">{{ jsonData.rekening }}</p>
</div>
</div>
<div class="flex space-x-4 mt-6">
<div class="animate-bounce">🎈</div>
<div class="animate-bounce delay-100">🎁</div>
<div class="animate-bounce delay-200">🍰</div>
<div class="animate-bounce delay-300">🎉</div>
</div>
</div>
</template>
<script setup>
defineProps({
childName: String,
jsonData: Object
})
</script>