[index] khitan basic

proyek-frontend/app/components/undangan/undangan-khitan-basic.vue

@@ -1,26 +1,60 @@
 <template>
     <div
-      class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 relative overflow-hidden"
+      class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
     >
+      <!-- ================= BACKGROUND ELEMENTS ================= -->
+      <!-- Bintang berkedip -->
+      <div class="absolute inset-0">
+        <div
+          v-for="(star, index) in stars"
+          :key="index"
+          class="absolute rounded-full bg-white animate-twinkle"
+          :class="star.class"
+          :style="{
+            top: star.top + '%',
+            left: star.left + '%',
+            width: star.size + 'px',
+            height: star.size + 'px',
+            animationDelay: star.delay + 's',
+            opacity: star.opacity
+          }"
+        ></div>
+      </div>
+  
+      <!-- Bulan -->
+      <div class="absolute top-8 right-8 w-24 h-24">
+        <div class="absolute inset-0 bg-yellow-100 rounded-full shadow-lg shadow-yellow-200/50"></div>
+        <div class="absolute top-4 left-6 w-8 h-8 bg-yellow-50 rounded-full opacity-20"></div>
+        <div class="absolute bottom-6 right-4 w-6 h-6 bg-yellow-50 rounded-full opacity-30"></div>
+        <div class="absolute top-8 left-8 w-4 h-4 bg-yellow-50 rounded-full opacity-40"></div>
+      </div>
+  
+      <!-- Awan dekoratif -->
+      <div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
+      <div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
+  
       <!-- ================= NAVIGATION ================= -->
       <nav
         v-if="currentSection !== 'landing'"
-        class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20"
+        class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20"
       >
         <ul
-          class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800"
+          class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white"
         >
-          <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
+          <li><button @click="switchSection('introduction')" :class="navClass('introduction')">🌙 Intro</button></li>
-          <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
+          <li><button @click="switchSection('event')" :class="navClass('event')">⭐ Event</button></li>
-          <li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
+          <li><button @click="switchSection('gallery')" :class="navClass('gallery')">✨ Gallery</button></li>
-          <li><button @click="switchSection('say')" :class="navClass('say')">Guest Book</button></li>
+          <li><button @click="switchSection('say')" :class="navClass('say')">💫 Ucapan</button></li>
-          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
+          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">🌟 Terima Kasih</button></li>
         </ul>
       </nav>
   
       <!-- ================= MUSIK CONTROL ================= -->
-      <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
+      <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
-        <button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
+        <button 
+          @click="toggleMusic" 
+          class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300"
+        >
           {{ isPlaying ? '⏸️' : '▶️' }}
         </button>
         <audio ref="audioPlayer" :src="musicUrl" loop></audio>
@@ -31,7 +65,7 @@
         class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
       >
         <!-- Landing Page -->
-        <KhitanA
+        <KhitanALanding
           v-if="currentSection === 'landing'"
           :childName="formData.nama_panggilan"
           :guestName="data.nama_tamu"
@@ -39,38 +73,42 @@
         />
   
         <!-- Introduction -->
-        <KhitanIntroductionBasic
+        <KhitanIntroduction
           v-if="currentSection === 'introduction'"
           :form="formData"
+          @next="switchSection('event')"
         />
   
         <!-- Event -->
-        <KhitanEventBasic
+        <KhitanEvent
           v-if="currentSection === 'event'"
           :hari_tanggal_acara="formData.hari_tanggal_acara"
           :waktu="formData.waktu"
           :alamat="formData.alamat"
           :link_gmaps="formData.link_gmaps"
           :hitung_mundur="formData.hitung_mundur"
+          @next="switchSection('gallery')"
         />
   
         <!-- Gallery -->
-        <KhitanGalleryBasic
+        <KhitanGallery
           v-if="currentSection === 'gallery'"
           :images="galleryImages"
+          @next="switchSection('say')"
         />
   
         <!-- Guest Book -->
-        <KhitanSayBasic
+        <KhitanSay
           v-if="currentSection === 'say'"
           :guestName="data.nama_tamu"
           :saySomething="formData.say_something"
           :messages="messages"
           @addMessage="addMessage"
+          @next="switchSection('thanks')"
         />
   
         <!-- Thank You -->
-        <KhitanThankYouBasic
+        <KhitanThankYou
           v-if="currentSection === 'thanks'"
           :childName="formData.nama_panggilan"
           :jsonData="formData"
@@ -80,16 +118,16 @@
   </template>
   
   <script setup>
-  import { ref, computed } from 'vue'
+  import { ref, computed, onMounted } from 'vue'
   import { useRuntimeConfig } from '#app'
   
   // ================== IMPORT KOMPONEN ==================
-  import KhitanA from '~/components/templates/KhitanBasic/KhitanA.vue'
+  import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
-  import KhitanIntroductionBasic from '~/components/templates/KhitanBasic/Introduction.vue'
+  import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
-  import KhitanEventBasic from '~/components/templates/KhitanBasic/Event.vue'
+  import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
-  import KhitanGalleryBasic from '~/components/templates/KhitanBasic/Gallery.vue'
+  import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
-  import KhitanSayBasic from '~/components/templates/KhitanBasic/GuestBook.vue'
+  import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
-  import KhitanThankYouBasic from '~/components/templates/KhitanBasic/ThankYou.vue'
+  import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
   
   // ================== PROPS ==================
   const props = defineProps({
@@ -118,6 +156,26 @@
   const currentSection = ref('landing')
   const switchSection = (s) => (currentSection.value = s)
   
+  // ================== BINTANG ANIMASI ==================
+  const stars = ref([])
+  
+  const generateStars = () => {
+    const starCount = 50
+    const newStars = []
+    
+    for (let i = 0; i < starCount; i++) {
+      newStars.push({
+        top: Math.random() * 100,
+        left: Math.random() * 100,
+        size: Math.random() * 3 + 1,
+        delay: Math.random() * 5,
+        opacity: Math.random() * 0.7 + 0.3,
+        class: `star-${i % 3}`
+      })
+    }
+    stars.value = newStars
+  }
+  
   // ================== MUSIK ==================
   const audioPlayer = ref(null)
   const isPlaying = ref(false)
@@ -142,13 +200,54 @@
   // ================== STYLE NAV ==================
   const navClass = (s) =>
     currentSection.value === s
-      ? 'text-blue-800 underline'
+      ? 'text-yellow-300 glow'
-      : 'hover:text-blue-700'
+      : 'hover:text-yellow-200 transition-colors duration-300'
+  
+  // ================== LIFECYCLE ==================
+  onMounted(() => {
+    generateStars()
+  })
   </script>
   
   <style scoped>
+  /* Animasi bintang berkedip */
+  @keyframes twinkle {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.1); }
+  }
+  
+  .animate-twinkle {
+    animation: twinkle 3s ease-in-out infinite;
+  }
+  
+  /* Efek glow untuk navigasi aktif */
+  .glow {
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
+                 0 0 20px rgba(255, 255, 255, 0.6),
+                 0 0 30px rgba(255, 255, 255, 0.4);
+  }
+  
+  /* Transisi halus untuk konten utama */
   main {
     transition: all 0.7s ease-in-out;
   }
-  </style>
+  
-  
+  /* Scrollbar custom */
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  </style>