diff --git a/proyek-frontend/app/assets/css/main.css b/proyek-frontend/app/assets/css/main.css
index f4c1129..a1d0926 100644
--- a/proyek-frontend/app/assets/css/main.css
+++ b/proyek-frontend/app/assets/css/main.css
@@ -2,3 +2,4 @@
 html {
   scroll-behavior: smooth;
 }
+
diff --git a/proyek-frontend/app/components/templates/khitan/Event.vue b/proyek-frontend/app/components/templates/khitan/Event.vue
index cbadae1..2e13eb9 100644
--- a/proyek-frontend/app/components/templates/khitan/Event.vue
+++ b/proyek-frontend/app/components/templates/khitan/Event.vue
@@ -12,7 +12,7 @@
     </div>
 
     <!-- Main Content -->
-    <div class="relative z-10 min-h-screen flex items-center justify-center px-4 md:px-8 py-12">
+    <div class="relative z-10 min-h-screen flex items-center justify-center px-4 md:px-8 py-22">
       <div class="text-center max-w-5xl mx-auto">
         <!-- Bismillah -->
         <div class="mb-10 animate-fade-in-down">
@@ -158,17 +158,21 @@
       </div>
     </div>
 
-    <!-- Decorative Element -->
-    <div class="absolute inset-0 pointer-events-none overflow-hidden">
-      <div class="absolute top-0 left-1/2 transform -translate-x-1/2">
-        <svg viewBox="0 0 200 100" class="w-40 md:w-48 h-20 md:h-24 text-yellow-400 opacity-20">
-          <path
-            d="M100 20 Q120 0 140 20 Q160 40 140 60 Q120 40 100 60 Q80 40 60 60 Q40 40 60 20 Q80 0 100 20"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
+   <!-- Decorative Lanterns -->
+    <div class="absolute top-4 left-4 md:top-8 md:left-8 animate-sway">
+      <Lantern />
     </div>
+    <div class="absolute top-4 right-4 md:top-8 md:right-8 animate-sway animation-delay-1000">
+      <Lantern />
+    </div>
+    
+    <!-- Kubah Decorations -->
+   <div class="absolute top-0 left-8 md:left-32 w-14 md:w-34 kubah-swing animation-delay-300">
+  <img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
+</div>
+<div class="absolute top-0 right-8 md:right-22 w-14 md:w-44 kubah-swing animation-delay-600">
+  <img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
+</div>
   </div>
 </template>
 
@@ -294,11 +298,16 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* Animations & bg-pattern */
+/* =========================
+   🎨 Background Pattern
+========================= */
 .bg-pattern {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='pattern' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'><path d='M10 5 L15 10 L10 15 L5 10 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/></pattern></defs><rect width='100' height='100' fill='url(%23pattern)'/></svg>");
 }
 
+/* =========================
+   ✨ General Animations
+========================= */
 .animate-sway {
   animation: sway 3s ease-in-out infinite;
 }
