32 lines
1.5 KiB
Vue
32 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4"
|
|
>
|
|
<!-- Animated elements -->
|
|
<div class="absolute top-10 left-10 animate-bounce">🎈</div>
|
|
<div class="absolute top-10 right-10 animate-bounce delay-100">🎁</div>
|
|
<div class="absolute bottom-20 left-20 animate-bounce delay-200">🍰</div>
|
|
<div class="absolute bottom-20 right-20 animate-bounce delay-300">🎉</div>
|
|
|
|
<div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-yellow-200 max-w-md transform hover:scale-105 transition-transform duration-500">
|
|
<h1 class="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent">
|
|
🎂 Undangan Ulang Tahun 🎂
|
|
</h1>
|
|
<p class="text-lg mb-4">Hai <span class="font-semibold text-orange-600">{{ guestName }}</span>!</p>
|
|
<p class="text-lg mb-6">Yuk, datang ke acara ulang tahun <span class="font-bold text-orange-500">{{ childName }}</span>!</p>
|
|
<button
|
|
@click="$emit('open-invitation')"
|
|
class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl"
|
|
>
|
|
Buka Undangan 🎊
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
guestName: String,
|
|
})
|
|
</script> |