From 9be255c4d81e1f5bdb93a4ede79eb5cbba23b67b Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Mon, 13 Oct 2025 15:41:26 +0700
Subject: [PATCH] tes design template

---
 .../template-page/CategorySelection.vue       |   2 +-
 .../app/components/templates/Ultah/Event.vue  | 206 ++++-
 .../components/templates/Ultah/Gallery.vue    |  37 +-
 .../templates/Ultah/Introduction.vue          |   6 +-
 .../components/templates/Ultah/ThankYou.vue   |  70 +-
 .../app/components/templates/Ultah/UltahA.vue | 784 +-----------------
 .../wedding}/CountdownTimer.vue               |   0
 .../{shared => templates/wedding}/Gallery.vue |   0
 .../wedding}/GuestBook.vue                    |   0
 .../{shared => templates/wedding}/Maps.vue    |   0
 .../wedding}/MusicPlayer.vue                  |   0
 .../{shared => templates/wedding}/RSVP.vue    |   0
 .../components/templates/wedding/WeddingA.vue |  15 +-
 .../undangan/undangan-khitan-premium.vue      | 154 ++++
 .../undangan/undangan-pernikahan-premium.vue  |  69 ++
 .../undangan/undangan-ulang-tahun-premium.vue | 108 +++
 proyek-frontend/app/pages/p/[code].vue        |  41 +-
 proyek-frontend/app/pages/preview/[id].vue    |   2 +-
 .../app/pages/preview/wedding-a.vue           |   2 +-
 19 files changed, 673 insertions(+), 823 deletions(-)
 rename proyek-frontend/app/components/{shared => templates/wedding}/CountdownTimer.vue (100%)
 rename proyek-frontend/app/components/{shared => templates/wedding}/Gallery.vue (100%)
 rename proyek-frontend/app/components/{shared => templates/wedding}/GuestBook.vue (100%)
 rename proyek-frontend/app/components/{shared => templates/wedding}/Maps.vue (100%)
 rename proyek-frontend/app/components/{shared => templates/wedding}/MusicPlayer.vue (100%)
 rename proyek-frontend/app/components/{shared => templates/wedding}/RSVP.vue (100%)
 create mode 100644 proyek-frontend/app/components/undangan/undangan-khitan-premium.vue
 create mode 100644 proyek-frontend/app/components/undangan/undangan-pernikahan-premium.vue
 create mode 100644 proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue

diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index 87db324..2aa5b7d 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -14,7 +14,7 @@
             Kembali ke Beranda
           </NuxtLink>
         </div>
-
+       
         <!-- Header -->
         <h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
           Pilih Kategori Favoritmu
diff --git a/proyek-frontend/app/components/templates/Ultah/Event.vue b/proyek-frontend/app/components/templates/Ultah/Event.vue
index 9d305bf..2a8e6f6 100644
--- a/proyek-frontend/app/components/templates/Ultah/Event.vue
+++ b/proyek-frontend/app/components/templates/Ultah/Event.vue
@@ -1,27 +1,191 @@
 <template>
-  <section class="w-full max-w-6xl mx-auto text-center">
-    <h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
-      Acara Ulang Tahun
+  <section
+    class="w-full bg-gradient-to-b from-yellow-300 to-yellow-100 py-12 px-4 text-center relative overflow-hidden">
+    <!-- Judul -->
+    <h1 class="text-3xl md:text-4xl font-extrabold text-orange-700 mb-10">
+      🎉 BIRTHDAY PARTY 🎉
     </h1>
-    <div class="bg-yellow-300/60 rounded-3xl p-8 shadow-xl">
-      <p class="text-orange-800 text-lg md:text-xl mb-4">
-        Insya Allah akan dilaksanakan pada:
-      </p>
-      <p class="text-orange-700 text-2xl md:text-3xl font-bold mb-6">
-        Selasa, 11 Juni 2025<br> Pukul 11.00 WIB
-      </p>
-      <p class="text-orange-800 text-lg md:text-xl mb-6">
-        Bertempat di:<br>
-        Jl. Andara Raya No.123, Jakarta Selatan
-      </p>
-      <div class="mt-6">
-        <iframe
-          class="w-full h-64 rounded-2xl shadow-lg"
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3..."
-          allowfullscreen
-          loading="lazy">
-        </iframe>
+
+    <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-8 bg-yellow-200/50 rounded-3xl p-8 shadow-xl relative z-10">
+      <!-- Kolom Kiri - Google Map -->
+      <div class="flex flex-col items-center justify-center">
+        <iframe v-if="mapEmbed" class="w-full h-72 rounded-2xl shadow-lg" :src="mapEmbed" allowfullscreen
+          loading="lazy"></iframe>
+        <button
+          class="mt-4 bg-orange-700 hover:bg-orange-800 text-white font-semibold py-2 px-6 rounded-full shadow-md transition"
+          @click="openMap">
+          Direction
+        </button>
+      </div>
+
+      <!-- Kolom Kanan - Detail Acara -->
+      <div class="text-center">
+        <h2 class="text-2xl md:text-3xl font-extrabold text-blue-900 mb-4">
+          BIRTHDAY PARTY
+        </h2>
+
+        <!-- Tanggal dan Waktu -->
+        <div class="flex justify-center items-center gap-6 mb-4">
+          <div>
+            <p class="text-4xl font-extrabold text-orange-700">
+              {{ eventDateNum || '-' }}
+            </p>
+            <p class="text-sm font-bold text-orange-800 uppercase">
+              {{ eventDayName || 'TANGGAL TIDAK VALID' }}<br />
+              {{ eventMonthYear || '' }}
+            </p>
+          </div>
+          <div class="border-l-2 border-orange-500 h-10"></div>
+          <div class="text-left">
+            <p class="text-lg font-semibold text-orange-700">
+              {{ props.waktu || '00.00' }} WIB
+            </p>
+            <p class="text-sm text-orange-800 font-bold">S.D SELESAI</p>
+          </div>
+        </div>
+
+        <!-- Lokasi -->
+        <p class="text-orange-900 font-medium mb-6 leading-relaxed">
+          {{ props.alamat || 'Belum ada alamat' }}
+        </p>
+
+
+        <!-- Countdown -->
+        <div v-if="countdownValid" class="flex justify-center gap-4 mb-6 text-white font-bold">
+          <div v-for="(value, label) in countdownDisplay" :key="label"
+            class="bg-orange-700 rounded-xl px-4 py-3 text-center shadow-md w-16">
+            <p class="text-2xl">{{ value }}</p>
+            <p class="text-xs uppercase">{{ label }}</p>
+          </div>
+        </div>
+
+        <!-- Tombol Kalender -->
+        <button
+          class="bg-orange-700 hover:bg-orange-800 text-white font-semibold py-2 px-6 rounded-full shadow-md transition"
+          @click="addToCalendar">
+          Add to Calendar
+        </button>
       </div>
     </div>
