From bd176aad5c7dd456668e6c469e3ddb2deee9f668 Mon Sep 17 00:00:00 2001
From: ariefabbauftech-ai <arief.abbauftech@gmail.com>
Date: Tue, 21 Oct 2025 11:00:23 +0700
Subject: [PATCH 1/2] [Khitan] Starter

---
 .../templates/KhitanStarter/Event.vue         |  29 ++++
 .../templates/KhitanStarter/Gallery.vue       |  28 ++++
 .../templates/KhitanStarter/Introduction.vue  |  25 ++++
 .../templates/KhitanStarter/KhitanA.vue       |  46 ++++++
 .../templates/KhitanStarter/ThankYou.vue      |  24 ++++
 .../templates/UltahStarter/GuestBook.vue      |  51 -------
 .../undangan/undangan-khitan-starter.vue      | 134 ++++++++++++++++++
 .../undangan/undangan-ulang-tahun-starter.vue |   1 -
 proyek-frontend/app/pages/p/[code].vue        |   3 +-
 proyek-frontend/app/pages/preview/[id].vue    |   3 +-
 10 files changed, 290 insertions(+), 54 deletions(-)
 create mode 100644 proyek-frontend/app/components/templates/KhitanStarter/Event.vue
 create mode 100644 proyek-frontend/app/components/templates/KhitanStarter/Gallery.vue
 create mode 100644 proyek-frontend/app/components/templates/KhitanStarter/Introduction.vue
 create mode 100644 proyek-frontend/app/components/templates/KhitanStarter/KhitanA.vue
 create mode 100644 proyek-frontend/app/components/templates/KhitanStarter/ThankYou.vue
 delete mode 100644 proyek-frontend/app/components/templates/UltahStarter/GuestBook.vue

