From f044a14fa228fd3abce8feb088d57beae865e64a Mon Sep 17 00:00:00 2001
From: MuzakkiABBAUF <muzakki.abbauftech@gmail.com>
Date: Fri, 24 Oct 2025 09:20:03 +0700
Subject: [PATCH] khitanbasic

---
 .../templates/KhitanBasic/KhitanA.vue         | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue b/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
index 9672386..399cc9d 100644
--- a/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
+++ b/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
@@ -7,9 +7,9 @@
       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%)]"
     ></div>
 
-    <!-- Kartu utama -->
+    <!-- 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"
+      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]"
     >
       <p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium">
         Undangan Khitan
@@ -28,7 +28,8 @@
 
       <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>
+          Kepada Yth.
+          <span class="font-semibold">{{ guestName || 'Tamu Undangan' }}</span>
         </p>
       </div>
 
@@ -46,6 +47,20 @@
     <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>
 </template>
 
@@ -57,17 +72,26 @@ defineProps({
 </script>
 
 <style scoped>
-section {
-  animation: fadeIn 1.2s ease-in-out;
+@keyframes swing {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(4deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  75% {
+    transform: rotate(-4deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(15px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+
+.animate-swing {
+  animation: swing 4.5s ease-in-out infinite;
+  transform-origin: top center;
 }
 </style>