Undangan/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.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-[600px] h-[600px] bg-yellow-200/10 blur-[250px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>

    <!-- 🕌 Gambar pojok kiri BESAR -->
    <img
      src="/kiri.png"
      alt="Dekorasi Kiri"
      class="absolute bottom-[-60px] left-[-80px]
      w-[500px] sm:w-[650px] md:w-[800px] lg:w-[900px]
      opacity-75 drop-shadow-[0_0_50px_rgba(255,255,255,0.2)]
      pointer-events-none select-none animate-float-slow
      blur-[0.5px]"
    />

    <!-- 💖 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;
}

/* 🌙 Gambar mengambang lembut */
@keyframes float-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.animate-float-slow {
  animation: float-slow 6s 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) {
  img[alt="Dekorasi Kiri"] {
    bottom: -40px;
    left: -60px;
    width: 400px;
    opacity: 0.8;
  }

  h2 {
    font-size: 2rem;
  }
}
</style>