+
+    <!-- Gambar di bawah -->
+    <img src="/ABBAUF.png" alt="Logo" class="mx-auto mt-10 w-56 md:w-64" />
   </section>
 </template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps({
+  hari_tanggal_acara: String,
+  waktu: String,
+  alamat: String,
+  link_gmaps: String,
+  hitung_mundur: String,
+})
+
+// --- Format tanggal agar tidak invalid ---
+const eventDate = computed(() => {
+  let dateString = props.hari_tanggal_acara
+  if (!dateString) return null
+  // Tambahkan waktu default agar format valid di semua browser
+  if (!dateString.includes('T')) {
+    dateString += 'T00:00:00Z'
+  }
+  const d = new Date(dateString)
+  return isNaN(d) ? null : d
+})
+
+const eventDateNum = computed(() => eventDate.value?.getDate() || null)
+const eventDayName = computed(() =>
+  eventDate.value
+    ? eventDate.value
+      .toLocaleDateString('id-ID', { weekday: 'long' })
+      .toUpperCase()
+    : null
+)
+const eventMonthYear = computed(() =>
+  eventDate.value
+    ? eventDate.value
+      .toLocaleDateString('id-ID', { month: 'long', year: 'numeric' })
+      .toUpperCase()
+    : null
+)
+
+// --- Google Map Embed ---
+const mapEmbed = computed(() => {
+  if (!props.link_gmaps || props.link_gmaps.trim() === '') return null
+  if (props.link_gmaps.includes('/embed?')) return props.link_gmaps
+  return `https://www.google.com/maps?q=${encodeURIComponent(
+    props.link_gmaps
+  )}&output=embed`
+})
+
+const openMap = () => {
+  if (props.link_gmaps && props.link_gmaps.trim() !== '') {
+    window.open(props.link_gmaps, '_blank')
+  }
+}
+
+// --- Countdown ---
+const countdown = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+const countdownValid = ref(false)
+
+onMounted(() => {
+  let targetString = props.hitung_mundur
+  if (!targetString) return
+  if (!targetString.includes('T')) {
+    targetString += 'T00:00:00'
+  }
+  const target = new Date(targetString)
+  if (isNaN(target)) return
+
+  countdownValid.value = true
+  setInterval(() => {
+    const now = new Date().getTime()
+    const diff = target.getTime() - now
+    if (diff <= 0) return
+    countdown.value = {
+      days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+      hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+      minutes: Math.floor((diff / (1000 * 60)) % 60),
+      seconds: Math.floor((diff / 1000) % 60),
+    }
+  }, 1000)
+})
+
+const countdownDisplay = computed(() => ({
+  D: countdown.value.days,
+  H: countdown.value.hours,
+  M: countdown.value.minutes,
+  S: countdown.value.seconds,
+}))
+
+// --- Add to Calendar ---
+const addToCalendar = () => {
+  const title = 'Birthday Party'
+  let dateString = props.hari_tanggal_acara
+  if (!dateString) return
+  if (!dateString.includes('T')) {
+    dateString += 'T00:00:00'
+  }
+  const startDate = new Date(dateString)
+  const endDate = new Date(startDate.getTime() + 2 * 60 * 60 * 1000) // +2 jam
+
+  const start = startDate.toISOString().replace(/-|:|\.\d+/g, '')
+  const end = endDate.toISOString().replace(/-|:|\.\d+/g, '')
+
+  const url = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(
+    title
+  )}&dates=${start}/${end}&details=${encodeURIComponent(
+    'Acara Ulang Tahun di ' + (props.alamat || '')
+  )}`
+  window.open(url, '_blank')
+}
+</script>
+
+<style scoped>
+section {
+  position: relative;
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/Ultah/Gallery.vue b/proyek-frontend/app/components/templates/Ultah/Gallery.vue
index 6e5b839..b8a8a76 100644
--- a/proyek-frontend/app/components/templates/Ultah/Gallery.vue
+++ b/proyek-frontend/app/components/templates/Ultah/Gallery.vue
@@ -1,15 +1,36 @@
 <template>
-  <section class="w-full max-w-6xl mx-auto text-center">
+  <section class="w-full max-w-6xl mx-auto text-center px-4">
     <h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
       Galeri Foto
     </h1>
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-      <img src="/logo1.png" alt="gallery" class="rounded-xl shadow-lg object-cover h-48 w-full">
-      <img src="/logo2.png" alt="gallery" class="rounded-xl shadow-lg object-cover h-48 w-full">
-      <img src="/pria.jpg" alt="gallery" class="rounded-xl shadow-lg object-cover h-48 w-full">
-      <img src="/wanita.jpg" alt="gallery" class="rounded-xl shadow-lg object-cover h-48 w-full">
-      <img src="/templat.jpg" alt="gallery" class="rounded-xl shadow-lg object-cover h-48 w-full">
-      <img src="/iphone.png" alt="gallery" class="rounded-xl shadow-lg object-cover h-48 w-full">
+
+    <div v-if="images && images.length" class="grid grid-cols-2 md:grid-cols-3 gap-4">
+      <img
+        v-for="(img, index) in images"
+        :key="index"
+        :src="img"
+        alt="gallery"
+        class="rounded-xl shadow-lg object-cover h-48 w-full hover:scale-105 transition-transform duration-300"
+      />
+    </div>
+
+    <div v-else class="text-orange-800 bg-yellow-100 py-8 rounded-2xl shadow-inner">
+      <p class="text-lg font-semibold">Belum ada foto untuk ditampilkan</p>
     </div>
   </section>
 </template>
+
+<script setup>
+const props = defineProps({
+  images: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+img {
+  border: 3px solid rgba(255, 255, 255, 0.6);
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/Ultah/Introduction.vue b/proyek-frontend/app/components/templates/Ultah/Introduction.vue
index 65e5e2c..1adb315 100644
--- a/proyek-frontend/app/components/templates/Ultah/Introduction.vue
+++ b/proyek-frontend/app/components/templates/Ultah/Introduction.vue
@@ -28,10 +28,10 @@
 
 <script setup>
 defineProps({
-  age: Number,
+  age: [Number,String],
   childName: String,
-  childOrder: Number,
+  childOrder: [Number,String],
   parentNames: String,
-  childPhoto: String
+  childPhoto: [String, Array]
 })
 </script>
diff --git a/proyek-frontend/app/components/templates/Ultah/ThankYou.vue b/proyek-frontend/app/components/templates/Ultah/ThankYou.vue
index dbb8e4e..89d9f99 100644
--- a/proyek-frontend/app/components/templates/Ultah/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/Ultah/ThankYou.vue
@@ -1,20 +1,68 @@
 <template>
-  <section class="w-full max-w-3xl mx-auto text-center">
-    <h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-6">
-      Terima Kasih
-    </h1>
-    <p class="text-orange-800 text-lg md:text-xl mb-6">
-      Kehadiran dan doa restu Bapak/Ibu/Saudara/i merupakan kebahagiaan besar bagi kami.
-    </p>
-    <div class="bg-yellow-300/60 rounded-3xl p-6 shadow-xl">
-      <p class="text-orange-700 font-bold text-xl">Raffi Ahmad & Nagita Slavina</p>
-      <p class="text-orange-800">Orang Tua {{ childName }}</p>
+  <section
+    class="min-h-screen flex flex-col justify-center items-center text-center bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 px-6 py-12 relative overflow-hidden"
+  >
+    <!-- Background Ornamen -->
+    <div class="absolute inset-0 opacity-10 pointer-events-none">
+      <div class="absolute top-10 left-10 w-24 h-24 bg-orange-500 rounded-full blur-2xl"></div>
+      <div class="absolute bottom-10 right-10 w-32 h-32 bg-yellow-600 rounded-full blur-3xl"></div>
+    </div>
+
+    <!-- Konten Utama -->
+    <div
+      class="relative z-10 w-full max-w-3xl bg-white/60 backdrop-blur-md rounded-3xl shadow-2xl p-8 md:p-12 border border-yellow-200"
+    >
+      <h1 class="text-orange-700 text-4xl md:text-5xl font-extrabold mb-6 animate-fade-in">
+        Terima Kasih
+      </h1>
+
+      <p
+        class="text-orange-800 text-lg md:text-xl mb-8 leading-relaxed animate-fade-in delay-100"
+      >
+        Kehadiran dan doa restu Bapak/Ibu/Saudara/i merupakan kebahagiaan besar bagi kami.
+      </p>
+
+      <div
+        class="bg-gradient-to-r from-yellow-300 to-yellow-400 rounded-3xl py-6 px-8 shadow-md animate-fade-in delay-200"
+      >
+        <p class="text-orange-700 font-bold text-2xl md:text-3xl mb-2">
+          {{ jsonData.nama_bapak }} & {{ jsonData.nama_ibu }}
+        </p>
+        <p class="text-orange-800 text-lg">
+          Orang Tua {{ jsonData.nama_panggilan }}
+        </p>
+      </div>
     </div>
   </section>
 </template>
 
 <script setup>
 defineProps({
-  childName: String
+  jsonData: {
+    type: Object,
+    required: true
+  }
 })
 </script>
+
+<style scoped>
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fade-in 0.8s ease-out forwards;
+}
+.delay-100 {
+  animation-delay: 0.1s;
+}
+.delay-200 {
+  animation-delay: 0.2s;
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/Ultah/UltahA.vue b/proyek-frontend/app/components/templates/Ultah/UltahA.vue
index 6b0d59a..85c494d 100644
--- a/proyek-frontend/app/components/templates/Ultah/UltahA.vue
+++ b/proyek-frontend/app/components/templates/Ultah/UltahA.vue
@@ -1,769 +1,31 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
-    <!-- Background Pattern -->
-    <div class="absolute inset-0 opacity-10">
-      <div class="absolute top-10 left-10 w-20 h-20 bg-yellow-600 rounded-full"></div>
-      <div class="absolute top-32 right-20 w-16 h-16 bg-yellow-600 rounded-full"></div>
-      <div class="absolute bottom-20 left-20 w-12 h-12 bg-yellow-600 rounded-full"></div>
-      <div class="absolute bottom-40 right-40 w-24 h-24 bg-yellow-600 rounded-full"></div>
-    </div>
-
-    <!-- Navigation -->
-    <nav class="relative z-20 bg-transparent border-b border-yellow-600/20">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-center items-center h-16">
-          <div class="hidden md:block">
-            <div class="ml-10 flex items-baseline space-x-8">
-              <a href="#introduction" @click="currentSection = 'introduction'" 
-                 :class="currentSection === 'introduction' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
-                 class="px-3 py-2 text-sm font-medium transition-colors">
-                INTRODUCTION
-              </a>
-              <a href="#event" @click="currentSection = 'event'"
-                 :class="currentSection === 'event' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
-                 class="px-3 py-2 text-sm font-medium transition-colors">
-                EVENT
-              </a>
-              <a href="#galeri" @click="currentSection = 'galeri'"
-                 :class="currentSection === 'galeri' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
-                 class="px-3 py-2 text-sm font-medium transition-colors">
-                GALERI
-              </a>
-              <a href="#say" @click="currentSection = 'say'"
-                 :class="currentSection === 'say' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
-                 class="px-3 py-2 text-sm font-medium transition-colors">
-                SAY?
-              </a>
-              <a href="#thanks" @click="currentSection = 'thanks'"
-                 :class="currentSection === 'thanks' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
-                 class="px-3 py-2 text-sm font-medium transition-colors">
-                THANKS
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </nav>
-
-    <!-- Mobile Navigation -->
-    <div class="md:hidden bg-yellow-400/90 backdrop-blur-sm">
-      <div class="px-2 pt-2 pb-3 space-y-1">
-        <a href="#introduction" @click="currentSection = 'introduction'"
-           :class="currentSection === 'introduction' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
-           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
-          INTRODUCTION
-        </a>
-        <a href="#event" @click="currentSection = 'event'"
-           :class="currentSection === 'event' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
-           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
-          EVENT
-        </a>
-        <a href="#galeri" @click="currentSection = 'galeri'"
-           :class="currentSection === 'galeri' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
-           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
-          GALERI
-        </a>
-        <a href="#say" @click="currentSection = 'say'"
-           :class="currentSection === 'say' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
-           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
-          SAY?
-        </a>
-        <a href="#thanks" @click="currentSection = 'thanks'"
-           :class="currentSection === 'thanks' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
-           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
-          THANKS
-        </a>
-      </div>
-    </div>
-
-    <!-- Music Icon -->
-    <div class="fixed bottom-4 left-4 z-30">
-      <button @click="toggleMusic" class="bg-orange-600 hover:bg-orange-700 text-white p-3 rounded-full shadow-lg transition-colors">
-        <svg v-if="isPlaying" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-        </svg>
-        <svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-        </svg>
-      </button>
-    </div>
-
-    <!-- Main Content -->
-    <main class="relative z-10 min-h-screen flex items-center justify-center p-4">
-      
-      <!-- Landing Section -->
-      <section v-if="currentSection === 'landing'" class="w-full max-w-6xl mx-auto">
-        <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
-          
-          <!-- Left Side Content -->
-          <div class="flex-1 text-center lg:text-left">
-            <h1 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
-              Celebrate With Us
-            </h1>
-            <h2 class="text-blue-600 text-4xl md:text-6xl font-bold mb-4">
-              {{ childName }}
-            </h2>
-            <h3 class="text-orange-700 text-2xl md:text-3xl font-bold mb-8">
-              Birthday Party
-            </h3>
-            
-            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-2xl p-6 mb-8 inline-block">
-              <p class="text-orange-800 text-lg mb-2">Kepada Yth.</p>
-              <p class="text-orange-700 text-xl font-semibold">{{ guestName }}</p>
-            </div>
-            
-            <button @click="openInvitation" 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">
-              Open Invitation
-            </button>
-          </div>
-          
-          <!-- Right Side - Minions -->
-          <div class="flex-1 relative">
-            <div class="relative w-full max-w-md mx-auto">
-              <!-- Minions Placeholder -->
-              <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="text-center">
-                  <div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 flex items-center justify-center border-4 border-gray-800">
-                    <div class="w-12 h-12 bg-yellow-600 rounded-full"></div>
-                  </div>
-                  <div class="text-gray-800 font-bold text-lg">Minions</div>
-                </div>
-              </div>
-              <!-- Additional minions -->
-              <div class="absolute -left-8 top-16 w-20 h-20 bg-yellow-400 rounded-full border-2 border-yellow-600 flex items-center justify-center">
-                <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
-              </div>
-              <div class="absolute -right-8 top-20 w-16 h-16 bg-yellow-400 rounded-full border-2 border-yellow-600 flex items-center justify-center">
-                <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </section>
-
-      <!-- Introduction Section -->
-      <section v-if="currentSection === 'introduction'" class="w-full max-w-6xl mx-auto">
-        <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
-          
-          <!-- Left Side Content -->
-          <div class="flex-1 text-center lg:text-left">
-            <h1 class="text-orange-700 text-2xl md:text-3xl font-bold mb-6">
-              Ulang Tahun Ke -{{ age }}
-            </h1>
-            <h2 class="text-orange-800 text-3xl md:text-5xl font-bold mb-6">
-              {{ childName }}
-            </h2>
-            
-            <h3 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
-              Anak Ke -{{ childOrder }}
-            </h3>
-            <h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
-              {{ parentNames }}
-            </h4>
-            
-            <!-- Minions Animation Area -->
-            <div class="flex justify-center lg:justify-start gap-4 mb-8">
-              <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600 transform hover:scale-110 transition-transform">
-                <div class="w-8 h-8 bg-white rounded-full border border-gray-800"></div>
-              </div>
-              <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600 transform hover:scale-110 transition-transform">
-                <div class="w-8 h-8 bg-white rounded-full border border-gray-800"></div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Right Side - Child Photo -->
-          <div class="flex-1">
-            <div class="relative w-full max-w-md mx-auto">
-              <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl">
-                <img :src="childPhoto || '/assets/img/child-placeholder.jpg'" 
-                     :alt="childName"
-                     class="w-full h-80 object-cover rounded-2xl shadow-lg">
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </section>
-
-      <!-- Event Section -->
-      <section v-if="currentSection === 'event'" class="w-full max-w-6xl mx-auto">
-        <div class="flex flex-col lg:flex-row gap-8">
-          
-          <!-- Left Side - Map -->
-          <div class="flex-1">
-            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-6 shadow-xl">
-              <div class="relative">
-                <!-- Minion Peeking -->
-                <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 z-10">
-                  <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
-                    <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
-                  </div>
-                </div>
-                
-                <!-- Map Placeholder -->
-                <div class="bg-gray-200 rounded-2xl h-64 flex items-center justify-center">
-                  <div class="text-center">
-                    <div class="text-gray-500 text-lg mb-2">📍 Location Map</div>
-                    <div class="text-gray-400 text-sm">Google Maps Integration</div>
-                  </div>
-                </div>
-                
-                <button class="absolute bottom-4 left-4 bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold">
-                  Direction
-                </button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Right Side - Event Details -->
-          <div class="flex-1">
-            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-6 shadow-xl">
-              <!-- Minion Peeking -->
-              <div class="absolute -top-8 right-8">
-                <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
-                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
-                </div>
-              </div>
-              
-              <div class="relative">
-                <h2 class="text-blue-600 text-2xl md:text-3xl font-bold mb-6 text-center">
-                  BIRTHDAY PARTY
-                </h2>
-                
-                <!-- Date and Time -->
-                <div class="mb-6">
-                  <div class="flex items-center gap-4 mb-2">
-                    <span class="text-orange-700 text-xl font-bold">{{ eventDay }}</span>
-                    <span class="text-orange-700 text-lg">{{ eventDate }}</span>
-                    <span class="text-orange-700 text-lg">{{ eventTime }}</span>
-                  </div>
-                  <div class="text-orange-600 font-medium">{{ eventLocation }}</div>
-                </div>
-                
-                <!-- Countdown -->
-                <div class="grid grid-cols-4 gap-2 mb-6">
-                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
-                    <div class="text-xl font-bold">{{ countdown.days }}</div>
-                    <div class="text-xs">D</div>
-                  </div>
-                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
-                    <div class="text-xl font-bold">{{ countdown.hours }}</div>
-                    <div class="text-xs">H</div>
-                  </div>
-                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
-                    <div class="text-xl font-bold">{{ countdown.minutes }}</div>
-                    <div class="text-xs">M</div>
-                  </div>
-                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
-                    <div class="text-xl font-bold">{{ countdown.seconds }}</div>
-                    <div class="text-xs">S</div>
-                  </div>
-                </div>
-                
-                <!-- Add to Calendar -->
-                <button class="w-full bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-semibold">
-                  Add to Calendar
-                </button>
-                
-                <!-- Minions at bottom -->
-                <div class="flex justify-center mt-6 gap-4">
-                  <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-                    <div class="w-3 h-3 bg-white rounded-full border border-gray-800"></div>
-                  </div>
-                  <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-                    <div class="w-3 h-3 bg-white rounded-full border border-gray-800"></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </section>
-
-      <!-- Gallery Section -->
-      <section v-if="currentSection === 'galeri'" class="w-full max-w-6xl mx-auto">
-        <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl relative">
-          
-          <h2 class="text-orange-700 text-3xl md:text-4xl font-bold text-center mb-8">
-            Galeri
-          </h2>
-          
-          <!-- Photo Grid -->
-          <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
-            <div v-for="(photo, index) in galleryPhotos" :key="index" 
-                 class="aspect-square bg-gray-200 rounded-xl overflow-hidden shadow-lg hover:scale-105 transition-transform">
-              <img :src="photo || '/assets/img/gallery-placeholder.jpg'" 
-                   :alt="`Gallery ${index + 1}`"
-                   class="w-full h-full object-cover">
-            </div>
-          </div>
-          
-          <!-- Minions around gallery -->
-          <div class="absolute -bottom-4 -left-4">
-            <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-              <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
-            </div>
-          </div>
-          
-          <div class="absolute -top-4 -right-4">
-            <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-              <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
-            </div>
-          </div>
-          
-          <div class="absolute bottom-8 right-8 flex gap-2">
-            <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-              <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
-            </div>
-            <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-              <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Say Something Section -->
-      <section v-if="currentSection === 'say'" class="w-full max-w-6xl mx-auto">
-        <div class="flex flex-col lg:flex-row gap-8">
-          
-          <!-- Left Side - Form -->
-          <div class="flex-1">
-            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl relative">
-              <!-- Minion Peeking -->
-              <div class="absolute -top-8 left-8">
-                <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
-                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
-                </div>
-              </div>
-              
-              <h3 class="text-orange-700 text-2xl font-bold mb-6">Say Something!</h3>
-              
-              <form @submit.prevent="submitMessage" class="space-y-4">
-                <div>
-                  <label class="text-orange-700 font-semibold mb-2 block">Nome</label>
-                  <input v-model="guestMessage.name" 
-                         type="text" 
-                         class="w-full px-4 py-3 rounded-xl border-2 border-yellow-300 focus:border-orange-500 outline-none bg-white/80">
-                </div>
-                
-                <div>
-                  <label class="text-orange-700 font-semibold mb-2 block">Message</label>
-                  <textarea v-model="guestMessage.message" 
-                            rows="4"
-                            class="w-full px-4 py-3 rounded-xl border-2 border-yellow-300 focus:border-orange-500 outline-none bg-white/80 resize-none"></textarea>
-                </div>
-                
-                <div>
-                  <label class="text-orange-700 font-semibold mb-2 block">Attendance</label>
-                  <div class="flex gap-2">
-                    <button type="button" 
-                            @click="guestMessage.attendance = 'yes'"
-                            :class="guestMessage.attendance === 'yes' ? 'bg-green-600 text-white' : 'bg-white text-gray-700 hover:bg-green-100'"
-                            class="px-4 py-2 rounded-lg font-semibold transition-colors">
-                      Yes
-                    </button>
-                    <button type="button" 
-                            @click="guestMessage.attendance = 'no'"
-                            :class="guestMessage.attendance === 'no' ? 'bg-red-600 text-white' : 'bg-white text-gray-700 hover:bg-red-100'"
-                            class="px-4 py-2 rounded-lg font-semibold transition-colors">
-                      No
-                    </button>
-                    <button type="button" 
-                            @click="guestMessage.attendance = 'maybe'"
-                            :class="guestMessage.attendance === 'maybe' ? 'bg-yellow-600 text-white' : 'bg-white text-gray-700 hover:bg-yellow-100'"
-                            class="px-4 py-2 rounded-lg font-semibold transition-colors">
-                      Maybe
-                    </button>
-                  </div>
-                </div>
-                
-                <button type="submit" 
-                        class="w-full bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-semibold">
-                  Confirmation
-                </button>
-              </form>
-            </div>
-          </div>
-          
-          <!-- Right Side - Messages -->
-          <div class="flex-1">
-            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl relative">
-              <!-- Minion Peeking -->
-              <div class="absolute -top-8 right-8">
-                <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
-                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
-                </div>
-              </div>
-              
-              <div class="flex items-center gap-2 mb-6">
-                <span class="text-gray-600">💬</span>
-                <span class="text-orange-700 font-bold">{{ messages.length.toString().padStart(2, '0') }}</span>
-              </div>
-              
-              <!-- Messages List -->
-              <div class="space-y-4 max-h-96 overflow-y-auto">
-                <div v-for="message in messages" :key="message.id"
-                     class="bg-white/80 rounded-xl p-4">
-                  <div class="flex justify-between items-start mb-2">
-                    <span class="font-semibold text-orange-700">{{ message.name }}</span>
-                    <span :class="getAttendanceClass(message.attendance)" 
-                          class="px-2 py-1 rounded-full text-xs font-semibold">
-                      {{ message.attendance.charAt(0).toUpperCase() + message.attendance.slice(1) }}
-                    </span>
-                  </div>
-                  <p class="text-gray-700">{{ message.message }}</p>
-                </div>
-              </div>
-              
-              <!-- Bottom Minions -->
-              <div class="absolute -bottom-4 right-4 flex gap-2">
-                <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
-                </div>
-                <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </section>
-
-      <!-- Thanks Section -->
-      <section v-if="currentSection === 'thanks'" class="w-full max-w-6xl mx-auto">
-        <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
-          
-          <!-- Left Side Content -->
-          <div class="flex-1 text-center lg:text-left">
-            <p class="text-orange-700 text-lg md:text-xl leading-relaxed mb-8">
-              Merupakan suatu kebahagiaan dan kehormatan bagi kami, apabila teman-teman, 
-              berkenan hadir dan memberikan do'a.
-            </p>
-            
-            <h3 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
-              Hormat Kami
-            </h3>
-            <h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
-              {{ parentNames }}
-            </h4>
-            
-            <!-- Minion -->
-            <div class="flex justify-center lg:justify-start">
-              <div class="w-24 h-24 bg-yellow-400 rounded-full flex items-center justify-center border-4 border-yellow-600 transform hover:scale-110 transition-transform">
-                <div class="w-10 h-10 bg-white rounded-full border-2 border-gray-800 flex items-center justify-center">
-                  <div class="w-6 h-6 bg-yellow-600 rounded-full"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Right Side - Family Photo -->
-          <div class="flex-1">
-            <div class="relative w-full max-w-md mx-auto">
-              <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl">
-                <img :src="familyPhoto || '/assets/img/family-placeholder.jpg'" 
-                     :alt="parentNames"
-                     class="w-full h-80 object-cover rounded-2xl shadow-lg">
-              </div>
-              
-              <!-- Decorative minion -->
-              <div class="absolute -bottom-2 -left-2">
-                <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
-                  <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </section>
-
-    </main>
+  <div class="space-y-24">
+    <Introduction
+      :age="age"
+      :childName="childName"
+      :childOrder="childOrder"
+      :parentNames="parentNames"
+      :childPhoto="childPhoto"
+    />
+    <Event />
+    <Gallery />
+    <GuestBook />
+    <ThankYou />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import Introduction from './Introduction.vue'
+import Event from './Event.vue'
+import Gallery from './Gallery.vue'
+import GuestBook from './GuestBook.vue'
+import ThankYou from './ThankYou.vue'
 
-// Props/Data yang bisa diisi dari parent atau API
-const childName = ref('Rayyanza Malik Ahmad')
-const age = ref(4)
-const childOrder = ref(2)
-const parentNames = ref('Raffi Ahmad & Nagita Slavina')
-const guestName = ref('Gempita Nora Marten')
-const eventDay = ref('MINGGU')
-const eventDate = ref('11 JUNI 2025')
-const eventTime = ref('11.00 WITA S.D SELESAI')
-const eventLocation = ref('Jalan Andara No.17 Cilandak Pondok Labu, DKI Jakarta Green Andara Residence')
-
-// Photos
-const childPhoto = ref('')
-const familyPhoto = ref('')
-const galleryPhotos = ref([
-  '/assets/img/gallery1.jpg',
-  '/assets/img/gallery2.jpg',
-  '/assets/img/gallery3.jpg',
-  '/assets/img/gallery4.jpg',
-  '/assets/img/gallery5.jpg',
-  '/assets/img/gallery6.jpg'
-])
-
-// State management
-const currentSection = ref('landing')
-const isPlaying = ref(false)
-
-// Countdown timer
-const countdown = reactive({
-  days: 0,
-  hours: 0,
-  minutes: 0,
-  seconds: 0
-})
-
-// Guest message form
-const guestMessage = reactive({
-  name: '',
-  message: '',
-  attendance: 'yes'
-})
-
-// Messages list
-const messages = ref([
-  {
-    id: 1,
-    name: 'Gempita',
-    message: 'Selamat ulang tahun cipung',
-    attendance: 'yes'
-  },
-  {
-    id: 2,
-    name: 'Ayu Ting Ting',
-    message: 'Selamat ulang tahun anak mama gigi',
-    attendance: 'maybe'
-  }
-])
-
-// Methods
-const openInvitation = () => {
-  currentSection.value = 'introduction'
-}
-
-const toggleMusic = () => {
-  isPlaying.value = !isPlaying.value
-  // TODO: Implement actual music toggle
-}
-
-const submitMessage = () => {
-  if (guestMessage.name && guestMessage.message) {
-    messages.value.push({
-      id: Date.now(),
-      name: guestMessage.name,
-      message: guestMessage.message,
-      attendance: guestMessage.attendance
-    })
-    
-    // Reset form
-    guestMessage.name = ''
-    guestMessage.message = ''
-    guestMessage.attendance = 'yes'
-  }
-}
-
-const getAttendanceClass = (attendance) => {
-  switch (attendance) {
-    case 'yes':
-    case 'attend':
-      return 'bg-green-500 text-white'
-    case 'no':
-      return 'bg-red-500 text-white'
-    case 'maybe':
-      return 'bg-yellow-500 text-white'
-    default:
-      return 'bg-gray-500 text-white'
-  }
-}
-
-// Countdown timer function
-const updateCountdown = () => {
-  const eventDate = new Date('2025-06-11T11:00:00')
-  const now = new Date()
-  const diff = eventDate - now
-
-  if (diff > 0) {
-    countdown.days = Math.floor(diff / (1000 * 60 * 60 * 24))
-    countdown.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
-    countdown.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
-    countdown.seconds = Math.floor((diff % (1000 * 60)) / 1000)
-  }
-}
-
-// Lifecycle
-let countdownInterval = null
-
-onMounted(() => {
-  updateCountdown()
-  countdownInterval = setInterval(updateCountdown, 1000)
-})
-
-onUnmounted(() => {
-  if (countdownInterval) {
-    clearInterval(countdownInterval)
-  }
-})
-
-// Meta
-useHead({
-  title: `${childName.value} Birthday Invitation`,
-  meta: [
-    { name: 'description', content: `Join us to celebrate ${childName.value}'s ${age.value}th birthday party!` }
-  ]
+defineProps({
+  age: Number,
+  childName: String,
+  childOrder: Number,
+  parentNames: String,
+  childPhoto: String
 })
 </script>
