From 83f60371cd6fc00291b1e2076c2ce7e3c8ff9917 Mon Sep 17 00:00:00 2001
From: ariefabbauftech-ai <arief.abbauftech@gmail.com>
Date: Mon, 20 Oct 2025 15:29:12 +0700
Subject: [PATCH] [Update]

---
 .../components/templates/UltahBasic/Event.vue | 134 +++----
 .../templates/UltahBasic/Gallery.vue          |  53 +--
 .../templates/UltahBasic/GuestBook.vue        | 105 +++---
 .../templates/UltahBasic/Introduction.vue     |  51 ++-
 .../templates/UltahBasic/Landing.vue          |  43 ++-
 .../templates/UltahBasic/ThankYou.vue         |  56 +--
 .../undangan/undangan-ulang-tahun-basic.vue   | 332 +++++++++---------
 7 files changed, 430 insertions(+), 344 deletions(-)

diff --git a/proyek-frontend/app/components/templates/UltahBasic/Event.vue b/proyek-frontend/app/components/templates/UltahBasic/Event.vue
index 8a82edb..7af9336 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/Event.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/Event.vue
@@ -1,63 +1,79 @@
 <template>
-    <div class="text-center p-6">
-      <h2 class="text-3xl font-bold text-orange-700 mb-6">🎈 Acara Ulang Tahun 🎈</h2>
-  
-      <div class="bg-white/70 backdrop-blur-md rounded-2xl shadow-lg p-6 inline-block text-gray-700">
-        <p><strong>Hari & Tanggal:</strong> {{ formatDate(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 hover:underline"
-        >
-          📍 Lihat di Google Maps
-        </a>
-      </div>
-  
-      <div v-if="countdownText" class="mt-8 text-xl font-semibold text-orange-700">
-        ⏰ {{ countdownText }}
+  <div class="text-center p-6 max-w-2xl mx-auto">
+    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
+      🎈 Acara Ulang Tahun 🎈
+    </h2>
+
+    <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-yellow-100 transform hover:scale-105 transition-transform duration-300">
+      <div class="space-y-4 text-gray-700 text-lg">
+        <div class="flex items-center justify-center space-x-3">
+          <span class="text-2xl">📅</span>
+          <p><strong class="text-orange-500">Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
+        </div>
+        
+        <div class="flex items-center justify-center space-x-3">
+          <span class="text-2xl">⏰</span>
+          <p><strong class="text-orange-500">Waktu:</strong> {{ waktu }}</p>
+        </div>
+        
+        <div class="flex items-center justify-center space-x-3">
+          <span class="text-2xl">📍</span>
+          <p><strong class="text-orange-500">Alamat:</strong> {{ alamat }}</p>
+        </div>
       </div>
+
+      <a
+        v-if="link_gmaps"
+        :href="link_gmaps"
+        target="_blank"
+        class="inline-flex items-center space-x-2 mt-6 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105"
+      >
+        <span>📍</span>
+        <span>Lihat di Google Maps</span>
+      </a>
     </div>
-  </template>
-  
-  <script setup>
-  import { ref, watchEffect } from 'vue'
-  
-  const props = defineProps({
-    hari_tanggal_acara: String,
-    waktu: String,
-    alamat: String,
-    link_gmaps: String,
-    hitung_mundur: String
-  })
-  
-  const countdownText = ref('')
-  
-  // Format tanggal
-  function formatDate(dateStr) {
-    if (!dateStr) return '-'
-    const date = new Date(dateStr)
-    return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+
+    <div v-if="countdownText" class="mt-8 bg-gradient-to-r from-orange-500 to-yellow-500 text-white p-6 rounded-2xl shadow-lg max-w-md mx-auto">
+      <p class="text-xl font-bold">⏰ {{ countdownText }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watchEffect } from 'vue'
+
+const props = defineProps({
+  hari_tanggal_acara: String,
+  waktu: String,
+  alamat: String,
+  link_gmaps: String,
+  hitung_mundur: String
+})
+
+const countdownText = ref('')
+
+// Format tanggal
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+// Countdown
+watchEffect(() => {
+  if (!props.hitung_mundur) return
+
+  const target = new Date(props.hitung_mundur)
+  const now = new Date()
+  const diff = target - now
+
+  if (diff <= 0) {
+    countdownText.value = 'Acara sedang berlangsung 🎉'
+  } else {
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
+    const minutes = Math.floor((diff / (1000 * 60)) % 60)
+    countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`
   }
-  
-  // Countdown
-  watchEffect(() => {
-    if (!props.hitung_mundur) return
-  
-    const target = new Date(props.hitung_mundur)
-    const now = new Date()
-    const diff = target - now
-  
-    if (diff <= 0) {
-      countdownText.value = 'Acara sedang berlangsung 🎉'
-    } else {
-      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
-      const minutes = Math.floor((diff / (1000 * 60)) % 60)
-      countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`
-    }
-  })
-  </script>
-  
\ No newline at end of file
+})
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue b/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
index fabec2c..e63a8c2 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
@@ -1,26 +1,35 @@
 <template>
-    <div class="p-6 text-center">
-      <h2 class="text-3xl font-bold text-orange-700 mb-6">📸 Galeri Foto 📸</h2>
-  
-      <div class="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-3xl mx-auto">
-        <div
-          v-for="(img, i) in images"
-          :key="i"
-          class="overflow-hidden rounded-xl shadow-md"
-        >
-          <img
-            :src="img"
-            alt="Galeri"
-            class="object-cover w-full h-48 transform hover:scale-105 transition"
-          />
+  <div class="p-6 text-center max-w-4xl mx-auto">
+    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
+      📸 Galeri Foto 📸
+    </h2>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div
+        v-for="(img, i) in images"
+        :key="i"
+        class="group relative overflow-hidden rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-500"
+      >
+        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"></div>
+        <img
+          :src="img"
+          alt="Galeri"
+          class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
+        />
+        <div class="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-20">
+          <p class="font-semibold">Foto {{ i + 1 }}</p>
         </div>
       </div>
     </div>
-  </template>
-  
-  <script setup>
-  defineProps({
-    images: Array
-  })
-  </script>
-  
\ No newline at end of file
+
+    <div v-if="images.length === 0" class="bg-white/80 rounded-2xl p-8 shadow-lg">
+      <p class="text-gray-600 text-lg">Belum ada foto yang diunggah</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  images: Array
+})
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
index cb7f2c4..f5dadb9 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
@@ -1,52 +1,63 @@
 <template>
