diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Event.vue b/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
index 49cab4e..3704ef7 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
@@ -1,22 +1,60 @@
 <template>
-  <section class="text-center space-y-6 p-6">
-    <h2 class="text-3xl font-bold text-blue-700">📅 Waktu & Tempat</h2>
+  <section
+    class="relative min-h-[80vh] flex flex-col items-center justify-center text-center text-white px-6 py-12 overflow-hidden"
+  >
+    <!-- 🌌 Efek Background -->
+    <div class="absolute inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 opacity-90"></div>
+    <div class="absolute w-[500px] h-[500px] bg-purple-400/20 blur-[180px] rounded-full top-1/3 left-1/2 -translate-x-1/2"></div>
+
+    <!-- 🌙 Judul -->
+    <h2
+      class="relative text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
+    >
+      📅 Waktu & Tempat
+    </h2>
+
+    <!-- 💫 Konten utama -->
+    <div
+      class="relative flex flex-col items-center space-y-6 bg-white/10 backdrop-blur-2xl border border-white/20 px-10 py-12 rounded-[3rem] shadow-[0_0_40px_rgba(255,255,255,0.1)] hover:shadow-[0_0_60px_rgba(255,255,255,0.2)] transition-all duration-700 max-w-3xl w-full sm:w-[85%] md:w-[70%] animate-fade-in-slow"
+    >
+      <div class="space-y-5 text-lg sm:text-xl font-medium text-blue-100">
+        <p class="flex flex-col items-center">
+          <span class="text-yellow-300 font-semibold flex items-center gap-2">
+            🗓️ Hari & Tanggal:
+          </span>
+          {{ hari_tanggal_acara }}
+        </p>
+
+        <p class="flex flex-col items-center">
+          <span class="text-yellow-300 font-semibold flex items-center gap-2">
+            ⏰ Waktu:
+          </span>
+          {{ waktu }}
+        </p>
+
+        <p class="flex flex-col items-center">
+          <span class="text-yellow-300 font-semibold flex items-center gap-2">
+            📍 Alamat:
+          </span>
+          {{ alamat }}
+        </p>
+      </div>
 
-    <div class="bg-white/70 rounded-2xl shadow-md p-6 max-w-lg mx-auto space-y-3">
-      <p><strong>Hari & Tanggal:</strong> {{ hari_tanggal_acara }}</p>
-      <p><strong>Waktu:</strong> {{ waktu }}</p>
-      <p><strong>Alamat:</strong> {{ alamat }}</p>
       <a
         v-if="link_gmaps"
         :href="link_gmaps"
         target="_blank"
-        class="text-blue-600 underline"
-        >Lihat di Google Maps</a
+        class="mt-4 inline-flex items-center justify-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-8 py-3 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
       >
+        🗺️ Lihat di Google Maps
+      </a>
     </div>
 
-    <div v-if="hitung_mundur" class="mt-8">
-      <h3 class="font-semibold text-gray-700 mb-2">Hitung Mundur Menuju Acara:</h3>
+    <!-- ⏳ Hitung Mundur -->
+    <div v-if="hitung_mundur" class="relative mt-12 text-center animate-fade-in-delay">
+      <h3 class="font-semibold text-yellow-300 mb-3 text-lg sm:text-xl">
+        Hitung Mundur Menuju Acara:
+      </h3>
       <CountdownTimer :targetDate="hitung_mundur" />
     </div>
   </section>
@@ -24,6 +62,7 @@
 
 <script setup>
 import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'
