update template ultah

proyek-frontend/app/components/templates/Ultah/Gallery.vue

@@ -27,6 +27,9 @@ const props = defineProps({
     required: true
   }
 })
+
+console.log('Gallery props images:', props.images)
+
 </script>
 
 <style scoped>

proyek-frontend/app/components/templates/Ultah/Introduction.vue

@@ -17,7 +17,7 @@
       </div>
       <div class="flex-1">
         <div class="bg-yellow-300/60 rounded-3xl p-8 shadow-xl">
-          <img :src="childPhoto || '/assets/img/child-placeholder.jpg'" 
+          <img :src="getFullPhotoUrl(childPhoto)" 
                :alt="childName"
                class="w-full h-80 object-cover rounded-2xl shadow-lg">
         </div>
@@ -27,11 +27,19 @@
 </template>
 
 <script setup>
-defineProps({
+const { age, childName, childOrder, parentNames, childPhoto } = defineProps({
-  age: [Number,String],
+  age: [Number, String],
   childName: String,
-  childOrder: [Number,String],
+  childOrder: [Number, String],
   parentNames: String,
   childPhoto: [String, Array]
 })
+
+const getFullPhotoUrl = (photo) => {
+  if (!photo) return '/assets/img/child-placeholder.jpg'
+  if (photo.startsWith('http')) return photo
+  if (photo.startsWith('/storage')) return `http://localhost:8000${photo}`
+  return `http://localhost:8000/storage/${photo}`
+}
 </script>
+

proyek-frontend/app/components/templates/Ultah/Landing.vue

@@ -1,39 +1,54 @@
 <template>
-  <section class="w-full max-w-6xl mx-auto">
+  <section
-    <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
+    class="min-h-screen bg-gradient-to-b from-yellow-400 to-yellow-500 flex flex-col lg:flex-row items-center justify-center px-8 md:px-16 relative overflow-hidden"
-      <!-- Left Side -->
+  >
-      <div class="flex-1 text-center lg:text-left">
+    <!-- Left Side (Image) -->
-        <h1 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
+    <div class="flex-1 relative mt-10 lg:mt-0 flex justify-center lg:justify-start">
-          Celebrate With Us
+      <img
-        </h1>
+        src="/pria.jpg"
-        <h2 class="text-blue-600 text-4xl md:text-6xl font-bold mb-4">
+        alt="Character"
-          {{ childName }}
+        class="w-64 md:w-80 lg:w-96 drop-shadow-2xl animate-bounce-slow"
-        </h2>
+      />
-        <h3 class="text-orange-700 text-2xl md:text-3xl font-bold mb-8">
+    </div>
-          Birthday Party
+
-        </h3>
+    <!-- Right Side (Text) -->
-        <div class="bg-yellow-300/60 backdrop-blur-sm rounded-2xl p-6 mb-8 inline-block">
+    <div class="flex-1 text-center lg:text-left space-y-6 z-10 lg:pl-10">
-          <p class="text-orange-800 text-lg mb-2">Kepada Yth.</p>
+      <h1 class="text-orange-700 text-xl md:text-2xl font-semibold">
-          <p class="text-orange-700 text-xl font-semibold">{{ guestName }}</p>
+        Celebrate With Us
-        </div>
+      </h1>
-        <button @click="$emit('open-invitation')"
+      <h2
-          class="bg-orange-600 hover:bg-orange-700 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all">
+        class="text-blue-700 text-4xl md:text-6xl font-extrabold drop-shadow-md"
+      >
+        {{ childName }}
+      </h2>
+      <h3 class="text-orange-800 text-2xl md:text-4xl font-bold">
+        Birthday Party
+      </h3>
+
+      <div
+        class="bg-yellow-100/70 border border-yellow-300 shadow-md rounded-xl px-6 py-4 inline-block"
+      >
+        <p class="text-orange-700 text-lg">Kepada Yth.</p>
+        <p class="text-orange-800 text-xl font-bold">{{ guestName }}</p>
+      </div>
+
+      <div>
+        <button
+          @click="$emit('open-invitation')"
+          class="mt-6 bg-orange-600 hover:bg-orange-700 text-white px-8 py-3 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all"
+        >
           Open Invitation
         </button>
       </div>
-      <!-- Right Side -->
+    </div>
-      <div class="flex-1 relative">
+
-        <div class="relative w-full max-w-md mx-auto">
+    <!-- Musik Icon -->
-          <div class="bg-yellow-400 rounded-full w-64 h-64 mx-auto flex items-center justify-center border-4 border-yellow-600">
+    <div class="absolute bottom-6 left-6">
-            <div class="text-center">
+      <button
-              <div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 flex items-center justify-center border-4 border-gray-800">
+        class="bg-orange-700/80 p-3 rounded-full text-white shadow-lg hover:scale-110 transition-transform"
-                <div class="w-12 h-12 bg-yellow-600 rounded-full"></div>
+      >
-              </div>
+        🎵
-              <div class="text-gray-800 font-bold text-lg">Minions</div>
+      </button>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </section>
 </template>
@@ -41,6 +56,20 @@
 <script setup>
 defineProps({
   childName: String,
-  guestName: String
+  guestName: String,
 })
 </script>
+
+<style scoped>
+@keyframes bounce-slow {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+.animate-bounce-slow {
+  animation: bounce-slow 3s infinite ease-in-out;
+}
+</style>

proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue

@@ -29,13 +29,12 @@
             <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="`${backendUrl}/${formData.foto_1}`" />
+                :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[4]}` : null" />
+
 
             <!-- Event -->
             <Event v-if="currentSection === 'event'" :hari_tanggal_acara="formData.hari_tanggal_acara"
-                :waktu="formData.waktu" 
+                :waktu="formData.waktu" :alamat="formData.alamat" :link_gmaps="formData.link_gmaps"
-                :alamat="formData.alamat" 
-                :link_gmaps="formData.link_gmaps"
                 :hitung_mundur="formData.hitung_mundur" />
 
 
@@ -70,6 +69,10 @@ const props = defineProps({
     data: { type: Object, required: true }
 })
 
+
+
+
+
 // Runtime config
 const config = useRuntimeConfig()
 const backendUrl = config.public.apiBaseUrl
@@ -77,19 +80,32 @@ const backendUrl = config.public.apiBaseUrl
 // Data form dari backend
 const formData = computed(() => props.data.form || {})
 
-// Gabungkan semua foto jadi array untuk galeri
+
 const galleryImages = computed(() => {
+    const f = formData.value.foto
+
+
+    if (Array.isArray(f)) {
+        return f.map(img => `${backendUrl}/storage/${img}`)
+    }
+
+    // Jika masih bentuk lama (foto_1, foto_2, dst.)
     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}`)
-        .filter(Boolean)
-        .map(f => `${backendUrl}/${f}`)
 })
 
+watchEffect(() => {
+    console.log("🧾 formData:", formData.value)
+    console.log("🖼️ galleryImages:", galleryImages.value)
+})
+
+
+
 // Navigasi antar section
 const currentSection = ref('landing')
 const switchSection = (s) => (currentSection.value = s)