[Update] desain basic

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

@@ -1,29 +1,169 @@
 <template>
-  <section class="text-center space-y-4 p-6">
+  <!-- 🌄 Latar Belakang Fullscreen -->
-    <h2 class="text-3xl font-bold text-blue-700">Assalamu’alaikum Wr. Wb.</h2>
+  <section
-    <p class="text-gray-700">
+    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"
-      Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Bapak/Ibu/Saudara/i
+  >
-      untuk menghadiri acara khitanan putra kami:
+    <!-- 🌟 Bintang Berkedip -->
-    </p>
+    <div class="absolute inset-0 overflow-hidden z-0">
-    <h3 class="text-4xl font-bold text-blue-800 mt-4">{{ form.nama_lengkap }}</h3>
+      <div
-    <p class="text-lg text-gray-600 italic">({{ form.nama_panggilan }})</p>
+        v-for="(star, i) in stars"
-
+        :key="i"
-    <div class="mt-6">
+        class="absolute bg-white rounded-full animate-twinkle"
-      <p class="text-gray-700">
+        :style="{
-        Putra dari pasangan <span class="font-semibold">{{ form.nama_bapak }}</span> &
+          top: star.top + '%',
-        <span class="font-semibold">{{ form.nama_ibu }}</span>
+          left: star.left + '%',
-      </p>
+          width: star.size + 'px',
+          height: star.size + 'px',
+          animationDelay: star.delay + 's',
+          opacity: star.opacity
+        }"
+      ></div>
     </div>
 
-    <button
+    <!-- 🕌 Foto Masjid (nempel pojok kanan bawah di semua layar) -->
-      class="mt-8 bg-blue-600 text-white px-6 py-2 rounded-full shadow-md hover:bg-blue-700"
+    <img
-      @click="$emit('next')"
+      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 →
+      <h2
-    </button>
+        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>

proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue

@@ -1,97 +1,184 @@
 <template>
-  <section
+  <!-- ✅ Fullscreen Wrapper -->
-    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"
+  <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 -->
+    <!-- 🎵 Kontrol Musik -->
-    <div
+    <div class="fixed bottom-6 left-6 z-30">
-      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]"
+      <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">
+      <div
-        <p class="text-blue-800 font-medium">
+        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">{{ guestName || 'Tamu Undangan' }}</span>
+        Kepada Yth.
-        </p>
+        <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
+        Buka Undangan <span class="ml-2">📩</span>
-        <span class="ml-2">📩</span>
       </button>
-    </div>
+    </main>
-
+  </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>
 </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 {
+/* Hilangkan jarak body agar 100% penuh layar */
-  0% {
+:global(html, body, #__nuxt, #app) {
-    transform: rotate(0deg);
+  margin: 0;
-  }
+  padding: 0;
-  25% {
+  width: 100%;
-    transform: rotate(4deg);
+  height: 100%;
-  }
+  overflow: hidden;
-  50% {
-    transform: rotate(0deg);
-  }
-  75% {
-    transform: rotate(-4deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
 }
 
+/* 🌟 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>

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>