74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<template>
|
|
<section
|
|
class="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-white via-blue-50 to-blue-100 text-gray-800 px-6 py-12 overflow-hidden"
|
|
>
|
|
<!-- Background pattern lembut -->
|
|
<div
|
|
class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(147,197,253,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(191,219,254,0.3),transparent_50%)]"
|
|
></div>
|
|
|
|
<!-- Kartu utama -->
|
|
<div
|
|
class="relative bg-white/90 backdrop-blur-sm shadow-xl rounded-3xl p-8 sm:p-12 max-w-2xl text-center border border-blue-100"
|
|
>
|
|
<p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium">
|
|
Undangan Khitan
|
|
</p>
|
|
|
|
<h1
|
|
class="text-4xl sm:text-5xl font-extrabold text-blue-700 font-serif mb-4 tracking-tight"
|
|
>
|
|
{{ childName }}
|
|
</h1>
|
|
|
|
<p class="text-gray-600 text-base mb-6 leading-relaxed">
|
|
Dengan penuh rasa syukur kepada Allah SWT, kami bermaksud mengundang
|
|
Bapak/Ibu/Saudara/i untuk hadir dalam acara khitanan putra kami.
|
|
</p>
|
|
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl py-4 px-6 mb-6">
|
|
<p class="text-blue-800 font-medium">
|
|
Kepada Yth. <span class="font-semibold">{{ guestName || 'Tamu Undangan' }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tombol menuju halaman berikut -->
|
|
<button
|
|
@click="$emit('next-page')"
|
|
class="inline-flex items-center justify-center bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-md hover:bg-blue-700 transition-all duration-300"
|
|
>
|
|
Buka Undangan
|
|
<span class="ml-2">📩</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Ornamen lembut di bawah -->
|
|
<div
|
|
class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-blue-200/50 to-transparent rounded-t-[100px]"
|
|
></div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
guestName: String
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
section {
|
|
animation: fadeIn 1.2s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|