-    <div class="p-6 text-center max-w-xl mx-auto">
-      <h2 class="text-3xl font-bold text-orange-700 mb-6">💌 Buku Tamu 💌</h2>
-  
-      <div class="bg-white/70 backdrop-blur-md rounded-2xl p-6 shadow-md">
-        <form @submit.prevent="submitMessage">
-          <textarea
-            v-model="newMessage"
-            class="w-full p-3 border border-yellow-400 rounded-lg focus:ring focus:ring-yellow-300"
-            rows="3"
-            placeholder="Tulis ucapan untuk {{ guestName }}..."
-          ></textarea>
-  
-          <button
-            type="submit"
-            class="mt-3 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full shadow-md transition"
-          >
-            Kirim Ucapan
-          </button>
-        </form>
-      </div>
-  
-      <div class="mt-6 space-y-3">
-        <div
-          v-for="(msg, i) in messages"
-          :key="i"
-          class="bg-white/60 p-3 rounded-xl shadow text-gray-700"
+  <div class="p-6 text-center max-w-2xl mx-auto">
+    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
+      💌 Buku Tamu 💌
+    </h2>
+
+    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8">
+      <form @submit.prevent="submitMessage" class="space-y-4">
+        <textarea
+          v-model="newMessage"
+          class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"
+          rows="4"
+          placeholder="Tulis ucapan untuk {{ guestName }}..."
+        ></textarea>
+
+        <button
+          type="submit"
+          class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="!newMessage.trim()"
         >