diff --git a/proyek-frontend/app/components/templates/KhitanStarter/Event.vue b/proyek-frontend/app/components/templates/KhitanStarter/Event.vue
new file mode 100644
index 0000000..60a3559
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/Event.vue
@@ -0,0 +1,29 @@
+<template>
+  <section class="min-h-screen flex flex-col items-center justify-center bg-blue-50 text-center px-6">
+    <div class="max-w-2xl bg-white rounded-2xl shadow-lg p-8 space-y-4">
+      <h2 class="text-2xl font-bold text-blue-700 mb-4">📅 Acara Tasyakuran</h2>
+
+      <p><strong>Hari & Tanggal:</strong> {{ hari_tanggal_acara }}</p>
+      <p><strong>Waktu:</strong> {{ waktu }}</p>
+      <p><strong>Alamat:</strong> {{ alamat }}</p>
+
+      <a
+        v-if="link_gmaps"
+        :href="link_gmaps"
+        target="_blank"
+        class="inline-block mt-4 text-blue-600 font-semibold underline hover:text-blue-800"
+      >
+        Lihat di Google Maps
+      </a>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  hari_tanggal_acara: String,
+  waktu: String,
+  alamat: String,
+  link_gmaps: String
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/Gallery.vue b/proyek-frontend/app/components/templates/KhitanStarter/Gallery.vue
new file mode 100644
index 0000000..44ee306
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/Gallery.vue
@@ -0,0 +1,28 @@
+<template>
+  <section class="min-h-screen bg-white py-12 px-6">
+    <div class="text-center mb-10">
+      <h2 class="text-3xl font-bold text-blue-700">Galeri</h2>
+      <p class="text-gray-600">Momen istimewa kami</p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-3xl mx-auto">
+      <div
+        v-for="(img, index) in images"
+        :key="index"
+        class="overflow-hidden rounded-2xl shadow-md"
+      >
+        <img
+          :src="img"
+          alt="Foto Galeri"
+          class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  images: { type: Array, default: () => [] }
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/Introduction.vue b/proyek-frontend/app/components/templates/KhitanStarter/Introduction.vue
new file mode 100644
index 0000000..4ba2251
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/Introduction.vue
@@ -0,0 +1,25 @@
+<template>
+  <section class="min-h-screen flex flex-col justify-center items-center bg-white px-6 text-center">
+    <div class="max-w-2xl space-y-6">
+      <h2 class="text-3xl font-bold text-blue-700 mb-4">Assalamu’alaikum Warahmatullahi Wabarakatuh</h2>
+      <p class="text-gray-700 leading-relaxed">
+        Dengan penuh rasa syukur ke hadirat Allah SWT, kami bermaksud mengadakan
+        acara tasyakuran khitan putra kami:
+      </p>
+
+      <h3 class="text-4xl text-blue-800 font-bold mt-6">{{ nama_lengkap }}</h3>
+
+      <p class="text-gray-700 mt-6">
+        Putra dari pasangan <strong>{{ nama_bapak }}</strong> dan <strong>{{ nama_ibu }}</strong>.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  nama_lengkap: String,
+  nama_bapak: String,
+  nama_ibu: String
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/KhitanA.vue b/proyek-frontend/app/components/templates/KhitanStarter/KhitanA.vue
new file mode 100644
index 0000000..c5380dd
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/KhitanA.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 to-blue-200 text-center relative overflow-hidden">
+    <!-- Background Ornaments -->
+    <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_left,_white,_transparent_70%)]"></div>
+
+    <!-- Title -->
+    <div class="z-10 space-y-4 animate-fade-in-down">
+      <h1 class="text-blue-700 text-3xl md:text-5xl font-bold">Undangan Tasyakuran Khitan</h1>
+      <h2 class="text-gray-700 text-2xl md:text-4xl font-semibold">{{ childName }}</h2>
+    </div>
+
+    <!-- Guest -->
+    <div class="z-10 mt-10 bg-white/60 backdrop-blur-sm rounded-xl p-5 shadow-md animate-fade-in-up">
+      <p class="text-gray-600 text-sm mb-1">Kepada Yth.</p>
+      <p class="text-blue-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p>
+    </div>
+
+    <!-- Button -->
+    <button
+      @click="$emit('next-page')"
+      class="z-10 mt-12 px-8 py-3 bg-blue-600 text-white font-semibold rounded-full shadow-md hover:bg-blue-700 transition duration-300"
+    >
+      Buka Undangan
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  guestName: String
+})
+</script>
+
+<style scoped>
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in-down { animation: fadeInDown 0.8s ease-out; }
+.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/ThankYou.vue b/proyek-frontend/app/components/templates/KhitanStarter/ThankYou.vue
new file mode 100644
index 0000000..11f6d02
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/ThankYou.vue
@@ -0,0 +1,24 @@
+<template>
+  <section class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-100 to-blue-300 text-center px-6">
+    <div class="max-w-xl space-y-6">
+      <h2 class="text-3xl font-bold text-blue-700">Terima Kasih</h2>
+      <p class="text-gray-700 leading-relaxed">
+        Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara kami.
+        Semoga mendapatkan keberkahan dan kebahagiaan selalu.
+      </p>
+
+      <p class="text-xl font-semibold text-blue-800 mt-4">
+        {{ childName }}
+      </p>
+
+      <p class="text-gray-600">Beserta keluarga</p>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  jsonData: Object
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/UltahStarter/GuestBook.vue b/proyek-frontend/app/components/templates/UltahStarter/GuestBook.vue
deleted file mode 100644
index 1318c52..0000000
--- a/proyek-frontend/app/components/templates/UltahStarter/GuestBook.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div class="min-h-screen bg-gradient-to-br from-yellow-200 to-orange-200 py-10 px-6 text-center">
-    <h2 class="text-3xl font-bold text-orange-700 mb-6">📖 Buku Tamu</h2>
-
-    <p class="mb-4">Tinggalkan ucapan terbaikmu untuk {{ guestName || 'Teman Kami' }} 💌</p>
-
-    <form @submit.prevent="submitMessage" class="max-w-md mx-auto bg-white p-6 rounded-2xl shadow-md">
-      <textarea
-        v-model="message"
-        rows="3"
-        placeholder="Tulis ucapan di sini..."
-        class="w-full border rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-orange-400"
-      ></textarea>
-
-      <button
-        type="submit"
-        class="mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
-      >
-        Kirim
-      </button>
-    </form>
-
-    <div v-if="messages.length" class="mt-8 max-w-md mx-auto text-left">
-      <h3 class="text-lg font-semibold text-gray-700 mb-3">Ucapan:</h3>
-      <ul class="space-y-3">
-        <li v-for="(msg, i) in messages" :key="i" class="bg-white p-4 rounded-lg shadow">
-          {{ msg }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  guestName: String,
-  messages: Array
-})
-
-const emit = defineEmits(['addMessage'])
-const message = ref('')
-
-const submitMessage = () => {
-  if (message.value.trim()) {
-    emit('addMessage', message.value)
-    message.value = ''
-  }
-}
-</script>
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue b/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue
index e69de29..3668166 100644
--- a/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue
+++ b/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue
@@ -0,0 +1,134 @@
+<template>
+    <div
+      class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 relative overflow-hidden"
+    >
+      <!-- ================= NAVIGATION ================= -->
+      <nav
+        v-if="currentSection !== 'landing'"
+        class="absolute top-4 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"
+        >
+          <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('gallery')" :class="navClass('gallery')">Gallery</button></li>
+          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
+        </ul>
+      </nav>
+  
+      <!-- ================= MUSIK CONTROL ================= -->
+      <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
+        <button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
+          {{ isPlaying ? '⏸️' : '▶️' }}
+        </button>
+        <audio ref="audioPlayer" :src="musicUrl" loop></audio>
+      </div>
+  
+      <!-- ================= MAIN CONTENT ================= -->
+      <main
+        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
+      >
+        <!-- Landing Page -->
+        <KhitanAStarter
+          v-if="currentSection === 'landing'"
+          :childName="formData.nama_lengkap"
+          :guestName="data.nama_tamu"
+          @next-page="switchSection('introduction')"
+        />
+  
+        <!-- Introduction -->
+        <KhitanIntroductionStarter
+          v-if="currentSection === 'introduction'"
+          :nama_lengkap="formData.nama_lengkap"
+          :nama_bapak="formData.nama_bapak"
+          :nama_ibu="formData.nama_ibu"
+        />
+  
+        <!-- Event -->
+        <KhitanEventStarter
+          v-if="currentSection === 'event'"
+          :hari_tanggal_acara="formData.hari_tanggal_acara"
+          :waktu="formData.waktu"
+          :alamat="formData.alamat"
+        />
+  
+        <!-- Gallery -->
+        <KhitanGalleryStarter
+          v-if="currentSection === 'gallery'"
+          :images="galleryImages"
+        />
+  
+        <!-- Thank You -->
+        <KhitanThankYouStarter
+          v-if="currentSection === 'thanks'"
+          :childName="formData.nama_lengkap"
+          :jsonData="formData"
+        />
+      </main>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed } from 'vue'
+  import { useRuntimeConfig } from '#app'
+  
+  // ================== IMPORT KOMPONEN ==================
+  import KhitanAStarter from '~/components/templates/KhitanStarter/KhitanA.vue'
+  import KhitanIntroductionStarter from '~/components/templates/KhitanStarter/Introduction.vue'
+  import KhitanEventStarter from '~/components/templates/KhitanStarter/Event.vue'
+  import KhitanGalleryStarter from '~/components/templates/KhitanStarter/Gallery.vue'
+  import KhitanThankYouStarter from '~/components/templates/KhitanStarter/ThankYou.vue'
+  
+  // ================== PROPS ==================
+  const props = defineProps({
+    data: { type: Object, required: true }
+  })
+  
+  // ================== BACKEND CONFIG ==================
+  const config = useRuntimeConfig()
+  const backendUrl = config.public.apiBaseUrl
+  
+  // ================== FORM DATA ==================
+  const formData = computed(() => props.data.form || {})
+  
+  // ================== GALERI ==================
+  const galleryImages = computed(() => {
+    const f = formData.value
+    return [f.foto_1, f.foto_2].filter(Boolean).map(img => `${backendUrl}/${img}`)
+  })
+  
+  // ================== NAVIGASI SECTION ==================
+  const currentSection = ref('landing')
+  const switchSection = (s) => (currentSection.value = s)
+  
+  // ================== MUSIK ==================
+  const audioPlayer = ref(null)
+  const isPlaying = ref(false)
+  const musicUrl = computed(() =>
+    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
+  )
+  
+  const toggleMusic = () => {
+    if (!audioPlayer.value) return
+    if (isPlaying.value) {
+      audioPlayer.value.pause()
+    } else {
+      audioPlayer.value.play()
+    }
+    isPlaying.value = !isPlaying.value
+  }
+  
+  // ================== STYLE NAV ==================
+  const navClass = (s) =>
+    currentSection.value === s
+      ? 'text-blue-800 underline'
+      : 'hover:text-blue-700'
+  </script>
+  
+  <style scoped>
+  main {
+    transition: all 0.7s ease-in-out;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
index efbecd4..da514ae 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
@@ -103,7 +103,6 @@
 import Introduction from '~/components/templates/UltahStarter/Introduction.vue'
 import Event from '~/components/templates/UltahStarter/Event.vue'
 import Gallery from '~/components/templates/UltahStarter/Gallery.vue'
-import GuestBook from '~/components/templates/UltahStarter/GuestBook.vue'
 import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue'
 
   
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
index 9cb17ca..875ddd9 100644
--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -108,7 +108,8 @@ const componentMap = {
   'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
   'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
   'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
-  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
+  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue')),
+  'undangan-khitan-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-starter.vue'))
   // Add more mappings as templates are developed
 }
 