-
-<style scoped>
-/* Custom animations */
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-}
-
-.float-animation {
-  animation: float 3s ease-in-out infinite;
-}
-
-/* Smooth transitions */
-* {
-  transition: all 0.3s ease;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #fbbf24;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #ea580c;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #c2410c;
-}
-
-/* Custom button hover effects */
-button {
-  transition: all 0.2s ease;
-}
-
-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-button:active {
-  transform: translateY(0);
-}
-
-/* Glass morphism effect */
-.backdrop-blur-sm {
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-
-/* Responsive typography */
-@media (max-width: 768px) {
-  .text-6xl { font-size: 2.5rem; }
-  .text-5xl { font-size: 2rem; }
-  .text-4xl { font-size: 1.75rem; }
-  .text-3xl { font-size: 1.5rem; }
-}
-
-/* Custom grid for gallery */
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-@media (min-width: 768px) {
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-/* Loading animation for images */
-img {
-  transition: opacity 0.3s ease;
-}
-
-img[src=""], img:not([src]) {
-  opacity: 0;
-}
-
-/* Custom yellow gradient */
-.bg-gradient-to-br {
-  background-image: linear-gradient(to bottom right, #fcd34d, #f59e0b, #d97706);
-}
-
-/* Minion eye animation */
-@keyframes blink {
-  0%, 90%, 100% { transform: scaleY(1); }
-  95% { transform: scaleY(0.1); }
-}
-
-.minion-eye {
-  animation: blink 3s ease-in-out infinite;
-}
-
-/* Party confetti effect */
-@keyframes confetti {
-  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
-  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
-}
-
-.confetti {
-  animation: confetti 3s linear infinite;
-}
-
-/* Mobile menu slide */
-.mobile-menu {
-  transform: translateY(-100%);
-  transition: transform 0.3s ease;
-}
-
-.mobile-menu.open {
-  transform: translateY(0);
-}
-
-/* Card hover effects */
-.card-hover {
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.card-hover:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-}
-
-/* Text glow effect */
-.text-glow {
-  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
-}
-
-/* Pulse animation for important elements */
-@keyframes pulse-soft {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.8; }
-}
-
-.pulse-soft {
-  animation: pulse-soft 2s ease-in-out infinite;
-}
-</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/shared/CountdownTimer.vue b/proyek-frontend/app/components/templates/wedding/CountdownTimer.vue
similarity index 100%
rename from proyek-frontend/app/components/shared/CountdownTimer.vue
rename to proyek-frontend/app/components/templates/wedding/CountdownTimer.vue
diff --git a/proyek-frontend/app/components/shared/Gallery.vue b/proyek-frontend/app/components/templates/wedding/Gallery.vue
similarity index 100%
rename from proyek-frontend/app/components/shared/Gallery.vue
rename to proyek-frontend/app/components/templates/wedding/Gallery.vue
diff --git a/proyek-frontend/app/components/shared/GuestBook.vue b/proyek-frontend/app/components/templates/wedding/GuestBook.vue
similarity index 100%
rename from proyek-frontend/app/components/shared/GuestBook.vue
rename to proyek-frontend/app/components/templates/wedding/GuestBook.vue
diff --git a/proyek-frontend/app/components/shared/Maps.vue b/proyek-frontend/app/components/templates/wedding/Maps.vue
similarity index 100%
rename from proyek-frontend/app/components/shared/Maps.vue
rename to proyek-frontend/app/components/templates/wedding/Maps.vue
diff --git a/proyek-frontend/app/components/shared/MusicPlayer.vue b/proyek-frontend/app/components/templates/wedding/MusicPlayer.vue
similarity index 100%
rename from proyek-frontend/app/components/shared/MusicPlayer.vue
rename to proyek-frontend/app/components/templates/wedding/MusicPlayer.vue
diff --git a/proyek-frontend/app/components/shared/RSVP.vue b/proyek-frontend/app/components/templates/wedding/RSVP.vue
similarity index 100%
rename from proyek-frontend/app/components/shared/RSVP.vue
rename to proyek-frontend/app/components/templates/wedding/RSVP.vue
diff --git a/proyek-frontend/app/components/templates/wedding/WeddingA.vue b/proyek-frontend/app/components/templates/wedding/WeddingA.vue
index 8031e2d..b3f4c9e 100644
--- a/proyek-frontend/app/components/templates/wedding/WeddingA.vue
+++ b/proyek-frontend/app/components/templates/wedding/WeddingA.vue
@@ -8,8 +8,9 @@
             <div class="relative text-center text-white p-8">
                 <p class="text-sm uppercase tracking-widest mb-4 animate-fade-in">The Wedding of</p>
                 <h1 class="text-5xl md:text-7xl font-serif mb-6 animate-slide-up">
-                    {{ data.bride.nickname }} & {{ data.groom.nickname }}
+                    {{ data.bride?.nickname || 'Bride' }} & {{ data.groom?.nickname || 'Groom' }}
                 </h1>
+
                 <p class="text-lg mb-8 animate-fade-in-delay">{{ formatDate(data.eventDate) }}</p>
                 <button @click="openInvitation"
                     class="px-8 py-3 bg-white text-rose-600 rounded-full font-semibold hover:bg-rose-50 transition-all duration-300 animate-pulse-slow">
@@ -424,12 +425,12 @@ import AOS from 'aos'
 import 'aos/dist/aos.css'
 
 // Import shared components
-import CountdownTimer from '~/components/shared/CountdownTimer.vue'
-import Gallery from '~/components/shared/Gallery.vue'
-import Maps from '~/components/shared/Maps.vue'
-import RSVP from '~/components/shared/RSVP.vue'
-import GuestBook from '~/components/shared/GuestBook.vue'
-import MusicPlayer from '~/components/shared/MusicPlayer.vue'
+import CountdownTimer from '~/components/templates/wedding/CountdownTimer.vue'
+import Gallery from '~/components/templates/wedding/Gallery.vue'
+import Maps from '~/components/templates/wedding/Maps.vue'
+import RSVP from '~/components/templates/wedding/RSVP.vue'
+import GuestBook from '~/components/templates/wedding/GuestBook.vue'
+import MusicPlayer from '~/components/templates/wedding/MusicPlayer.vue'
 
 // Props untuk menerima data dari parent/API
 const props = defineProps({
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue b/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue
new file mode 100644
index 0000000..0f7323c
--- /dev/null
+++ b/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue
@@ -0,0 +1,154 @@
+<!-- components/undangan/undangan-khitan-premium.vue -->
+<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('say')" :class="navClass('say')">Guest Book</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>
+    </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 -->
+      <KhitanA
+        v-if="currentSection === 'landing'"
+        :childName="formData.nama_panggilan"
+        :guestName="data.nama_tamu"
+        @next-page="switchSection('introduction')"
+      />
+
+      <!-- Introduction -->
+      <KhitanIntroduction
+        v-if="currentSection === 'introduction'"
+        :childName="formData.nama_lengkap"
+        :parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
+        :childOrder="formData.anak_ke"
+        :childPhoto="`${backendUrl}/${formData.foto_1}`"
+        :age="formData.umur_yang_dirayakan"
+      />
+
+      <!-- Event -->
+      <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"
+      />
+
+      <!-- Gallery -->
+      <KhitanGallery
+        v-if="currentSection === 'gallery'"
+        :images="galleryImages"
+      />
+
+      <!-- Guest Book -->
+      <KhitanSay
+        v-if="currentSection === 'say'"
+        :guestName="data.nama_tamu"
+        :messages="messages"
+        @addMessage="addMessage"
+      />
+
+      <!-- Thank You -->
+      <KhitanThankYou
+        v-if="currentSection === 'thanks'"
+        :childName="formData.nama_panggilan"
+        :jsonData="formData"
+      />
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRuntimeConfig } from '#app'
+
+// ================== IMPORT KOMPONEN ==================
+import KhitanA from '~/components/templates/khitan/KhitanA.vue'
+import KhitanIntroduction from '~/components/templates/khitan/Introduction.vue'
+import KhitanEvent from '~/components/templates/khitan/Event.vue'
+import KhitanGallery from '~/components/templates/khitan/Gallery.vue'
+import KhitanSay from '~/components/templates/khitan/GuestBook.vue'
+import KhitanThankYou from '~/components/templates/khitan/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(() => {
+  return [
+    formData.value.foto_1,
+    formData.value.foto_2,
+    formData.value.foto_3,
+    formData.value.foto_4,
+    formData.value.foto_5
+  ]
+    .filter(Boolean)
+    .map(f => `${backendUrl}/${f}`)
+})
+
+// ================== NAVIGASI SECTION ==================
+const currentSection = ref('landing')
+const switchSection = (s) => (currentSection.value = s)
+
+// ================== MUSIK ==================
+const isPlaying = ref(false)
+const toggleMusic = () => (isPlaying.value = !isPlaying.value)
+
+// ================== GUEST BOOK ==================
+const messages = ref([])
+const addMessage = (msg) => messages.value.push(msg)
+
+// ================== STYLE NAV ==================
+const navClass = (s) =>
+  currentSection.value === s
+    ? 'text-blue-800 underline'
+    : 'hover:text-blue-700'
+</script>
+
+<style scoped>
+/* Animasi transisi antar section */
+main {
+  transition: all 0.7s ease-in-out;
+}
+</style>
diff --git a/proyek-frontend/app/components/undangan/undangan-pernikahan-premium.vue b/proyek-frontend/app/components/undangan/undangan-pernikahan-premium.vue
new file mode 100644
index 0000000..af273a1
--- /dev/null
+++ b/proyek-frontend/app/components/undangan/undangan-pernikahan-premium.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <!-- Pastikan data sudah ada -->
+    <WeddingA v-if="props.data" :data="formattedData" />
+    <div v-else class="text-center py-20">
+      <p class="text-red-600 font-semibold">Undangan tidak ditemukan 😢</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import WeddingA from '~/components/templates/wedding/weddingA.vue'
+
+// Props dari parent (/p/[code].vue)
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+})
+
+// Format data dari backend agar cocok dengan struktur WeddingA.vue
+const formattedData = computed(() => {
+  const f = props.data.form || {}
+
+  return {
+    id: props.data.id,
+    coverImage: f.cover_image || '/default-cover.jpg',
+    heroImage: f.hero_image || '/default-hero.jpg',
+    greeting: f.say_something || 'Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Anda...',
+    eventDate: f.hari_tanggal_resepsi,
+    bride: {
+      fullname: f.nama_lengkap_wanita,
+      nickname: f.nama_panggilan_wanita,
+      photo: f.foto_wanita ? `http://localhost:8000/storage/${f.foto_wanita}` : '/wanita.jpg',
+      fatherName: f.nama_ayah_wanita,
+      motherName: f.nama_ibu_wanita,
+      instagram: f.instagram_wanita || ''
+    },
+    groom: {
+      fullname: f.nama_lengkap_pria,
+      nickname: f.nama_panggilan_pria,
+      photo: f.foto_pria ? `http://localhost:8000/storage/${f.foto_pria}` : '/pria.jpg',
+      fatherName: f.nama_ayah_pria,
+      motherName: f.nama_ibu_pria,
+      instagram: f.instagram_pria || ''
+    },
+    akad: {
+      date: f.hari_tanggal_akad,
+      time: f.waktu_akad,
+      place: f.tempat_akad,
+      address: f.alamat_akad,
+      mapUrl: f.link_gmaps_akad
+    },
+    resepsi: {
+      date: f.hari_tanggal_resepsi,
+      time: f.waktu_resepsi,
+      place: f.tempat_resepsi,
+      address: f.alamat_resepsi,
+      mapUrl: f.link_gmaps_resepsi
+    },
+    gallery: [1, 2, 3, 4, 5, 6]
+      .map(i => f[`foto_${i}`])
+      .filter(Boolean)
+      .map(x => `http://localhost:8000/storage/${x}`),
+    musicUrl: f.link_music || ''
+  }
+})
+</script>
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue
new file mode 100644
index 0000000..a85474b
--- /dev/null
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue
@@ -0,0 +1,108 @@
+<template>
+    <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 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('galeri')" :class="navClass('galeri')">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>
+            </ul>
+        </nav>
+
+        <!-- Tombol Musik -->
+        <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
+            <button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
+                {{ isPlaying ? '⏸️' : '▶️' }}
+            </button>
+        </div>
+
+        <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="`${backendUrl}/${formData.foto_1}`" />
+
+            <!-- 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 === 'galeri'" :images="galleryImages" />
+
+            <!-- Guest Book -->
+            <GuestBook v-if="currentSection === 'say'" :guestName="data.nama_tamu" :messages="messages"
+                @addMessage="addMessage" />
+
+            <!-- Thank You -->
+            <ThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
+        </main>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRuntimeConfig } from '#app'
+
+// Komponen
+import Landing from '~/components/templates/Ultah/Landing.vue'
+import Introduction from '~/components/templates/Ultah/Introduction.vue'
+import Event from '~/components/templates/Ultah/Event.vue'
+import Gallery from '~/components/templates/Ultah/Gallery.vue'
+import GuestBook from '~/components/templates/Ultah/GuestBook.vue'
+import ThankYou from '~/components/templates/Ultah/ThankYou.vue'
+
+
+// Props dari halaman /p/[code].vue
+const props = defineProps({
+    data: { type: Object, required: true }
+})
+
+// Runtime config
+const config = useRuntimeConfig()
+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(() => {
+    return [
+        formData.value.foto_1,
+        formData.value.foto_2,
+        formData.value.foto_3,
+        formData.value.foto_4,
+        formData.value.foto_5
+    ]
+        .filter(Boolean)
+        .map(f => `${backendUrl}/${f}`)
+})
+
+// Navigasi antar section
+const currentSection = ref('landing')
+const switchSection = (s) => (currentSection.value = s)
+
+// Musik
+const isPlaying = ref(false)
+const toggleMusic = () => (isPlaying.value = !isPlaying.value)
+
+// Buku tamu
+const messages = ref([])
+const addMessage = (msg) => messages.value.push(msg)
+
+// Dummy countdown (bisa diganti dinamis nanti)
+const countdown = ref({ days: 3, hours: 12, minutes: 45, seconds: 20 })
+
+// Style untuk navigasi aktif
+const navClass = (s) => (currentSection.value === s ? 'text-orange-700 underline' : 'hover:text-orange-600')
+</script>
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
index 2a93276..aaa4efb 100644
--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+  <div class="w-full min-h--screen bg-gray-100">
+   
+
     <!-- Loading State -->
     <div v-if="pending" class="text-center">
       <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-blue-500 mx-auto"></div>
