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

<template>
  <div class="h-screen w-full relative bg-blue-900 overflow-hidden">
    <div class="absolute inset-0 bg-pattern opacity-30"></div>
    
    <div class="absolute top-0 left-0 w-full h-full">
      <div class="absolute top-0 left-0 w-full">
        <svg viewBox="0 0 1200 300" class="w-full h-auto">
          <defs>
            <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:#FFD700"/>
              <stop offset="50%" style="stop-color:#FFA500"/>
              <stop offset="100%" style="stop-color:#FFD700"/>
            </linearGradient>
          </defs>
          <path d="M0,150 C300,50 600,250 1200,150 L1200,0 L0,0 Z" fill="url(#goldGradient)" opacity="0.3"/>
        </svg>
      </div>
      
      <div class="absolute bottom-0 left-0 w-full">
        <svg viewBox="0 0 1200 300" class="w-full h-auto">
          <path d="M0,150 C300,250 600,50 1200,150 L1200,300 L0,300 Z" fill="url(#goldGradient)" opacity="0.3"/>
        </svg>
      </div>
    </div>

    <div class="relative z-10 h-full flex items-center justify-center px-6">
      <div class="text-center max-w-4xl mx-auto">
        <div class="mb-8 animate-fade-in-down">
          <div class="mx-auto w-32 h-32 relative">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg viewBox="0 0 100 100" class="w-full h-full text-yellow-400">
                <defs>
                  <filter id="glow">
                    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                    <feMerge> 
                      <feMergeNode in="coloredBlur"/>
                      <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                  </filter>
                </defs>
                <path d="M35 20 A 25 25 0 1 1 35 80 A 15 15 0 1 0 35 20" fill="currentColor" filter="url(#glow)"/>
                <polygon points="65,25 67,35 77,35 69,42 72,52 65,45 58,52 61,42 53,35 63,35" fill="currentColor" filter="url(#glow)"/>
              </svg>
            </div>
          </div>
        </div>

        <div class="mb-12 animate-fade-in-up animation-delay-300">
          <h1 class="text-yellow-400 text-3xl md:text-4xl font-bold mb-4 tracking-wide">
            Undangan
          </h1>
          <h2 class="text-white text-4xl md:text-6xl font-bold mb-6 font-serif">
            TASYAKURAN
          </h2>
          <h2 class="text-white text-4xl md:text-6xl font-bold mb-8 font-serif">
            KHITAN
          </h2>
        </div>

        <div class="mb-12 animate-fade-in-up animation-delay-600">
          <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 mb-6 border border-yellow-400/30">
            <p class="text-yellow-400 text-lg mb-2">{{ data?.guestTitle || 'Kepada Yth.' }}</p>
            <p class="text-white text-xl font-semibold">{{ data?.guestName || '' }}</p>
          </div>
        </div>

        <div class="animate-fade-in-up animation-delay-900">
          <button
            @click="$emit('next-page')"
            class="group relative px-8 py-4 bg-gradient-to-r from-yellow-400 to-yellow-500 text-blue-900 font-bold text-lg rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 overflow-hidden"
          >
            <div class="absolute inset-0 bg-gradient-to-r from-yellow-300 to-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            
            <span class="relative flex items-center space-x-2">
              <span>OPEN INVITATION</span>
              <Icon name="lucide:chevron-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" />
            </span>
            
            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
          </button>
        </div>

        <div class="absolute inset-0 pointer-events-none">
          <div class="absolute top-1/4 left-1/4 animate-float">
            <div class="w-2 h-2 bg-yellow-400 rounded-full opacity-60"></div>
          </div>
          <div class="absolute top-1/3 right-1/4 animate-float animation-delay-500">
            <div class="w-1 h-1 bg-yellow-300 rounded-full opacity-80"></div>
          </div>
          <div class="absolute bottom-1/3 left-1/3 animate-float animation-delay-1000">
            <div class="w-3 h-3 bg-yellow-500 rounded-full opacity-40"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="absolute top-4 left-4 w-16 h-16 border-l-2 border-t-2 border-yellow-400 opacity-50"></div>
    <div class="absolute top-4 right-4 w-16 h-16 border-r-2 border-t-2 border-yellow-400 opacity-50"></div>
    <div class="absolute bottom-4 left-4 w-16 h-16 border-l-2 border-b-2 border-yellow-400 opacity-50"></div>
    <div class="absolute bottom-4 right-4 w-16 h-16 border-r-2 border-b-2 border-yellow-400 opacity-50"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

// Props
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits(['next-page'])

// Reactive data
const isVisible = ref(false)

// Methods
const animateIn = () => {
  isVisible.value = true
}

// Lifecycle
onMounted(() => {
  setTimeout(animateIn, 100)
})
</script>

<style scoped>
/* 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="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>');
}

/* Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Animation Delays */
.animation-delay-300 {
  animation-delay: 0.3s;
  opacity: 0;
  animation-fill-mode: forwards;
}

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

.animation-delay-600 {
  animation-delay: 0.6s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.animation-delay-900 {
  animation-delay: 0.9s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

/* Custom fonts */
.font-serif {
  font-family: 'Times New Roman', serif;
}

/* Responsive */
@media (max-width: 640px) {
  .text-4xl.md\:text-6xl {
    font-size: 2.25rem;
  }
  
  .text-3xl.md\:text-4xl {
    font-size: 1.875rem;
  }
  
  .px-8 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
</style>