Undangan/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue

<template>
  <!-- 🌄 Latar Belakang Fullscreen -->
  <section
    class="fixed inset-0 w-screen h-screen flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
  >
    <!-- 🌟 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>

    <!-- 🕌 Foto Masjid (nempel pojok kanan bawah di semua layar) -->
    <img
      src="/masjid.png"
      alt="Masjid"
      class="absolute bottom-[-23px] right-0 
      w-[200px] sm:w-[300px] md:w-[450px] lg:w-[600px]
      opacity-70 pointer-events-none select-none 
      drop-shadow-[0_0_40px_rgba(255,255,255,0.15)] animate-float z-0"
    />

    <!-- 🌟 Cahaya Tengah -->
    <div
      class="absolute w-[400px] sm:w-[500px] md:w-[600px] h-[400px] sm:h-[500px] md:h-[600px] bg-blue-400/25 blur-[150px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
    ></div>

    <!-- 💫 Bingkai Isi Undangan -->
    <div
      class="relative z-10 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl p-5 sm:p-8 md:p-10 max-w-sm sm:max-w-md md:max-w-2xl space-y-4 sm:space-y-5"
    >
      <h2
        class="text-2xl sm:text-3xl md:text-4xl font-bold text-yellow-300 drop-shadow-md leading-snug"
      >
        Assalamu’alaikum Wr. Wb.
      </h2>

      <p class="text-blue-100 text-sm sm:text-base leading-relaxed">
        Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang
        Bapak/Ibu/Saudara/i untuk menghadiri acara khitanan putra kami:
      </p>

      <h3
        class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white drop-shadow-[0_0_20px_rgba(255,255,255,0.4)] mt-3 sm:mt-4"
      >
        {{ form.nama_lengkap }}
      </h3>

      <p class="text-base sm:text-lg text-blue-200 italic">
        ({{ form.nama_panggilan }})
      </p>

      <div class="mt-4 sm:mt-6 text-blue-100 text-sm sm:text-base">
        <p>
          Putra dari pasangan
          <span class="font-semibold text-yellow-300">{{
            form.nama_bapak
          }}</span>
          &
          <span class="font-semibold text-yellow-300">{{
            form.nama_ibu
          }}</span>
        </p>
      </div>

      <button
        class="mt-6 sm:mt-8 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-6 sm:px-8 py-2.5 sm:py-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105"
        @click="$emit('next')"
      >
        Lanjut ke Acara →
      </button>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
defineProps({ form: Object })

// 🌟 Generate bintang acak
const stars = ref([])

const generateStars = () => {
  const count = 70
  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>
/* ✨ Efek Fade-In */
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
section {
  animation: fadein 1.2s ease-out;
}

/* 🌟 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;
}

/* 🕌 Animasi Masjid Floating */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* 📱 Responsif Tambahan */
@media (max-width: 640px) {
  img[alt='Masjid'] {
    opacity: 0.45;
    width: 300px;
    bottom: -15px;
    right: 0;
  }
}
</style>