Undangan/proyek-frontend/app/components/templates/khitan/ThankYou.vue

```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="absolute inset-0 bg-pattern opacity-20"></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">
            Terima Kasih
          </h1>
          <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>.
            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">
            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>
            </div>
          </div>
        </div>

        <!-- 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">
            <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..."
            </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>
      </div>
    </div>

    <!-- Copyright -->
    <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>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  childName: {
    type: String,
    default: ''
  },
  jsonData: {
    type: Object,
    default: () => ({})
  }
})

const currentYear = computed(() => new Date().getFullYear())
</script>

<style scoped>
/* Animations & bg-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;
}

.animate-fade-in-down {
  animation: fadeInDown 1s ease-out forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animation-delay-300 {
  animation-delay: 0.3s;
}

.animation-delay-500 {
  animation-delay: 0.5s;
}

.animation-delay-1200 {
  animation-delay: 1.2s;
}

.animation-delay-1500 {
  animation-delay: 1.5s;
}
</style>
```