-          💬 {{ msg }}
+          ✨ Kirim Ucapan
+        </button>
+      </form>
+    </div>
+
+    <div class="space-y-4 max-h-96 overflow-y-auto px-2">
+      <div
+        v-for="(msg, i) in messages"
+        :key="i"
+        class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300"
+      >
+        <div class="flex items-start space-x-3">
+          <div class="bg-gradient-to-r from-orange-500 to-yellow-500 p-2 rounded-full">
+            <span class="text-white text-sm">💬</span>
+          </div>
+          <p class="text-gray-700 text-left flex-1">{{ msg }}</p>
         </div>
       </div>
+
+      <div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
+        <p class="text-gray-600">Belum ada ucapan. Jadilah yang pertama mengucapkan!</p>
+      </div>
     </div>
-  </template>
-  
-  <script setup>
-  import { ref } from 'vue'
-  
-  const props = defineProps({
-    guestName: String,
-    messages: Array
-  })
-  
-  const emit = defineEmits(['addMessage'])
-  const newMessage = ref('')
-  
-  function submitMessage() {
-    if (!newMessage.value.trim()) return
-    emit('addMessage', newMessage.value)
-    newMessage.value = ''
-  }
-  </script>
-  
\ No newline at end of file
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  guestName: String,
+  messages: Array
+})
+
+const emit = defineEmits(['addMessage'])
+const newMessage = ref('')
+
+function submitMessage() {
+  if (!newMessage.value.trim()) return
+  emit('addMessage', newMessage.value)
+  newMessage.value = ''
+}
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Introduction.vue b/proyek-frontend/app/components/templates/UltahBasic/Introduction.vue
index f4962e9..f844910 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/Introduction.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/Introduction.vue
@@ -1,27 +1,42 @@
 <template>
-    <div class="flex flex-col items-center text-center p-6 space-y-4">
+  <div class="flex flex-col items-center text-center p-6 space-y-6 max-w-2xl mx-auto">
+    <!-- Photo frame with decoration -->
+    <div class="relative">
+      <div class="absolute -inset-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full blur opacity-30"></div>
       <img
         v-if="childPhoto"
         :src="childPhoto"
         alt="Foto Anak"
-        class="w-40 h-40 rounded-full object-cover border-4 border-yellow-400 shadow-md"
+        class="relative w-48 h-48 rounded-full object-cover border-4 border-white shadow-2xl z-10"
       />
-      <h2 class="text-3xl font-bold text-orange-700 mt-4">Halo, Aku {{ childName }}</h2>
-      <p class="text-gray-700">Usiaku kini {{ age }} tahun 🎉</p>
-      <p class="text-gray-600">Putra/Putri dari</p>
-      <p class="text-lg font-semibold text-gray-800">{{ parentsName }}</p>
-      <p class="mt-6 text-gray-700">
+      <div v-else class="relative w-48 h-48 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200 border-4 border-white shadow-2xl flex items-center justify-center z-10">
+        <span class="text-4xl">👶</span>
+      </div>
+    </div>
+
+    <div class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl border border-yellow-100">
+      <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-4">
+        Halo, Aku {{ childName }}
+      </h2>
+      <div class="space-y-3 text-gray-700">
+        <p class="text-xl font-semibold">Usiaku kini <span class="text-orange-500">{{ age }}</span> tahun 🎉</p>
+        <p class="text-gray-600">Putra/Putri dari</p>
+        <p class="text-xl font-bold text-gray-800 bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent">
+          {{ parentsName }}
+        </p>
+      </div>
+      <p class="mt-6 text-lg text-gray-600 italic">
         Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
       </p>
     </div>
