47 lines
1.6 KiB
Vue
47 lines
1.6 KiB
Vue
<template>
|
|
<div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 to-blue-200 text-center relative overflow-hidden">
|
|
<!-- Background Ornaments -->
|
|
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_left,_white,_transparent_70%)]"></div>
|
|
|
|
<!-- Title -->
|
|
<div class="z-10 space-y-4 animate-fade-in-down">
|
|
<h1 class="text-blue-700 text-3xl md:text-5xl font-bold">Undangan Tasyakuran Khitan</h1>
|
|
<h2 class="text-gray-700 text-2xl md:text-4xl font-semibold">{{ childName }}</h2>
|
|
</div>
|
|
|
|
<!-- Guest -->
|
|
<div class="z-10 mt-10 bg-white/60 backdrop-blur-sm rounded-xl p-5 shadow-md animate-fade-in-up">
|
|
<p class="text-gray-600 text-sm mb-1">Kepada Yth.</p>
|
|
<p class="text-blue-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<button
|
|
@click="$emit('next-page')"
|
|
class="z-10 mt-12 px-8 py-3 bg-blue-600 text-white font-semibold rounded-full shadow-md hover:bg-blue-700 transition duration-300"
|
|
>
|
|
Buka Undangan
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
guestName: String
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes fadeInDown {
|
|
from { opacity: 0; transform: translateY(-20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out; }
|
|
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
|
|
</style>
|