@@ -8,12 +10,16 @@
 
     <!-- Error State -->
     <div v-else-if="error || !data" class="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
-      <svg class="w-12 h-12 mx-auto text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+      <svg class="w-12 h-12 mx-auto text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+        </path>
       </svg>
       <p class="text-lg font-semibold text-gray-800 mb-2">Undangan Tidak Ditemukan</p>
       <p class="text-gray-600 mb-6">Maaf, undangan yang Anda cari tidak tersedia atau sudah tidak berlaku.</p>
-      <NuxtLink to="/" class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
+      <NuxtLink to="/"
+        class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
         Kembali ke Beranda
       </NuxtLink>
     </div>
@@ -50,7 +56,10 @@ const { data, pending, error } = await useAsyncData(
   async () => {
     try {
       const response = await $fetch(`${backendUrl}/api/pelanggans/code/${route.params.code}`)
-      
+      console.log('✅ API response:', response)
+      console.log('🧾 response.data:', response.data)
+      console.log('🧩 Template data:', response.data?.template)
+      console.log('🔖 Template slug:', response.data?.template?.slug)
       // Check if the API response indicates failure
       if (!response.success) {
         throw createError({
@@ -75,7 +84,7 @@ const { data, pending, error } = await useAsyncData(
       if (err.statusCode) {
         throw err
       }
-      
+
       throw createError({
         statusCode: err.statusCode || 500,
         message: 'Undangan tidak ditemukan',
@@ -94,6 +103,12 @@ const { data, pending, error } = await useAsyncData(
 
 const componentMap = {
   'undangan-minimalis': defineAsyncComponent(() => import('~/components/undangan/undangan-minimalis.vue')),
+  'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
+  'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
+  'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
+  
+
+
   // Add more mappings as templates are developed
 }
 
@@ -102,13 +117,21 @@ const dynamicComponent = computed(() => {
   return componentMap[data.value.template.slug] || null
 })
 
+// === DEBUG WATCHER ===
+watchEffect(() => {
+  if (data.value) {
+    console.log('📦 Template slug:', data.value?.template?.slug)
+    console.log('🧩 Dynamic component:', dynamicComponent.value)
+  }
+})
+
 // Set meta tags only if data exists
 useHead(() => ({
   title: data.value?.nama_pemesan || 'Undangan Tak Bernama',
   meta: [
-    { 
-      name: 'description', 
-      content: data.value 
+    {
+      name: 'description',
+      content: data.value
         ? `${data.value.nama_pemesan} mengundang Anda untuk menghadiri acara berikut!`
         : 'Undangan Digital'
     },
diff --git a/proyek-frontend/app/pages/preview/[id].vue b/proyek-frontend/app/pages/preview/[id].vue
index df23d34..f284e58 100644
--- a/proyek-frontend/app/pages/preview/[id].vue
+++ b/proyek-frontend/app/pages/preview/[id].vue
@@ -5,7 +5,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import WeddingA from '~/components/templates/wedding/WeddingA.vue'
+import WeddingA from '~/components/templates/wedding/weddingA.vue'
 
 const route = useRoute()
 const invitationData = ref(null)
diff --git a/proyek-frontend/app/pages/preview/wedding-a.vue b/proyek-frontend/app/pages/preview/wedding-a.vue
index 29af1c5..0fc4178 100644
--- a/proyek-frontend/app/pages/preview/wedding-a.vue
+++ b/proyek-frontend/app/pages/preview/wedding-a.vue
@@ -31,5 +31,5 @@
 </template>
 
 <script setup>
-import WeddingA from '~/components/templates/wedding/WeddingA.vue'
+import WeddingA from '~/components/templates/wedding/weddingA.vue'
 </script>