-  </template>
-  
-  <script setup>
-  defineProps({
-    childName: String,
-    parentsName: String,
-    age: [String, Number],
-    childPhoto: String
-  })
-  </script>
-  
\ No newline at end of file
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  parentsName: String,
+  age: [String, Number],
+  childPhoto: String
+})
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Landing.vue b/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
index 23ac980..608ed77 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
@@ -1,23 +1,32 @@
 <template>
-    <div
-      class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen"
-    >
-      <h1 class="text-4xl md:text-5xl font-extrabold mb-4">🎂 Undangan Ulang Tahun 🎂</h1>
-      <p class="text-lg mb-6">Hai <span class="font-semibold">{{ guestName }}</span>!</p>
-      <p class="text-lg mb-8">Yuk, datang ke acara ulang tahun <span class="font-bold">{{ childName }}</span>!</p>
+  <div
+    class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4"
+  >
+    <!-- Animated elements -->
+    <div class="absolute top-10 left-10 animate-bounce">🎈</div>
+    <div class="absolute top-10 right-10 animate-bounce delay-100">🎁</div>
+    <div class="absolute bottom-20 left-20 animate-bounce delay-200">🍰</div>
+    <div class="absolute bottom-20 right-20 animate-bounce delay-300">🎉</div>
+
+    <div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-yellow-200 max-w-md transform hover:scale-105 transition-transform duration-500">
+      <h1 class="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent">
+        🎂 Undangan Ulang Tahun 🎂
+      </h1>
+      <p class="text-lg mb-4">Hai <span class="font-semibold text-orange-600">{{ guestName }}</span>!</p>
+      <p class="text-lg mb-6">Yuk, datang ke acara ulang tahun <span class="font-bold text-orange-500">{{ childName }}</span>!</p>
       <button
         @click="$emit('open-invitation')"
-        class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full text-lg shadow-md transition"
+        class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl"
       >
-        Buka Undangan
+        Buka Undangan 🎊
       </button>
     </div>
-  </template>
-  
-  <script setup>
-  defineProps({
-    childName: String,
-    guestName: String,
-  })
-  </script>
-  
\ No newline at end of file
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  guestName: String,
+})
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue b/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue
index e647b24..0d48000 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue
@@ -1,28 +1,38 @@
 <template>
-    <div class="flex flex-col items-center justify-center text-center p-6 space-y-6">
-      <h2 class="text-3xl font-bold text-orange-700">Terima Kasih! 🙏</h2>
-      <p class="text-gray-700">Sudah meluangkan waktu untuk melihat undangan ulang tahunku 💛</p>
-  
-      <p class="text-lg font-semibold text-gray-800">
-        Salam hangat dari <span class="text-orange-600 font-bold">{{ childName }}</span>
+  <div class="flex flex-col items-center justify-center text-center p-6 space-y-8 max-w-2xl mx-auto">
+    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent">
+      Terima Kasih! 🙏
+    </h2>
+    
+    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 space-y-6">
+      <p class="text-lg text-gray-700">Sudah meluangkan waktu untuk melihat undangan ulang tahunku 💛</p>
+
+      <p class="text-xl font-semibold text-gray-800">
+        Salam hangat dari <span class="bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent font-bold">{{ childName }}</span>
       </p>
-  
-      <div v-if="saySomething" class="bg-white/70 p-4 rounded-xl shadow-md max-w-lg">
-        <p class="italic text-gray-600">“{{ saySomething }}”</p>
+
+      <div v-if="jsonData?.pesan_terimakasih" class="bg-gradient-to-r from-yellow-100 to-orange-100 p-6 rounded-xl border-l-4 border-orange-400">
+        <p class="italic text-gray-600 text-lg">"{{ jsonData.pesan_terimakasih }}"</p>
       </div>
