98 lines
2.8 KiB
Vue
98 lines
2.8 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 dengan background masjid diperbesar -->
|
|
<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 z-10 bg-[url('/masjid.png')] bg-no-repeat bg-top bg-[length:120%_auto]"
|
|
>
|
|
<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>
|
|
|
|
<!-- Ornamen kanan & kiri DI LUAR CONTAINER -->
|
|
<img
|
|
src="/bagoyang.png"
|
|
alt="Ornamen kiri"
|
|
class="fixed top-[-44px] left-4 sm:left-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top pointer-events-none"
|
|
/>
|
|
|
|
<img
|
|
src="/bagoyang.png"
|
|
alt="Ornamen kanan"
|
|
class="fixed top-[-44px] right-4 sm:right-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top scale-x-[-1] pointer-events-none"
|
|
/>
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
guestName: String
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes swing {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: rotate(4deg);
|
|
}
|
|
50% {
|
|
transform: rotate(0deg);
|
|
}
|
|
75% {
|
|
transform: rotate(-4deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.animate-swing {
|
|
animation: swing 4.5s ease-in-out infinite;
|
|
transform-origin: top center;
|
|
}
|
|
</style>
|