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

<template>
  <section
    class="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden text-center bg-gradient-to-b from-blue-900 via-red-800 to-black text-white animate-fade-in"
  >
    <!-- 🕸️ Background grid lembut -->
    <div class="absolute inset-0 opacity-10 pointer-events-none">
      <div class="absolute top-0 left-1/4 w-0.5 h-full bg-white/30"></div>
      <div class="absolute top-0 left-2/4 w-0.5 h-full bg-white/30"></div>
      <div class="absolute top-0 left-3/4 w-0.5 h-full bg-white/30"></div>
      <div class="absolute top-1/4 left-0 w-full h-0.5 bg-white/30"></div>
      <div class="absolute top-2/4 left-0 w-full h-0.5 bg-white/30"></div>
      <div class="absolute top-3/4 left-0 w-full h-0.5 bg-white/30"></div>
    </div>

    <!-- 🕷️ Laba-laba animasi turun dari atas -->
    <div
      v-for="(spider, index) in spiders"
      :key="index"
      class="absolute text-3xl animate-spider-move"
      :style="{
        left: spider.left,
        animationDelay: spider.delay,
        fontSize: spider.size,
      }"
    >
      🕷️
    </div>


    <!-- ✨ Konten utama -->
    <div class="relative z-10 w-full px-6 max-w-2xl mt-16 md:mt-0 animate-slide-up">
      <!-- Foto Anak -->
      <div class="relative mb-8 flex justify-center">
        <!-- Cahaya latar -->
        <div
          class="absolute w-72 h-72 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-red-500 via-yellow-500 to-blue-600 blur-3xl opacity-60 animate-pulse-slow"
        ></div>

        <!-- Foto anak -->
        <img
          v-if="childPhoto"
          :src="childPhoto"
          alt="Foto Anak"
          class="relative w-56 h-56 md:w-64 md:h-64 rounded-full shadow-2xl object-cover border-4 border-white mx-auto transform hover:scale-105 transition duration-500 z-10"
        />

        <!-- Placeholder jika foto belum ada -->
        <div
          v-else
          class="relative w-56 h-56 md:w-64 md:h-64 rounded-full shadow-2xl bg-gradient-to-br from-red-600 to-blue-600 flex items-center justify-center mx-auto border-4 border-white z-10"
        >
          <span class="text-7xl">🕷️</span>
        </div>
      </div>

      <!-- Nama & Informasi -->
      <h2 class="text-5xl md:text-6xl font-extrabold text-yellow-300 drop-shadow-lg mb-4 tracking-tight">
        {{ childName || 'Spider Kid' }}
      </h2>

      <p class="text-xl md:text-2xl text-blue-200 mb-3 font-semibold">
        Berusia {{ age || '?' }} tahun 🎂
      </p>

      <p class="text-lg md:text-xl text-gray-200 mb-8">
        Putra/Putri dari {{ parentsName || 'Peter Parker & Mary Jane' }}
      </p>

      <!-- Deskripsi -->
      <div class="bg-black/70 backdrop-blur-lg rounded-2xl p-6 border border-red-500/60 shadow-xl mb-8">
        <p class="text-white leading-relaxed text-lg md:text-xl">
          Dengan kekuatan
          <span class="text-red-400 font-bold">Spider-Sense</span>
          yang bergetar, kami mengundang Anda untuk bergabung dalam perayaan ulang tahun ke-
          {{ age || '?' }} petualangan kami!
        </p>
      </div>

      <!-- Info tambahan -->
      <div class="flex flex-wrap gap-4 justify-center animate-bounce-slow">
        <div
          class="bg-red-600/90 text-white px-5 py-3 rounded-full text-base font-medium shadow-lg flex items-center gap-2"
        >
          <span>🕸️</span>
          <span>Anak ke-{{ childOrder || '?' }}</span>
        </div>

        <div
          class="bg-blue-600/90 text-white px-5 py-3 rounded-full text-base font-medium shadow-lg flex items-center gap-2"
        >
          <span>🎭</span>
          <span>{{ age || '?' }} Tahun</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const spiders = ref([])

// 🕷️ Generate posisi dan delay acak
onMounted(() => {
  for (let i = 0; i < 8; i++) {
    spiders.value.push({
      left: `${Math.random() * 90}%`,
      delay: `${i * 1.8}s`,
      size: `${Math.floor(Math.random() * 16) + 20}px`,
    })
  }
})

defineProps({
  age: [String, Number],
  childName: String,
  childOrder: [String, Number],
  parentsName: String,
  childPhoto: String,
})
</script>

<style scoped>
/* ✨ Animasi masuk */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-fade-in {
  animation: fade-in 1.2s ease-out;
}

/* ✨ Konten naik perlahan */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-slide-up {
  animation: slide-up 1.5s ease-out;
}

/* 🕷️ Laba-laba turun dari atas ke bawah */
@keyframes spider-move {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(30deg);
    opacity: 0;
  }
}
.animate-spider-move {
  animation: spider-move 8s linear infinite;
  top: -50px; /* Mulai dari atas layar */
}

/* 🕸️ Spider-Man melayang */
@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(2deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-2deg);
  }
}
.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

/* 🔥 Efek cahaya berdenyut */
@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}
.animate-pulse-slow {
  animation: pulse-slow 5s ease-in-out infinite;
}

/* 🩵 Info tambahan bergerak lembut */
@keyframes bounce-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.animate-bounce-slow {
  animation: bounce-slow 3s ease-in-out infinite;
}

/* 📱 Responsif */
@media (max-width: 768px) {
  img[alt='Spider-Man'] {
    width: 16rem !important;
    right: 0;
    top: 15%;
    opacity: 0.6;
  }
}
</style>