-  
-      <div v-if="rekening" class="mt-6 text-gray-700">
-        <p>🎁 Kirim hadiah ke rekening:</p>
-        <p class="font-semibold text-orange-700">{{ rekening }}</p>
+
+      <div v-if="jsonData?.rekening" class="bg-gradient-to-r from-green-100 to-emerald-100 p-6 rounded-xl border-l-4 border-green-400">
+        <p class="text-gray-700 mb-2">🎁 Kirim hadiah ke rekening:</p>
+        <p class="font-bold text-green-600 text-lg">{{ jsonData.rekening }}</p>
       </div>
     </div>
-  </template>
-  
-  <script setup>
-  defineProps({
-    childName: String,
-    saySomething: String,
-    rekening: String
-  })
-  </script>
-  
\ No newline at end of file
+
+    <div class="flex space-x-4 mt-6">
+      <div class="animate-bounce">🎈</div>
+      <div class="animate-bounce delay-100">🎁</div>
+      <div class="animate-bounce delay-200">🍰</div>
+      <div class="animate-bounce delay-300">🎉</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  jsonData: Object
+})
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
index 7ebf418..f13b08b 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
@@ -1,161 +1,177 @@
 <template>
-    <div class="min-h-screen bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 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('guestbook')" :class="navClass('guestbook')">Guest Book</button></li>
-          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
-        </ul>
-      </nav>
-  
-      <!-- Tombol Musik -->
-      <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
-        <button
-          @click="toggleMusic"
-          class="bg-yellow-600 hover:bg-yellow-700 p-3 rounded-full text-white shadow-lg transition-transform hover:scale-110"
-        >
-          {{ isPlaying ? '⏸️' : '▶️' }}
-        </button>
-      </div>
-  
-      <!-- Main Section -->
-      <main
-        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
-      >
-        <!-- Landing -->
-        <Landing
-          v-if="currentSection === 'landing'"
-          :childName="formData.nama_panggilan"
-          :guestName="data.nama_tamu"
-          @open-invitation="switchSection('introduction')"
-        />
-  
-        <!-- Introduction -->
-        <Introduction
-          v-if="currentSection === 'introduction'"
-          :age="formData.umur_yang_dirayakan"
-          :childName="formData.nama_lengkap"
-          :childOrder="formData.anak_ke"
-          :parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
-          :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[0]}` : null"
-        />
-  
-        <!-- Event -->
-        <Event
-          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"
-        />
-  
-        <!-- Gallery -->
-        <Gallery v-if="currentSection === 'gallery'" :images="galleryImages" />
-  
-        <!-- Guest Book -->
-        <GuestBook
-          v-if="currentSection === 'guestbook'"
-          :guestName="data.nama_tamu"
-          :messages="messages"
-          @addMessage="addMessage"
-        />
-  
-        <!-- Thank You -->
-        <ThankYou
-          v-if="currentSection === 'thanks'"
-          :childName="formData.nama_panggilan"
-          :jsonData="formData"
-        />
-      </main>
-  
-      <!-- Footer -->
-      <footer
-        class="bg-white/40 backdrop-blur-md text-center py-4 text-gray-700 font-medium border-t border-yellow-300"
-      >
-        <p>© {{ new Date().getFullYear() }} Undangan Ulang Tahun Basic | Dibuat dengan 💛 oleh Arief Dwi Wicaksono</p>
-      </footer>
+  <div class="min-h-screen bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 relative overflow-hidden">
+    <!-- Background decorations -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-10 left-10 w-20 h-20 bg-yellow-500/20 rounded-full blur-xl"></div>
+      <div class="absolute top-1/4 right-16 w-16 h-16 bg-orange-500/20 rounded-full blur-lg"></div>
+      <div class="absolute bottom-20 left-1/4 w-24 h-24 bg-pink-500/15 rounded-full blur-xl"></div>
+      <div class="absolute bottom-10 right-10 w-20 h-20 bg-red-500/15 rounded-full blur-lg"></div>
     </div>
-  </template>
-  
-  <script setup>
-  import { ref, computed, watchEffect } from 'vue'
-  import { useRuntimeConfig } from '#app'
-  
-  // Import Komponen
-  import Landing from '~/components/templates/UltahBasic/Landing.vue'
-  import Introduction from '~/components/templates/UltahBasic/Introduction.vue'
-  import Event from '~/components/templates/UltahBasic/Event.vue'
-  import Gallery from '~/components/templates/UltahBasic/Gallery.vue'
-  import GuestBook from '~/components/templates/UltahBasic/GuestBook.vue'
-  import ThankYou from '~/components/templates/UltahBasic/ThankYou.vue'
-  
-  // Props dari halaman induk
-  const props = defineProps({
-    data: { type: Object, required: true }
-  })
-  
-  // Runtime config (untuk backend URL)
-  const config = useRuntimeConfig()
-  const backendUrl = config.public.apiBaseUrl
-  
-  // Data dari backend
-  const formData = computed(() => props.data.form || {})
-  
-  // Galeri gambar (support foto array atau field lama)
-  const galleryImages = computed(() => {
-    const f = formData.value.foto
-    if (Array.isArray(f)) {
-      return f.map(img => `${backendUrl}/storage/${img}`)
-    }
-    return [
-      formData.value.foto_1,
-      formData.value.foto_2,
-      formData.value.foto_3,
-      formData.value.foto_4,
-      formData.value.foto_5
-    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
-  })
-  
-  watchEffect(() => {
-    console.log("🧾 formData:", formData.value)
-    console.log("🖼️ galleryImages:", galleryImages.value)
-  })
-  
-  // Navigasi antar bagian
-  const currentSection = ref('landing')
-  const switchSection = (s) => (currentSection.value = s)
-  
-  // Musik toggle
-  const isPlaying = ref(false)
-  const toggleMusic = () => (isPlaying.value = !isPlaying.value)
-  
-  // Buku tamu
-  const messages = ref([])
-  const addMessage = (msg) => messages.value.push(msg)
-  
-  // Style untuk navigasi aktif
-  const navClass = (s) =>
-    currentSection.value === s
-      ? 'text-yellow-800 underline underline-offset-4'
-      : 'hover:text-yellow-600 transition-colors'
-  </script>
-  
-  <style scoped>
-  html {
-    scroll-behavior: smooth;
+
+    <!-- Navigation -->
+    <nav
+      v-if="currentSection !== 'landing'"
+      class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in"
+    >
+      <ul
+        class="flex space-x-2 bg-white/70 backdrop-blur-lg px-6 py-3 rounded-full shadow-lg text-sm font-semibold text-gray-800 border border-yellow-200"
+      >
+        <li><button @click="switchSection('introduction')" :class="navClass('introduction')" class="px-3 py-1 rounded-full transition-all duration-300">Intro</button></li>
+        <li><button @click="switchSection('event')" :class="navClass('event')" class="px-3 py-1 rounded-full transition-all duration-300">Event</button></li>
+        <li><button @click="switchSection('gallery')" :class="navClass('gallery')" class="px-3 py-1 rounded-full transition-all duration-300">Gallery</button></li>
+        <li><button @click="switchSection('guestbook')" :class="navClass('guestbook')" class="px-3 py-1 rounded-full transition-all duration-300">Guest Book</button></li>
+        <li><button @click="switchSection('thanks')" :class="navClass('thanks')" class="px-3 py-1 rounded-full transition-all duration-300">Thanks</button></li>
+      </ul>
+    </nav>
+
+    <!-- Tombol Musik -->
+    <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
+      <button
+        @click="toggleMusic"
+        class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 p-4 rounded-full text-white shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl"
+      >
+        <span class="text-lg">{{ isPlaying ? '⏸️' : '▶️' }}</span>
+      </button>
+    </div>
+
+    <!-- Main Section -->
+    <main
+      class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
+    >
+      <!-- Landing -->
+      <Landing
+        v-if="currentSection === 'landing'"
+        :childName="formData.nama_panggilan"
+        :guestName="data.nama_tamu"
+        @open-invitation="switchSection('introduction')"
+      />
+
+      <!-- Introduction -->
+      <Introduction
+        v-if="currentSection === 'introduction'"
+        :age="formData.umur_yang_dirayakan"
+        :childName="formData.nama_lengkap"
+        :childOrder="formData.anak_ke"
+        :parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
+        :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[0]}` : null"
+      />
+
+      <!-- Event -->
+      <Event
+        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"
+      />
+
+      <!-- Gallery -->
+      <Gallery v-if="currentSection === 'gallery'" :images="galleryImages" />
+
+      <!-- Guest Book -->
+      <GuestBook
+        v-if="currentSection === 'guestbook'"
+        :guestName="data.nama_tamu"
+        :messages="messages"
+        @addMessage="addMessage"
+      />
+
+      <!-- Thank You -->
+      <ThankYou
+        v-if="currentSection === 'thanks'"
+        :childName="formData.nama_panggilan"
+        :jsonData="formData"
+      />
+    </main>
+
+    <!-- Footer -->
+    <footer
+      class="relative z-10 bg-white/50 backdrop-blur-md text-center py-4 text-gray-700 font-medium border-t border-yellow-300/50"
+    >
+      <p>© {{ new Date().getFullYear() }}</p>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watchEffect } from 'vue'
+import { useRuntimeConfig } from '#app'
+
+// Import Komponen
+import Landing from '~/components/templates/UltahBasic/Landing.vue'
+import Introduction from '~/components/templates/UltahBasic/Introduction.vue'
+import Event from '~/components/templates/UltahBasic/Event.vue'
+import Gallery from '~/components/templates/UltahBasic/Gallery.vue'
+import GuestBook from '~/components/templates/UltahBasic/GuestBook.vue'
+import ThankYou from '~/components/templates/UltahBasic/ThankYou.vue'
+
+// Props dari halaman induk
+const props = defineProps({
+  data: { type: Object, required: true }
+})
+
+// Runtime config (untuk backend URL)
+const config = useRuntimeConfig()
+const backendUrl = config.public.apiBaseUrl
+
+// Data dari backend
+const formData = computed(() => props.data.form || {})
+
+// Galeri gambar (support foto array atau field lama)
+const galleryImages = computed(() => {
+  const f = formData.value.foto
+  if (Array.isArray(f)) {
+    return f.map(img => `${backendUrl}/storage/${img}`)
   }
-  
-  button {
-    transition: all 0.3s ease;
-  }
-  </style>
-  
\ No newline at end of file
+  return [
+    formData.value.foto_1,
+    formData.value.foto_2,
+    formData.value.foto_3,
+    formData.value.foto_4,
+    formData.value.foto_5
+  ].filter(Boolean).map(img => `${backendUrl}/${img}`)
+})
+
+watchEffect(() => {
+  console.log("🧾 formData:", formData.value)
+  console.log("🖼️ galleryImages:", galleryImages.value)
+})
+
+// Navigasi antar bagian
+const currentSection = ref('landing')
+const switchSection = (s) => (currentSection.value = s)
+
+// Musik toggle
+const isPlaying = ref(false)
+const toggleMusic = () => (isPlaying.value = !isPlaying.value)
+
+// Buku tamu
+const messages = ref([])
+const addMessage = (msg) => messages.value.push(msg)
+
+// Style untuk navigasi aktif
+const navClass = (s) =>
+  currentSection.value === s
+    ? 'text-white bg-gradient-to-r from-orange-500 to-yellow-500 shadow-md'
+    : 'hover:text-orange-600 hover:bg-white/50'
+</script>
+
+<style scoped>
+html {
+  scroll-behavior: smooth;
+}
+
+button {
+  transition: all 0.3s ease;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out;
+}
+</style>
\ No newline at end of file