+
 defineProps({
   hari_tanggal_acara: String,
   waktu: String,
@@ -32,3 +71,36 @@ defineProps({
   hitung_mundur: String
 })
 </script>
+
+<style scoped>
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in { animation: fade-in 1s ease-out; }
+
+@keyframes fade-in-slow {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.animate-fade-in-slow { animation: fade-in-slow 1.3s ease-out; }
+
+@keyframes fade-in-delay {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in-delay { animation: fade-in-delay 1.8s ease-out; }
+
+@media (max-width: 640px) {
+  section {
+    padding: 3rem 1.2rem;
+  }
+  h2 {
+    font-size: 1.9rem;
+  }
+  .max-w-3xl {
+    padding: 1.5rem;
+    border-radius: 2rem;
+  }
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue b/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
index f7193e8..88455b7 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
@@ -1,19 +1,159 @@
 <template>
-  <section class="text-center p-6">
-    <h2 class="text-3xl font-bold text-blue-700 mb-6">📸 Galeri</h2>
+  <section
+    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
+  >
+    <!-- 🌟 Bintang & Partikel -->
+    <div class="absolute inset-0 overflow-hidden z-0">
+      <div
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
+    </div>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
-      <img
+    <!-- 🌈 Aurora / Cahaya -->
+    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
+
+    <!-- ☁️ Awan lembut -->
+    <div class="absolute bottom-10 left-[-100px] w-[300px] h-[120px] bg-white/10 rounded-full blur-2xl animate-cloud-slow"></div>
+    <div class="absolute top-20 right-[-120px] w-[350px] h-[150px] bg-white/10 rounded-full blur-3xl animate-cloud-medium"></div>
+
+    <!-- 📸 Judul -->
+    <h2
+      class="relative z-10 text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
+    >
+      📸 Galeri
+    </h2>
+
+    <!-- 🖼️ Grid Galeri -->
+    <div
+      class="relative z-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto px-6 sm:px-8 animate-fade-in-slow"
+    >
+      <div
         v-for="(img, index) in images"
         :key="index"
-        :src="img"
-        class="rounded-xl shadow-md hover:scale-105 transition duration-300"
-        alt="Foto Galeri"
-      />
+        class="group relative overflow-hidden rounded-3xl shadow-[0_0_30px_rgba(255,255,255,0.15)] hover:shadow-[0_0_60px_rgba(255,255,255,0.25)] transition-all duration-700"
+      >
+        <!-- 🌠 Efek cahaya bawah -->
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition duration-500"
+        ></div>
+
+        <!-- 🖼️ Gambar -->
+        <img
+          :src="img"
+          alt="Foto Galeri"
+          class="w-full h-full object-cover rounded-3xl transform group-hover:scale-110 transition-all duration-700"
+        />
+      </div>
     </div>
   </section>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 defineProps({ images: Array })
+
+// 🌟 Generate bintang acak
+const stars = ref([])
+
+const generateStars = () => {
+  const count = 70
+  const temp = []
+  for (let i = 0; i < count; i++) {
+    temp.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = temp
+}
+
+onMounted(() => generateStars())
 </script>
+
+<style scoped>
+/* ✨ Efek Fade In */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fade-in 1.2s ease-out;
+}
+
+@keyframes fade-in-slow {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.animate-fade-in-slow {
+  animation: fade-in-slow 1.5s ease-out;
+}
+
+/* 🌟 Animasi bintang berkedip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* ☁️ Animasi awan lembut */
+@keyframes cloud-slow {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(40px); }
+  100% { transform: translateX(0); }
+}
+.animate-cloud-slow {
+  animation: cloud-slow 18s ease-in-out infinite;
+}
+
+@keyframes cloud-medium {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(-60px); }
+  100% { transform: translateX(0); }
+}
+.animate-cloud-medium {
+  animation: cloud-medium 22s ease-in-out infinite;
+}
+
+/* 📱 Responsif */
+@media (max-width: 640px) {
+  h2 {
+    font-size: 2rem;
+  }
+  .grid {
+    gap: 1.2rem;
+  }
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue b/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
index 4641b47..4271e98 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
@@ -1,47 +1,87 @@
 <template>
-  <section class="text-center p-6 max-w-lg mx-auto">
-    <h2 class="text-3xl font-bold text-blue-700 mb-6">💬 Buku Tamu</h2>
-
-    <p class="text-gray-600 mb-4">{{ saySomething }}</p>
-
-    <form @submit.prevent="sendMessage" class="space-y-3">
-      <input
-        v-model="guestNameInput"
-        type="text"
-        placeholder="Nama Anda"
-        class="w-full border rounded-lg px-4 py-2"
-        required
-      />
-      <textarea
-        v-model="messageInput"
-        rows="3"
-        placeholder="Tulis ucapan Anda..."
-        class="w-full border rounded-lg px-4 py-2"
-        required
-      ></textarea>
-      <button
-        type="submit"
-        class="bg-blue-600 text-white px-5 py-2 rounded-full shadow hover:bg-blue-700"
-      >
-        Kirim
-      </button>
-    </form>
-
-    <div v-if="messages.length" class="mt-8 text-left space-y-4">
+  <!-- 🌌 Latar belakang fullscreen -->
+  <section
+    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
+  >
+    <!-- 🌟 Bintang Berkedip -->
+    <div class="absolute inset-0 overflow-hidden z-0">
       <div
-        v-for="(msg, index) in messages"
-        :key="index"
-        class="bg-white/70 p-4 rounded-lg shadow"
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
+    </div>
+
+    <!-- 🌈 Cahaya lembut -->
+    <div class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
+
+    <!-- 💬 Konten utama -->
+    <div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
+      <h2 class="text-4xl font-extrabold text-yellow-300 drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
+        💬 Buku Tamu
+      </h2>
+
+      <p class="text-blue-100">{{ saySomething }}</p>
+
+      <!-- 📝 Form -->
+      <form
+        @submit.prevent="sendMessage"
+        class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
       >
-        <p class="font-semibold text-blue-700">{{ msg.name }}</p>
-        <p class="text-gray-700">{{ msg.text }}</p>
+        <input
+          v-model="guestNameInput"
+          type="text"
+          placeholder="Nama Anda"
+          class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
+          required
+        />
+        <textarea
+          v-model="messageInput"
+          rows="3"
+          placeholder="Tulis ucapan Anda..."
+          class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
+          required
+        ></textarea>
+
+        <button
+          type="submit"
+          class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105"
+        >
+          Kirim ✨
+        </button>
+      </form>
+
+      <!-- 💌 Pesan -->
+      <div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
+        <transition-group name="fade" tag="div">
+          <div
+            v-for="(msg, index) in messages"
+            :key="index"
+            class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
+          >
+            <p class="font-semibold text-yellow-300">{{ msg.name }}</p>
+            <p class="text-blue-100">{{ msg.text }}</p>
+          </div>
+        </transition-group>
       </div>
     </div>
+
+    <!-- 🌠 Ornamen bawah -->
+    <div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent"></div>
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+
 const props = defineProps({
   guestName: String,
   saySomething: String,
@@ -52,9 +92,80 @@ const emit = defineEmits(['addMessage'])
 const guestNameInput = ref(props.guestName || '')
 const messageInput = ref('')
 
+// 🌟 Efek bintang
+const stars = ref([])
+
+const generateStars = () => {
+  const count = 70
+  const temp = []
+  for (let i = 0; i < count; i++) {
+    temp.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = temp
+}
+
+onMounted(() => generateStars())
+
 const sendMessage = () => {
   if (!guestNameInput.value || !messageInput.value) return
   emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
   messageInput.value = ''
 }
 </script>
+
+<style scoped>
+/* 🌟 Animasi bintang berkedip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* ✨ Fade animasi */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fade-in 1.2s ease-out;
+}
+
+/* Pesan baru fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Scrollbar halus */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue b/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue
index cc4de10..8157207 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue
@@ -1,29 +1,169 @@
 <template>
-  <section class="text-center space-y-4 p-6">
-    <h2 class="text-3xl font-bold text-blue-700">Assalamu’alaikum Wr. Wb.</h2>
-    <p class="text-gray-700">
-      Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Bapak/Ibu/Saudara/i
-      untuk menghadiri acara khitanan putra kami:
-    </p>
-    <h3 class="text-4xl font-bold text-blue-800 mt-4">{{ form.nama_lengkap }}</h3>
-    <p class="text-lg text-gray-600 italic">({{ form.nama_panggilan }})</p>
-
-    <div class="mt-6">
-      <p class="text-gray-700">
-        Putra dari pasangan <span class="font-semibold">{{ form.nama_bapak }}</span> &
-        <span class="font-semibold">{{ form.nama_ibu }}</span>
-      </p>
+  <!-- 🌄 Latar Belakang Fullscreen -->
+  <section
+    class="fixed inset-0 w-screen h-screen flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
+  >
+    <!-- 🌟 Bintang Berkedip -->
+    <div class="absolute inset-0 overflow-hidden z-0">
+      <div
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
     </div>
 
-    <button
-      class="mt-8 bg-blue-600 text-white px-6 py-2 rounded-full shadow-md hover:bg-blue-700"
-      @click="$emit('next')"
+    <!-- 🕌 Foto Masjid (nempel pojok kanan bawah di semua layar) -->
+    <img
+      src="/masjid.png"
+      alt="Masjid"
+      class="absolute bottom-[-23px] right-0 
+      w-[200px] sm:w-[300px] md:w-[450px] lg:w-[600px]
+      opacity-70 pointer-events-none select-none 
+      drop-shadow-[0_0_40px_rgba(255,255,255,0.15)] animate-float z-0"
+    />
+
+    <!-- 🌟 Cahaya Tengah -->
+    <div
+      class="absolute w-[400px] sm:w-[500px] md:w-[600px] h-[400px] sm:h-[500px] md:h-[600px] bg-blue-400/25 blur-[150px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+    ></div>
+
+    <!-- 💫 Bingkai Isi Undangan -->
+    <div
+      class="relative z-10 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl p-5 sm:p-8 md:p-10 max-w-sm sm:max-w-md md:max-w-2xl space-y-4 sm:space-y-5"
     >
-      Lanjut ke Acara →
-    </button>
+      <h2
+        class="text-2xl sm:text-3xl md:text-4xl font-bold text-yellow-300 drop-shadow-md leading-snug"
+      >
+        Assalamu’alaikum Wr. Wb.
+      </h2>
+
+      <p class="text-blue-100 text-sm sm:text-base leading-relaxed">
+        Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang
+        Bapak/Ibu/Saudara/i untuk menghadiri acara khitanan putra kami:
+      </p>
+
+      <h3
+        class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white drop-shadow-[0_0_20px_rgba(255,255,255,0.4)] mt-3 sm:mt-4"
+      >
+        {{ form.nama_lengkap }}
+      </h3>
+
+      <p class="text-base sm:text-lg text-blue-200 italic">
+        ({{ form.nama_panggilan }})
+      </p>
+
+      <div class="mt-4 sm:mt-6 text-blue-100 text-sm sm:text-base">
+        <p>
+          Putra dari pasangan
+          <span class="font-semibold text-yellow-300">{{
+            form.nama_bapak
+          }}</span>
+          &
+          <span class="font-semibold text-yellow-300">{{
+            form.nama_ibu
+          }}</span>
+        </p>
+      </div>
+
+      <button
+        class="mt-6 sm:mt-8 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-6 sm:px-8 py-2.5 sm:py-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105"
+        @click="$emit('next')"
+      >
+        Lanjut ke Acara →
+      </button>
+    </div>
   </section>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 defineProps({ form: Object })
+
+// 🌟 Generate bintang acak
+const stars = ref([])
+
+const generateStars = () => {
+  const count = 70
+  const temp = []
+  for (let i = 0; i < count; i++) {
+    temp.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = temp
+}
+
+onMounted(() => {
+  generateStars()
+})
 </script>
+
+<style scoped>
+/* ✨ Efek Fade-In */
+@keyframes fadein {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+section {
+  animation: fadein 1.2s ease-out;
+}
+
+/* 🌟 Animasi Bintang Berkedip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* 🕌 Animasi Masjid Floating */
+@keyframes float {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* 📱 Responsif Tambahan */
+@media (max-width: 640px) {
+  img[alt='Masjid'] {
+    opacity: 0.45;
+    width: 300px;
+    bottom: -15px;
+    right: 0;
+  }
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue b/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
index 399cc9d..ca8b853 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
@@ -1,97 +1,184 @@
 <template>
-  <section
-    class="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-white via-blue-50 to-blue-100 text-gray-800 px-6 py-12 overflow-hidden"
+  <!-- ✅ Fullscreen Wrapper -->
+  <div
+    class="fixed inset-0 w-screen h-screen flex flex-col items-center justify-center text-center overflow-hidden text-white bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
   >
-    <!-- Background pattern lembut -->
+    <!-- 🕌 Lentera Kiri (lebih besar + responsif) -->
+    <img
+      src="/bagoyang.png"
+      alt="Lentera kiri"
+      class="absolute -top-10 sm:-top-20 left-[-60px] w-[420px] sm:w-[550px] md:w-[700px] lg:w-[850px] animate-swing origin-top pointer-events-none"
+    />
+
+    <!-- 🕌 Lentera Kanan (lebih besar + responsif + mirror) -->
+    <img
+      src="/bagoyang.png"
+      alt="Lentera kanan"
+      class="absolute -top-10 sm:-top-20 right-[-60px] w-[420px] sm:w-[550px] md:w-[700px] lg:w-[850px] animate-swing origin-top scale-x-[-1] pointer-events-none"
+    />
+
+    <!-- 🌟 Bintang -->
+    <div class="absolute inset-0 overflow-hidden">
+      <div
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
+    </div>
+
+    <!-- 🌌 Cahaya Tengah -->
     <div
-      class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(147,197,253,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(191,219,254,0.3),transparent_50%)]"
+      class="absolute w-[700px] h-[700px] bg-blue-400/25 blur-[180px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
     ></div>
 
-    <!-- Kartu utama dengan background masjid diperbesar -->
-    <div
-      class="relative bg-white/90 backdrop-blur-sm shadow-xl rounded-3xl p-8 sm:p-12 max-w-2xl text-center border border-blue-100 z-10 bg-[url('/masjid.png')] bg-no-repeat bg-top bg-[length:120%_auto]"
+    <!-- 🎵 Kontrol Musik -->
+    <div class="fixed bottom-6 left-6 z-30">
+      <button
+        @click="toggleMusic"
+        class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300"
+      >
+        {{ isPlaying ? '⏸️' : '▶️' }}
+      </button>
+      <audio ref="audioPlayer" :src="musicUrl" loop></audio>
+    </div>
+
+    <!-- ✨ Konten Utama -->
+    <main
+      class="relative z-10 flex flex-col items-center justify-center px-6 space-y-5 animate-fadein"
     >
-      <p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium">
+      <p class="uppercase tracking-widest text-sm sm:text-base text-blue-200/80">
         Undangan Khitan
       </p>
 
       <h1
-        class="text-4xl sm:text-5xl font-extrabold text-blue-700 font-serif mb-4 tracking-tight"
+        class="text-5xl sm:text-7xl md:text-8xl font-extrabold text-white drop-shadow-[0_0_25px_rgba(255,255,255,0.45)]"
       >
         {{ childName }}
       </h1>
 
-      <p class="text-gray-600 text-base mb-6 leading-relaxed">
+      <p
+        class="max-w-2xl text-blue-100/90 leading-relaxed text-sm sm:text-lg"
+      >
         Dengan penuh rasa syukur kepada Allah SWT, kami bermaksud mengundang
         Bapak/Ibu/Saudara/i untuk hadir dalam acara khitanan putra kami.
       </p>
 
-      <div class="bg-blue-50 border border-blue-100 rounded-xl py-4 px-6 mb-6">
-        <p class="text-blue-800 font-medium">
-          Kepada Yth.
-          <span class="font-semibold">{{ guestName || 'Tamu Undangan' }}</span>
-        </p>
+      <div
+        class="bg-white/10 border border-white/20 backdrop-blur-md py-3 px-8 rounded-full text-blue-100 shadow-lg mt-2"
+      >
+        Kepada Yth.
+        <span class="font-semibold text-yellow-300">{{
+          guestName || 'Tamu Undangan'
+        }}</span>
       </div>
 
-      <!-- Tombol menuju halaman berikut -->
       <button
         @click="$emit('next-page')"
-        class="inline-flex items-center justify-center bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-md hover:bg-blue-700 transition-all duration-300"
+        class="mt-8 inline-flex items-center bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105"
       >
-        Buka Undangan
-        <span class="ml-2">📩</span>
+        Buka Undangan <span class="ml-2">📩</span>
       </button>
-    </div>
-
-    <!-- Ornamen lembut di bawah -->
-    <div
-      class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-blue-200/50 to-transparent rounded-t-[100px]"
-    ></div>
-
-<!-- Ornamen kanan & kiri DI LUAR CONTAINER -->
-<img
-  src="/bagoyang.png"
-  alt="Ornamen kiri"
-  class="fixed top-[-44px] left-4 sm:left-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top pointer-events-none"
-/>
-
-<img
-  src="/bagoyang.png"
-  alt="Ornamen kanan"
-  class="fixed top-[-44px] right-4 sm:right-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top scale-x-[-1] pointer-events-none"
-/>
-
-  </section>
+    </main>
+  </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+
+// Props dari parent
 defineProps({
   childName: String,
-  guestName: String
+  guestName: String,
+  musicUrl: { type: String, default: '' }
+})
+
+// 🌟 Bintang
+const stars = ref([])
+const generateStars = () => {
+  const count = 100
+  const arr = []
+  for (let i = 0; i < count; i++) {
+    arr.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = arr
+}
+
+// 🎵 Musik
+const audioPlayer = ref(null)
+const isPlaying = ref(false)
+const toggleMusic = () => {
+  if (!audioPlayer.value) return
+  if (isPlaying.value) {
+    audioPlayer.value.pause()
+  } else {
+    audioPlayer.value.play()
+  }
+  isPlaying.value = !isPlaying.value
+}
+
+onMounted(() => {
+  generateStars()
 })
 </script>
 
 <style scoped>
-@keyframes swing {
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(4deg);
-  }
-  50% {
-    transform: rotate(0deg);
-  }
-  75% {
-    transform: rotate(-4deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
+/* Hilangkan jarak body agar 100% penuh layar */
+:global(html, body, #__nuxt, #app) {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
+/* 🌟 Bintang Berkelip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* 🎶 Lentera Bergoyang */
+@keyframes swing {
+  0% { transform: rotate(0deg); }
+  25% { transform: rotate(4deg); }
+  50% { transform: rotate(0deg); }
+  75% { transform: rotate(-4deg); }
+  100% { transform: rotate(0deg); }
+}
 .animate-swing {
-  animation: swing 4.5s ease-in-out infinite;
+  animation: swing 6s ease-in-out infinite;
   transform-origin: top center;
 }
+
+/* ✨ Fade In Konten */
+@keyframes fadein {
+  from { opacity: 0; transform: translateY(25px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fadein {
+  animation: fadein 1.2s ease-out;
+}
 </style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue b/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
index e2721da..ae2531a 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
@@ -1,23 +1,176 @@
 <template>
-  <section class="text-center p-6">
-    <h2 class="text-3xl font-bold text-blue-700">Terima Kasih 💖</h2>
-    <p class="text-gray-700 mt-4">
-      Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara khitanan
-      <strong>{{ childName }}</strong>.
-    </p>
-
-    <div v-if="jsonData.rekening_1" class="mt-6">
-      <p class="font-semibold text-gray-800">💳 Rekening Hadiah</p>
-      <p class="text-blue-700">{{ jsonData.rekening_1 }}</p>
+  <!-- 🌌 Latar belakang fullscreen -->
+  <section
+    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
+  >
+    <!-- 🌟 Bintang Berkedip -->
+    <div class="absolute inset-0 overflow-hidden z-0">
+      <div
+        v-for="(star, i) in stars"
+        :key="i"
+        class="absolute bg-white rounded-full animate-twinkle"
+        :style="{
+          top: star.top + '%',
+          left: star.left + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
     </div>
 
-    <p class="text-gray-500 mt-8 italic">Wassalamu’alaikum Wr. Wb.</p>
+    <!-- 🌈 Cahaya Aurora -->
+    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
+
+    <!-- ✨ Cahaya lembut di tengah -->
+    <div class="absolute w-[600px] h-[600px] bg-yellow-200/10 blur-[250px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
+
+    <!-- 🕌 Gambar pojok kiri BESAR -->
+    <img
+      src="/kiri.png"
+      alt="Dekorasi Kiri"
+      class="absolute bottom-[-60px] left-[-80px]
+      w-[500px] sm:w-[650px] md:w-[800px] lg:w-[900px]
+      opacity-75 drop-shadow-[0_0_50px_rgba(255,255,255,0.2)]
+      pointer-events-none select-none animate-float-slow
+      blur-[0.5px]"
+    />
+
+    <!-- 💖 Isi konten -->
+    <div class="relative z-10 max-w-2xl mx-auto space-y-6 animate-fade-in">
+      <h2
+        class="text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)]"
+      >
+        Terima Kasih 💖
+      </h2>
+
+      <p class="text-blue-100 leading-relaxed text-base sm:text-lg">
+        Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara
+        khitanan <br />
+        <span class="text-yellow-300 font-bold text-xl sm:text-2xl">{{ childName }}</span>.
+      </p>
+
+      <!-- 💳 Rekening -->
+      <div
+        v-if="jsonData.rekening_1"
+        class="bg-white/10 border border-white/20 backdrop-blur-md rounded-2xl p-5 sm:p-6 max-w-md mx-auto shadow-[0_0_30px_rgba(255,255,255,0.1)]"
+      >
+        <p class="font-semibold text-yellow-300 text-lg">💳 Rekening Hadiah</p>
+        <p class="text-blue-100 mt-1">{{ jsonData.rekening_1 }}</p>
+      </div>
+
+      <p class="text-blue-200 italic mt-8 animate-fade-in-slow">
+        Wassalamu’alaikum Wr. Wb.
+      </p>
+    </div>
+
+    <!-- 💫 Ornamen bawah -->
+    <div
+      class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/20 to-transparent"
+    ></div>
   </section>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+
 defineProps({
   childName: String,
   jsonData: Object
 })
+
+// 🌟 Bintang acak
+const stars = ref([])
+
+const generateStars = () => {
+  const count = 60
+  const temp = []
+  for (let i = 0; i < count; i++) {
+    temp.push({
+      top: Math.random() * 100,
+      left: Math.random() * 100,
+      size: Math.random() * 2 + 1,
+      delay: Math.random() * 5,
+      opacity: Math.random() * 0.8 + 0.2
+    })
+  }
+  stars.value = temp
+}
+
+onMounted(() => generateStars())
 </script>
+
+<style scoped>
+/* 🌟 Animasi bintang berkedip */
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.animate-twinkle {
+  animation: twinkle 3.5s ease-in-out infinite;
+}
+
+/* 🌙 Gambar mengambang lembut */
+@keyframes float-slow {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+.animate-float-slow {
+  animation: float-slow 6s ease-in-out infinite;
+}
+
+/* ✨ Fade-in lembut */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(25px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fade-in 1.2s ease-out;
+}
+
+/* ✨ Fade-in slow untuk teks terakhir */
+@keyframes fade-in-slow {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.animate-fade-in-slow {
+  animation: fade-in-slow 1.8s ease-out;
+}
+
+/* 📱 Responsif */
+@media (max-width: 640px) {
+  img[alt="Dekorasi Kiri"] {
+    bottom: -40px;
+    left: -60px;
+    width: 400px;
+    opacity: 0.8;
+  }
+
+  h2 {
+    font-size: 2rem;
+  }
+}
+</style>
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue b/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
index 2b0b7ed..2bdba3c 100644
--- a/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
+++ b/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
@@ -21,14 +21,6 @@
         ></div>
       </div>
   
-      <!-- Bulan -->
-      <div class="absolute top-8 right-8 w-24 h-24">
-        <div class="absolute inset-0 bg-yellow-100 rounded-full shadow-lg shadow-yellow-200/50"></div>
-        <div class="absolute top-4 left-6 w-8 h-8 bg-yellow-50 rounded-full opacity-20"></div>
-        <div class="absolute bottom-6 right-4 w-6 h-6 bg-yellow-50 rounded-full opacity-30"></div>
-        <div class="absolute top-8 left-8 w-4 h-4 bg-yellow-50 rounded-full opacity-40"></div>
-      </div>
-  
       <!-- Awan dekoratif -->
       <div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
       <div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
diff --git a/proyek-frontend/public/baru.png b/proyek-frontend/public/baru.png
new file mode 100644
index 0000000..6a7c00a
Binary files /dev/null and b/proyek-frontend/public/baru.png differ
diff --git a/proyek-frontend/public/kiri.png b/proyek-frontend/public/kiri.png
new file mode 100644
index 0000000..ddd08ec
Binary files /dev/null and b/proyek-frontend/public/kiri.png differ
diff --git a/proyek-frontend/public/masjid.png b/proyek-frontend/public/masjid.png
index 8cf4e72..a7e0a47 100644
Binary files a/proyek-frontend/public/masjid.png and b/proyek-frontend/public/masjid.png differ