diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Event.vue b/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
new file mode 100644
index 0000000..49cab4e
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Event.vue
@@ -0,0 +1,34 @@
+<template>
+  <section class="text-center space-y-6 p-6">
+    <h2 class="text-3xl font-bold text-blue-700">📅 Waktu & Tempat</h2>
+
+    <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
+      >
+    </div>
+
+    <div v-if="hitung_mundur" class="mt-8">
+      <h3 class="font-semibold text-gray-700 mb-2">Hitung Mundur Menuju Acara:</h3>
+      <CountdownTimer :targetDate="hitung_mundur" />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'
+defineProps({
+  hari_tanggal_acara: String,
+  waktu: String,
+  alamat: String,
+  link_gmaps: String,
+  hitung_mundur: String
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue b/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
new file mode 100644
index 0000000..f7193e8
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Gallery.vue
@@ -0,0 +1,19 @@
+<template>
+  <section class="text-center p-6">
+    <h2 class="text-3xl font-bold text-blue-700 mb-6">📸 Galeri</h2>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
+      <img
+        v-for="(img, index) in images"
+        :key="index"
+        :src="img"
+        class="rounded-xl shadow-md hover:scale-105 transition duration-300"
+        alt="Foto Galeri"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({ images: Array })
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue b/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
new file mode 100644
index 0000000..4641b47
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanBasic/GuestBook.vue
@@ -0,0 +1,60 @@
+<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">
+      <div
+        v-for="(msg, index) in messages"
+        :key="index"
+        class="bg-white/70 p-4 rounded-lg shadow"
+      >
+        <p class="font-semibold text-blue-700">{{ msg.name }}</p>
+        <p class="text-gray-700">{{ msg.text }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  guestName: String,
+  saySomething: String,
+  messages: Array
+})
+const emit = defineEmits(['addMessage'])
+
+const guestNameInput = ref(props.guestName || '')
+const messageInput = ref('')
+
+const sendMessage = () => {
+  if (!guestNameInput.value || !messageInput.value) return
+  emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
+  messageInput.value = ''
+}
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue b/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue
new file mode 100644
index 0000000..cc4de10
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue
@@ -0,0 +1,29 @@
+<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>
+    </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')"
+    >
+      Lanjut ke Acara →
+    </button>
+  </section>
+</template>
+
+<script setup>
+defineProps({ form: Object })
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue b/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
new file mode 100644
index 0000000..9672386
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
@@ -0,0 +1,73 @@
+<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"
+  >
+    <!-- Background pattern lembut -->
+    <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%)]"
+    ></div>
+
+    <!-- Kartu utama -->
+    <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"
+    >
+      <p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium">
+        Undangan Khitan
+      </p>
+
+      <h1
+        class="text-4xl sm:text-5xl font-extrabold text-blue-700 font-serif mb-4 tracking-tight"
+      >
+        {{ childName }}
+      </h1>
+
+      <p class="text-gray-600 text-base mb-6 leading-relaxed">
+        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>
+
+      <!-- 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"
+      >
+        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>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  guestName: String
+})
+</script>
+
+<style scoped>
+section {
+  animation: fadeIn 1.2s ease-in-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue b/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
new file mode 100644
index 0000000..e2721da
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanBasic/ThankYou.vue
@@ -0,0 +1,23 @@
+<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>
+    </div>
+
+    <p class="text-gray-500 mt-8 italic">Wassalamu’alaikum Wr. Wb.</p>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  jsonData: Object
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/common/CountdownTimer.vue b/proyek-frontend/app/components/templates/common/CountdownTimer.vue
new file mode 100644
index 0000000..967bb74
--- /dev/null
+++ b/proyek-frontend/app/components/templates/common/CountdownTimer.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="text-gray-800 font-mono text-lg bg-white/60 rounded-lg px-4 py-2 inline-block">
+      {{ days }}h : {{ hours }}j : {{ minutes }}m : {{ seconds }}d
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onUnmounted } from 'vue'
+  
+  const props = defineProps({ targetDate: String })
+  
+  const days = ref(0)
+  const hours = ref(0)
+  const minutes = ref(0)
+  const seconds = ref(0)
+  
+  let timer
+  
+  const update = () => {
+    const now = new Date()
+    const target = new Date(props.targetDate)
+    const diff = target - now
+  
+    if (diff <= 0) return clearInterval(timer)
+  
+    days.value = Math.floor(diff / (1000 * 60 * 60 * 24))
+    hours.value = Math.floor((diff / (1000 * 60 * 60)) % 24)
+    minutes.value = Math.floor((diff / (1000 * 60)) % 60)
+    seconds.value = Math.floor((diff / 1000) % 60)
+  }
+  
+  onMounted(() => {
+    update()
+    timer = setInterval(update, 1000)
+  })
+  
+  onUnmounted(() => clearInterval(timer))
+  </script>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue b/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
new file mode 100644
index 0000000..cbe9093
--- /dev/null
+++ b/proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
@@ -0,0 +1,154 @@
+<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>
+        <audio ref="audioPlayer" :src="musicUrl" loop></audio>
+      </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 -->
+        <KhitanIntroductionBasic
+          v-if="currentSection === 'introduction'"
+          :form="formData"
+        />
+  
+        <!-- Event -->
+        <KhitanEventBasic
+          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 -->
+        <KhitanGalleryBasic
+          v-if="currentSection === 'gallery'"
+          :images="galleryImages"
+        />
+  
+        <!-- Guest Book -->
+        <KhitanSayBasic
+          v-if="currentSection === 'say'"
+          :guestName="data.nama_tamu"
+          :saySomething="formData.say_something"
+          :messages="messages"
+          @addMessage="addMessage"
+        />
+  
+        <!-- Thank You -->
+        <KhitanThankYouBasic
+          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/KhitanBasic/KhitanA.vue'
+  import KhitanIntroductionBasic from '~/components/templates/KhitanBasic/Introduction.vue'
+  import KhitanEventBasic from '~/components/templates/KhitanBasic/Event.vue'
+  import KhitanGalleryBasic from '~/components/templates/KhitanBasic/Gallery.vue'
+  import KhitanSayBasic from '~/components/templates/KhitanBasic/GuestBook.vue'
+  import KhitanThankYouBasic from '~/components/templates/KhitanBasic/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
+    return [
+      f.foto_1,
+      f.foto_2,
+      f.foto_3,
+      f.foto_4
+    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
+  })
+  
+  // ================== NAVIGASI SECTION ==================
+  const currentSection = ref('landing')
+  const switchSection = (s) => (currentSection.value = s)
+  
+  // ================== MUSIK ==================
+  const audioPlayer = ref(null)
+  const isPlaying = ref(false)
+  const musicUrl = computed(() =>
+    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
+  )
+  
+  const toggleMusic = () => {
+    if (!audioPlayer.value) return
+    if (isPlaying.value) {
+      audioPlayer.value.pause()
+    } else {
+      audioPlayer.value.play()
+    }
+    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>
+  main {
+    transition: all 0.7s ease-in-out;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue b/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue
new file mode 100644
index 0000000..e69de29
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
index 19f5961..9cb17ca 100644
--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -107,7 +107,8 @@ const componentMap = {
   'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
   'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
   'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
-  'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue'))
+  'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
+  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
   // Add more mappings as templates are developed
 }
 
diff --git a/proyek-frontend/app/pages/preview/[id].vue b/proyek-frontend/app/pages/preview/[id].vue
index acf8690..fc60aea 100644
--- a/proyek-frontend/app/pages/preview/[id].vue
+++ b/proyek-frontend/app/pages/preview/[id].vue
@@ -280,7 +280,8 @@ const componentMap = {
   '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-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
-  'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue'))
+  'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
+  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
   // Add more mappings as templates are developed
 }