142 lines
3.6 KiB
Vue
142 lines
3.6 KiB
Vue
<template>
|
||
<!-- 🌌 Latar belakang fullscreen -->
|
||
<section
|
||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
|
||
>
|
||
<!-- 🌟 Bintang Berkedip -->
|
||
<div class="absolute inset-0 overflow-hidden z-0">
|
||
<div
|
||
v-for="(star, i) in stars"
|
||
:key="i"
|
||
class="absolute bg-white rounded-full animate-twinkle"
|
||
:style="{
|
||
top: star.top + '%',
|
||
left: star.left + '%',
|
||
width: star.size + 'px',
|
||
height: star.size + 'px',
|
||
animationDelay: star.delay + 's',
|
||
opacity: star.opacity
|
||
}"
|
||
></div>
|
||
</div>
|
||
|
||
<!-- 🌈 Cahaya Aurora -->
|
||
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
|
||
|
||
<!-- ✨ Cahaya lembut di tengah -->
|
||
<div class="absolute w-[500px] h-[500px] bg-yellow-200/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||
|
||
<!-- 💖 Isi konten -->
|
||
<div class="relative z-10 max-w-2xl mx-auto space-y-6 animate-fade-in">
|
||
<h2 class="text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)]">
|
||
Terima Kasih 💖
|
||
</h2>
|
||
|
||
<p class="text-blue-100 leading-relaxed text-base sm:text-lg">
|
||
Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara
|
||
khitanan <br />
|
||
<span class="text-yellow-300 font-bold text-xl sm:text-2xl">{{ childName }}</span>.
|
||
</p>
|
||
|
||
<!-- 💳 Rekening -->
|
||
<div
|
||
v-if="jsonData.rekening_1"
|
||
class="bg-white/10 border border-white/20 backdrop-blur-md rounded-2xl p-5 sm:p-6 max-w-md mx-auto shadow-[0_0_30px_rgba(255,255,255,0.1)]"
|
||
>
|
||
<p class="font-semibold text-yellow-300 text-lg">💳 Rekening Hadiah</p>
|
||
<p class="text-blue-100 mt-1">{{ jsonData.rekening_1 }}</p>
|
||
</div>
|
||
|
||
<p class="text-blue-200 italic mt-8 animate-fade-in-slow">
|
||
Wassalamu’alaikum Wr. Wb.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 💫 Ornamen bawah -->
|
||
<div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/20 to-transparent"></div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
defineProps({
|
||
childName: String,
|
||
jsonData: Object
|
||
})
|
||
|
||
// 🌟 Bintang acak
|
||
const stars = ref([])
|
||
|
||
const generateStars = () => {
|
||
const count = 60
|
||
const temp = []
|
||
for (let i = 0; i < count; i++) {
|
||
temp.push({
|
||
top: Math.random() * 100,
|
||
left: Math.random() * 100,
|
||
size: Math.random() * 2 + 1,
|
||
delay: Math.random() * 5,
|
||
opacity: Math.random() * 0.8 + 0.2
|
||
})
|
||
}
|
||
stars.value = temp
|
||
}
|
||
|
||
onMounted(() => generateStars())
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 🌟 Animasi bintang berkedip */
|
||
@keyframes twinkle {
|
||
0%, 100% {
|
||
opacity: 0.3;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.3);
|
||
}
|
||
}
|
||
.animate-twinkle {
|
||
animation: twinkle 3.5s ease-in-out infinite;
|
||
}
|
||
|
||
/* ✨ Fade-in lembut */
|
||
@keyframes fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(25px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
.animate-fade-in {
|
||
animation: fade-in 1.2s ease-out;
|
||
}
|
||
|
||
/* ✨ Fade-in slow untuk teks terakhir */
|
||
@keyframes fade-in-slow {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.animate-fade-in-slow {
|
||
animation: fade-in-slow 1.8s ease-out;
|
||
}
|
||
|
||
/* 📱 Responsif */
|
||
@media (max-width: 640px) {
|
||
h2 {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
</style>
|