@@ -308,20 +317,37 @@ onUnmounted(() => {
   50% { transform: translateY(-10px); }
 }
 
+/* =========================
+   🕌 Smooth Kubah Swing
+========================= */
+.kubah-swing {
+  animation: kubahSwingSmooth 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  transform-origin: top center;
+}
+
+@keyframes kubahSwingSmooth {
+  0% { transform: rotate(0deg); }
+  20% { transform: rotate(3deg); }
+  40% { transform: rotate(-3deg); }
+  60% { transform: rotate(3.5deg); }
+  80% { transform: rotate(-3deg); }
+  100% { transform: rotate(0deg); }
+}
+
+/* =========================
+   ✨ Fade Animations
+========================= */
 .animate-fade-in-down {
-  animation: fadeInDown 1s ease-out forwards;
+  animation: fadeInDown 0.5s ease-out forwards;
 }
-
 .animate-fade-in-up {
-  animation: fadeInUp 1s ease-out forwards;
+  animation: fadeInUp 0.5s ease-out forwards;
 }
-
 .animate-fade-in-left {
-  animation: fadeInLeft 1s ease-out forwards;
+  animation: fadeInLeft 0.5s ease-out forwards;
 }
-
 .animate-fade-in-right {
-  animation: fadeInRight 1s ease-out forwards;
+  animation: fadeInRight 0.5s ease-out forwards;
 }
 
 @keyframes fadeInDown {
@@ -344,19 +370,17 @@ onUnmounted(() => {
   to { opacity: 1; transform: translateX(0); }
 }
 
-.animation-delay-300 {
-  animation-delay: 0.3s;
-}
-
-.animation-delay-600 {
-  animation-delay: 0.6s;
-}
-
-.animation-delay-1000 {
-  animation-delay: 1s;
-}
+/* =========================
+   ⏱️ Delay Utilities
+========================= */
+.animation-delay-300 { animation-delay: 0.3s; }
+.animation-delay-600 { animation-delay: 0.6s; }
+.animation-delay-1000 { animation-delay: 0.8s; }
 
+/* =========================
+   🕌 Font Arabic
+========================= */
 .arabic-text {
   font-family: 'Noto Naskh Arabic', serif;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/proyek-frontend/app/components/templates/khitan/Gallery.vue b/proyek-frontend/app/components/templates/khitan/Gallery.vue
index 3edd620..79cc4e9 100644
--- a/proyek-frontend/app/components/templates/khitan/Gallery.vue
+++ b/proyek-frontend/app/components/templates/khitan/Gallery.vue
@@ -4,7 +4,7 @@
     <div class="absolute inset-0 bg-pattern opacity-30"></div>
 
     <!-- Main Content -->
-    <div class="relative z-10 flex flex-col items-center justify-center px-6 py-12">
+    <div class="relative z-10 flex flex-col items-center justify-center px-6 py-18">
       <!-- Gallery Title -->
       <div class="text-center mb-8 animate-fade-in-down">
         <h1 class="text-yellow-400 text-4xl md:text-5xl font-bold mb-6 font-script">
@@ -17,40 +17,20 @@
         </p>
       </div>
 
-      <!-- Photo Gallery Grid -->
-      <div class="flex-1 max-w-4xl mx-auto w-full animate-fade-in-up animation-delay-300">
-        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-          <!-- Foto pertama (besar) -->
+      <!-- ✅ Masonry-style Gallery -->
+      <div class="flex-1 max-w-5xl mx-auto w-full animate-fade-in-up animation-delay-300">
+        <div class="columns-2 md:columns-3 gap-4 space-y-4">
           <div
-            v-if="images.length > 0"
-            class="md:col-span-1 md:row-span-2 relative group cursor-pointer"
-            @click="openModal(0)"
+            v-for="(image, index) in images"
+            :key="index"
+            class="relative group break-inside-avoid cursor-pointer"
+            @click="openModal(index)"
           >
             <div class="bg-white/10 backdrop-blur-sm rounded-2xl overflow-hidden border border-yellow-400/30 hover:border-yellow-400/60 transition-all duration-300">
-              <img
-                :src="images[0]"
-                :alt="`Gallery Image 1`"
-                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                @error="handleImageError"
-              />
-              <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 flex items-center justify-center transition-colors duration-300">
-                <Icon name="lucide:zoom-in" class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-              </div>
-            </div>
-          </div>
-
-          <!-- Foto lainnya -->
-          <div
-            v-for="(image, index) in images.slice(1)"
-            :key="index + 1"
-            class="relative group cursor-pointer"
-            @click="openModal(index + 1)"
-          >
-            <div class="bg-white/10 backdrop-blur-sm rounded-xl overflow-hidden border border-yellow-400/30 hover:border-yellow-400/60 transition-all duration-300">
               <img
                 :src="image"
-                :alt="`Gallery Image ${index + 2}`"
-                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                :alt="`Gallery Image ${index + 1}`"
+                class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-300"
                 @error="handleImageError"
               />
               <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 flex items-center justify-center transition-colors duration-300">
@@ -180,4 +160,9 @@ onUnmounted(() => {
 .bg-pattern {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="islamic" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><g fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"><path d="M12.5 0 L25 12.5 L12.5 25 L0 12.5 Z M6.25 6.25 L18.75 6.25 L18.75 18.75 L6.25 18.75 Z"/><circle cx="12.5" cy="12.5" r="3"/></g></pattern></defs><rect width="100%" height="100%" fill="url(%23islamic)"/></svg>');
 }
-</style>
\ No newline at end of file
+
+/* Masonry layout fix */
+.break-inside-avoid {
+  break-inside: avoid;
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/khitan/GuestBook.vue b/proyek-frontend/app/components/templates/khitan/GuestBook.vue
index a386d80..1c2a18f 100644
--- a/proyek-frontend/app/components/templates/khitan/GuestBook.vue
+++ b/proyek-frontend/app/components/templates/khitan/GuestBook.vue
@@ -1,11 +1,12 @@
 <!-- components/shared/GuestBook.vue -->
 <template>
-  <div class="h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden">
+  <div class="min-h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-x-hidden overflow-y-auto">
+
     <!-- Background Pattern -->
     <div class="absolute inset-0 bg-pattern opacity-30"></div>
     
     <!-- Main Content -->
-    <div class="relative z-10 h-full flex items-center justify-center px-6 py-12">
+    <div class="relative z-10 h-full flex items-center justify-center px-6 py-18">
       <div class="w-full max-w-6xl mx-auto">
         
         <!-- Title -->
diff --git a/proyek-frontend/app/components/templates/khitan/Introduction.vue b/proyek-frontend/app/components/templates/khitan/Introduction.vue
index 3244bf3..e110a2a 100644
--- a/proyek-frontend/app/components/templates/khitan/Introduction.vue
+++ b/proyek-frontend/app/components/templates/khitan/Introduction.vue
@@ -2,7 +2,10 @@
   <div
     class="h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden"
   >
-   <!-- Main Content -->
+    <!-- Background Pattern -->
+    <div class="absolute inset-0 bg-pattern opacity-30"></div>
+
+    <!-- Main Content -->
     <div class="relative z-10 min-h-screen flex items-center justify-center px-4 md:px-8 py-12">
       <div class="text-center max-w-4xl mx-auto">
         <!-- Title -->
@@ -11,49 +14,44 @@
             Introduction
           </h1>
         </div>
-        
 
-    <!-- Background Pattern -->
-    <div class="absolute inset-0 bg-pattern opacity-30"></div>
+        <!-- Child Section -->
+        <div class="relative z-10 h-full flex flex-col items-center justify-center px-6 text-center">
+          <!-- Child Photo -->
+          <div class="w-68 h-80 overflow-hidden rounded-t-3xl mx-auto mb-[-20px] shadow-lg">
+            <img
+              :src="getFullPhotoUrl(childPhoto)"
+              alt="Child"
+              class="w-full h-full object-cover"
+            />
+          </div>
 
-    <!-- Main Content -->
-    <div
-      class="relative z-10 h-full flex flex-col items-center justify-center px-6 text-center"
-    >
-      <!-- Child Photo -->
-      <div class="w-48 h-60 overflow-hidden rounded-t-3xl mx-auto mb-6 shadow-lg">
-        <img
-          :src="getFullPhotoUrl(childPhoto)"
-          alt="Child"
-          class="w-full h-full object-cover"
-        />
-      </div>
+<!-- Child Name with nickname.png background (Tailwind version) -->
+<div
+  class="relative mb-0 inline-flex items-center justify-center w-[420px] h-[110px] bg-[url('/nickname.png')] bg-contain bg-no-repeat bg-center"
+>
+  <h1 class="text-yellow-400 font-bold text-xl md:text-2xl font-script drop-shadow-lg">
+    {{ form.nama_lengkap || 'Nama Anak' }}
+  </h1>
+</div>
 
-      <!-- Child Name -->
-      <div
-        class="bg-blue-800/50 border border-yellow-400 rounded-md px-6 py-2 mb-4 inline-block"
-      >
-        <h1 class="text-yellow-400 font-bold text-xl">
-          {{ form.nama_lengkap || 'Nama Anak' }}
-        </h1>
-      </div>
 
-      <!-- Child Order -->
-      <div v-if="form.anak_ke" class="text-white/80 text-lg mb-2">
-        Putra ke {{ form.anak_ke }} dari
-      </div>
-      <div v-else class="text-white/80 text-lg mb-2">
-        Putra dari
-      </div>
+          <!-- Child Order -->
+          <div v-if="form.anak_ke" class="text-white/80 text-lg mb-2">
+            Putra ke {{ form.anak_ke }} dari
+          </div>
+          <div v-else class="text-white/80 text-lg mb-2">
+            Putra dari
+          </div>
 
-      <!-- Parents -->
-      <div class="text-yellow-400 font-semibold text-xl">
-        {{ form.nama_bapak || 'Nama Ayah' }} & {{ form.nama_ibu || 'Nama Ibu' }}
+          <!-- Parents -->
+          <div class="text-yellow-400 font-semibold text-xl">
+            {{ form.nama_bapak || 'Nama Ayah' }} & {{ form.nama_ibu || 'Nama Ibu' }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  </div>
-        </div>
 </template>
 
 <script setup>
@@ -89,4 +87,20 @@ const getFullPhotoUrl = (photo) => {
 .bg-pattern {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="islamic" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><g fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"><path d="M12.5 0 L25 12.5 L12.5 25 L0 12.5 Z M6.25 6.25 L18.75 6.25 L18.75 18.75 L6.25 18.75 Z"/><circle cx="12.5" cy="12.5" r="3"/></g></pattern></defs><rect width="100%" height="100%" fill="url(%23islamic)"/></svg>');
 }
+
+/* Efek animasi halus muncul dari atas */
+@keyframes fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-down {
+  animation: fade-in-down 1s ease-out;
+}
 </style>
diff --git a/proyek-frontend/app/components/templates/khitan/ThankYou.vue b/proyek-frontend/app/components/templates/khitan/ThankYou.vue
index 0fd4d47..9083d3a 100644
--- a/proyek-frontend/app/components/templates/khitan/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/khitan/ThankYou.vue
@@ -1,33 +1,55 @@
-```vue
 <template>
-  <div class="min-h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden">
-    <!-- Background Pattern -->
+  <div
+    class="min-h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden"
+  >
+    <!-- 🌙 Background Pattern -->
     <div class="absolute inset-0 bg-pattern opacity-20"></div>
 
-    <!-- Main Content -->
+  <!-- Kubah Decorations -->
+   <div class="absolute top-0 left-8 md:left-32 w-16 md:w-34 kubah-swing animation-delay-300">
+  <img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
+</div>
+<div class="absolute top-0 right-8 md:right-22 w-16 md:w-44 kubah-swing animation-delay-600">
+  <img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
+</div>
+
+    <!-- 🌸 Main Content -->
     <div class="relative z-10 min-h-screen flex items-center justify-center px-4 md:px-8 py-12">
       <div class="text-center max-w-4xl mx-auto">
         <!-- Title -->
         <div class="mb-10 animate-fade-in-down">
-          <h1 class="text-yellow-400 text-3xl md:text-5xl lg:text-6xl font-bold mb-4 md:mb-6 font-script">
+          <h1
+            class="text-yellow-400 text-3xl md:text-5xl lg:text-6xl font-bold mb-4 md:mb-6 font-script"
+          >
             Terima Kasih
           </h1>
-          <p class="text-white text-sm md:text-base lg:text-lg leading-relaxed max-w-3xl mx-auto">
+          <p
+            class="text-white text-sm md:text-base lg:text-lg leading-relaxed max-w-3xl mx-auto"
+          >
             Kami mengucapkan terima kasih atas kehadiran serta doa restu yang diberikan untuk
-            <span class="text-yellow-400 font-semibold">{{ jsonData.nama_panggilan || 'putra kami' }}</span>.
+            <span class="text-yellow-400 font-semibold">{{
+              jsonData.nama_panggilan || "putra kami"
+            }}</span>.
             Semoga Allah SWT senantiasa melimpahkan rahmat dan keberkahan kepada kita semua.
           </p>
         </div>
 
         <!-- Family Info -->
         <div class="mb-12 animate-fade-in-up animation-delay-300">
-          <h2 class="text-yellow-400 text-xl md:text-2xl lg:text-3xl font-bold mb-6 md:mb-8">
+          <h2
+            class="text-yellow-400 text-xl md:text-2xl lg:text-3xl font-bold mb-6 md:mb-8"
+          >
             Kami Keluarga Besar Dari
           </h2>
           <div class="space-y-4 md:space-y-6">
-            <div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 md:p-6 border border-yellow-400/30 shadow-lg animate-fade-in-up animation-delay-500">
-              <div class="text-yellow-400 text-base md:text-lg font-semibold mb-2">
-                {{ jsonData.nama_bapak || 'Bpk H. Munawar Huda, S.H.' }} & {{ jsonData.nama_ibu || 'Ibu Hj. Dinah, A.M.Keb' }}
+            <div
+              class="bg-white/10 backdrop-blur-md rounded-2xl p-4 md:p-6 border border-yellow-400/30 shadow-lg animate-fade-in-up animation-delay-500"
+            >
+              <div
+                class="text-yellow-400 text-base md:text-lg font-semibold mb-2"
+              >
+                {{ jsonData.nama_bapak || "Bpk H. Munawar Huda, S.H." }} &
+                {{ jsonData.nama_ibu || "Ibu Hj. Dinah, A.M.Keb" }}
               </div>
             </div>
           </div>
@@ -35,91 +57,147 @@
 
         <!-- Final Message -->
         <div class="animate-fade-in-up animation-delay-1200">
-          <div class="bg-gradient-to-r from-yellow-400/20 to-yellow-600/20 backdrop-blur-md rounded-2xl p-6 md:p-8 border border-yellow-400/50 shadow-lg">
+          <div
+            class="bg-gradient-to-r from-yellow-400/20 to-yellow-600/20 backdrop-blur-md rounded-2xl p-6 md:p-8 border border-yellow-400/50 shadow-lg"
+          >
             <p class="text-white text-base md:text-lg font-medium mb-4 italic">
-              "Dan Allah telah mengeluarkan kamu dari perut ibumu dalam keadaan tidak mengetahui sesuatupun..."
+              "Dan Allah telah mengeluarkan kamu dari perut ibumu dalam keadaan
+              tidak mengetahui sesuatupun..."
+            </p>
+            <p class="text-yellow-400 text-sm md:text-base font-semibold">
+              - QS. An-Nahl: 78
             </p>
-            <p class="text-yellow-400 text-sm md:text-base font-semibold">- QS. An-Nahl: 78</p>
           </div>
         </div>
 
         <!-- Social Media Links -->
-        <div class="mt-10 md:mt-12 animate-fade-in-up animation-delay-1500 flex justify-center space-x-4 md:space-x-6">
-          <a
-            v-if="jsonData.link_instagram"
-            :href="jsonData.link_instagram"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="rounded-full p-2 md:p-3 backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
-            aria-label="Instagram"
-          >
-            <Icon name="lucide:instagram" class="w-5 h-5 md:w-6 md:h-6 text-yellow-400" />
-          </a>
-          <a
-            v-if="jsonData.link_facebook"
-            :href="jsonData.link_facebook"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="rounded-full p-2 md:p-3 backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
-            aria-label="Facebook"
-          >
-            <Icon name="lucide:facebook" class="w-5 h-5 md:w-6 md:h-6 text-yellow-400" />
-          </a>
-          <a
-            v-if="jsonData.link_twitter"
-            :href="jsonData.link_twitter"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="rounded-full p-2 md:p-3 backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
-            aria-label="Twitter"
-          >
-            <Icon name="lucide:twitter" class="w-5 h-5 md:w-6 md:h-6 text-yellow-400" />
-          </a>
-        </div>
+ <!-- Social Media Links -->
+<div
+  class="mt-10 md:mt-12 animate-fade-in-up animation-delay-1500 flex justify-center space-x-4 md:space-x-6"
+>
+  <a
+    v-if="jsonData.link_instagram"
+    :href="jsonData.link_instagram"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
+    aria-label="Instagram"
+  >
+    <Icon
+      name="lucide:instagram"
+      class="w-5 h-5 md:w-6 md:h-6 text-yellow-400"
+    />
+  </a>
+
+  <a
+    v-if="jsonData.link_facebook"
+    :href="jsonData.link_facebook"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
+    aria-label="Facebook"
+  >
+    <Icon
+      name="lucide:facebook"
+      class="w-5 h-5 md:w-6 md:h-6 text-yellow-400"
+    />
+  </a>
+
+  <a
+    v-if="jsonData.link_twitter"
+    :href="jsonData.link_twitter"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
+    aria-label="Twitter"
+  >
+    <Icon
+      name="lucide:twitter"
+      class="w-5 h-5 md:w-6 md:h-6 text-yellow-400"
+    />
+  </a>
+</div>
+
       </div>
     </div>
 
-    <!-- Copyright -->
+    <!-- Footer -->
     <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10">
-      <p class="text-white/60 text-xs text-center">© {{ currentYear }} - Invitation Template</p>
+      <p class="text-white/60 text-xs text-center">
+        © {{ currentYear }} - Invitation Template
+      </p>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed } from "vue";
 
 const props = defineProps({
   childName: {
     type: String,
-    default: ''
+    default: "",
   },
   jsonData: {
     type: Object,
-    default: () => ({})
-  }
-})
+    default: () => ({}),
+  },
+});
 
-const currentYear = computed(() => new Date().getFullYear())
+const currentYear = computed(() => new Date().getFullYear());
 </script>
 
 <style scoped>
-/* Animations & bg-pattern */
+/* =========================
+   🎨 Background Pattern
+========================= */
 .bg-pattern {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='pattern' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'><path d='M10 5 L15 10 L10 15 L5 10 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/></pattern></defs><rect width='100' height='100' fill='url(%23pattern)'/></svg>");
 }
 
-.animate-fade-in-up {
-  animation: fadeInUp 1s ease-out forwards;
+/* =========================
+   ✨ General Animations
+========================= */
+.animate-sway {
+  animation: sway 3s ease-in-out infinite;
 }
 
+@keyframes sway {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+/* =========================
+   🕌 Smooth Kubah Swing
+========================= */
+.kubah-swing {
+  animation: kubahSwingSmooth 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  transform-origin: top center;
+}
+
+@keyframes kubahSwingSmooth {
+  0% { transform: rotate(0deg); }
+  20% { transform: rotate(2.5deg); }
+  40% { transform: rotate(-2.5deg); }
+  60% { transform: rotate(2deg); }
+  80% { transform: rotate(-2deg); }
+  100% { transform: rotate(0deg); }
+}
+
+/* =========================
+   ✨ Fade Animations
+========================= */
 .animate-fade-in-down {
   animation: fadeInDown 1s ease-out forwards;
 }
-
-@keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+.animate-fade-in-up {
+  animation: fadeInUp 1s ease-out forwards;
+}
+.animate-fade-in-left {
+  animation: fadeInLeft 1s ease-out forwards;
+}
+.animate-fade-in-right {
+  animation: fadeInRight 1s ease-out forwards;
 }
 
 @keyframes fadeInDown {
@@ -127,20 +205,32 @@ const currentYear = computed(() => new Date().getFullYear())
   to { opacity: 1; transform: translateY(0); }
 }
 
-.animation-delay-300 {
-  animation-delay: 0.3s;
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.animation-delay-500 {
-  animation-delay: 0.5s;
+@keyframes fadeInLeft {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
 }
 
-.animation-delay-1200 {
-  animation-delay: 1.2s;
+@keyframes fadeInRight {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
 }
 
-.animation-delay-1500 {
-  animation-delay: 1.5s;
+/* =========================
+   ⏱️ Delay Utilities
+========================= */
+.animation-delay-300 { animation-delay: 0.3s; }
+.animation-delay-600 { animation-delay: 0.6s; }
+.animation-delay-1000 { animation-delay: 1s; }
+
+/* =========================
+   🕌 Font Arabic
+========================= */
+.arabic-text {
+  font-family: 'Noto Naskh Arabic', serif;
 }
 </style>
-```
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue b/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue
index 5436ecd..e8dea19 100644
--- a/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue
+++ b/proyek-frontend/app/components/undangan/undangan-khitan-premium.vue
@@ -31,7 +31,6 @@
     <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"
@@ -39,37 +38,30 @@
         @next-page="switchSection('introduction')"
       />
 
-      <!-- Introduction -->
-         <KhitanIntroduction
+      <KhitanIntroduction
         v-if="currentSection === 'introduction'"
-       :form="formData"
-        />
+        :form="formData"
+      />
 
+      <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_mulai="formData.hitung_mundur_mulai"
+        :hari_tanggal_syukuran="formData.hari_tanggal_syukuran"
+        :waktu_syukuran="formData.waktu_syukuran"
+        :alamat_syukuran="formData.alamat_syukuran"
+        :link_gmaps_syukuran="formData.link_gmaps_syukuran"
+        :hitung_mundur_selesai="formData.hitung_mundur_selesai"
+      />
 
-      <!-- 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_mulai="formData.hitung_mundur_mulai"
-
-  :hari_tanggal_syukuran="formData.hari_tanggal_syukuran"
-  :waktu_syukuran="formData.waktu_syukuran"
-  :alamat_syukuran="formData.alamat_syukuran"
-  :link_gmaps_syukuran="formData.link_gmaps_syukuran"
-  :hitung_mundur_selesai="formData.hitung_mundur_selesai"
-/>
-
-
-      <!-- Gallery -->
       <KhitanGallery
         v-if="currentSection === 'gallery'"
         :images="galleryImages"
       />
 
-      <!-- Guest Book -->
       <KhitanSay
         v-if="currentSection === 'say'"
         :guestName="data.nama_tamu"
@@ -77,18 +69,18 @@
         @addMessage="addMessage"
       />
 
-      
-      <!-- Thank You -->
-            <KhitanThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
+      <KhitanThankYou
+        v-if="currentSection === 'thanks'"
+        :childName="formData.nama_panggilan"
+        :jsonData="formData"
+      />
     </main>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+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'
@@ -96,48 +88,30 @@ 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(() => {
-    const f = formData.value.foto
-
-
-    if (Array.isArray(f)) {
-        return f.map(img => `${backendUrl}/storage/${img}`)
-    }
-
-    // Jika masih bentuk lama (foto_1, foto_2, dst.)
-    return [
-        formData.value.foto_1,
-        formData.value.foto_2,
-        formData.value.foto_3,
-        formData.value.foto_4,
-        formData.value.foto_5
-    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
+  const f = formData.value.foto
+  if (Array.isArray(f)) {
+    return f.map(img => `${backendUrl}/storage/${img}`)
+  }
+  return [
+    formData.value.foto_1,
+    formData.value.foto_2,
+    formData.value.foto_3,
+    formData.value.foto_4,
+    formData.value.foto_5
+  ].filter(Boolean).map(img => `${backendUrl}/${img}`)
 })
 
-// Foto utama diambil dari foto pertama
-const mainPhoto = computed(() => {
-  const firstPhoto = formData.value.foto?.[0]
-  return firstPhoto ? `${backendUrl}/${firstPhoto}` : ''
-})
-
-// ================== NAVIGASI SECTION ==================
 const currentSection = ref('landing')
 const switchSection = (s) => (currentSection.value = s)
 
-// ================== MUSIK ==================
 const audioPlayer = ref(null)
 const isPlaying = ref(false)
 const musicUrl = computed(() =>
@@ -154,11 +128,9 @@ 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'
@@ -166,6 +138,31 @@ const navClass = (s) =>
 </script>
 
 <style scoped>
+/* Pastikan benar-benar fullscreen */
+html,
+body,
+:host,
+div[min-h-screen],
+.min-h-screen {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* Hilangkan white space akibat scroll */
+body {
+  overflow-x: hidden;
+  background: transparent;
+}
+
+/* Pastikan gradient menutup seluruh layar */
+div[min-h-screen] {
+  position: relative;
+  inset: 0;
+}
+
+/* Transisi section tetap */
 main {
   transition: all 0.7s ease-in-out;
 }
diff --git a/proyek-frontend/public/kubah.png b/proyek-frontend/public/kubah.png
new file mode 100644
index 0000000..831bec9
Binary files /dev/null and b/proyek-frontend/public/kubah.png differ
diff --git a/proyek-frontend/public/nickname.png b/proyek-frontend/public/nickname.png
new file mode 100644
index 0000000..3993ead
Binary files /dev/null and b/proyek-frontend/public/nickname.png differ