diff --git a/proyek-frontend/app/pages/preview/[id].vue b/proyek-frontend/app/pages/preview/[id].vue
index fc60aea..94f7a37 100644
--- a/proyek-frontend/app/pages/preview/[id].vue
+++ b/proyek-frontend/app/pages/preview/[id].vue
@@ -281,7 +281,8 @@ const componentMap = {
   'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
   'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
   'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
-  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
+  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue')),
+  'undangan-khitan-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-starter.vue'))
   // Add more mappings as templates are developed
 }
 

From ae54584440a3b18609af3fa4806315cf2d4d5f82 Mon Sep 17 00:00:00 2001
From: ariefabbauftech-ai <arief.abbauftech@gmail.com>
Date: Tue, 21 Oct 2025 14:10:51 +0700
Subject: [PATCH 2/2] [index] khitan basic

---
 .../undangan/undangan-khitan-basic.vue        | 153 ++++++++++++++----
 1 file changed, 126 insertions(+), 27 deletions(-)

diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue b/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
index cbe9093..2b0b7ed 100644
--- a/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
+++ b/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('event')" :class="navClass('event')">Event</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('thanks')" :class="navClass('thanks')">Thanks</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('gallery')" :class="navClass('gallery')">✨ Gallery</button></li>
+          <li><button @click="switchSection('say')" :class="navClass('say')">💫 Ucapan</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'">
-        <button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
+      <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
+        <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 KhitanIntroductionBasic from '~/components/templates/KhitanBasic/Introduction.vue'
-  import KhitanEventBasic from '~/components/templates/KhitanBasic/Event.vue'
-  import KhitanGalleryBasic from '~/components/templates/KhitanBasic/Gallery.vue'
-  import KhitanSayBasic from '~/components/templates/KhitanBasic/GuestBook.vue'
-  import KhitanThankYouBasic from '~/components/templates/KhitanBasic/ThankYou.vue'
+  import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
+  import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
+  import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
+  import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
+  import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.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'
-      : 'hover:text-blue-700'
+      ? 'text-yellow-300 glow'
+      : '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>
-  
\ No newline at end of file
+  
+  /* 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>
\ No newline at end of file