106 lines
4.6 KiB
Vue
106 lines
4.6 KiB
Vue
<template>
|
|
<div class="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-30"></div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="relative z-10 h-full flex items-center justify-center px-6">
|
|
<div class="text-center max-w-4xl mx-auto">
|
|
<!-- Title -->
|
|
<div class="mb-12 animate-fade-in-down">
|
|
<h1 class="text-yellow-400 text-4xl md:text-6xl font-bold mb-6 font-script">Terimakasih</h1>
|
|
<p class="text-white text-lg md:text-xl leading-relaxed max-w-3xl mx-auto">
|
|
Kami mengucapkan terima kasih atas kehadiran serta doa restu
|
|
yang diberikan. 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-2xl md:text-3xl font-bold mb-8">Kami Keluarga Besar Dari</h2>
|
|
<div class="space-y-6">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-yellow-400/30 animate-fade-in-up animation-delay-500">
|
|
<div class="text-yellow-400 text-lg font-semibold mb-2">
|
|
{{ data.fatherName || 'Bpk H. Munawar Huda, S.H.' }} & {{ data.motherName || 'Ibu Hj. Dinah, A.M.Keb' }}
|
|
</div>
|
|
<div class="text-white/80 text-sm">
|
|
{{ data.fatherDescription || '(Anggota DPRD Provinsi Banten Fraksi Partai Demokrat)' }}
|
|
</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-sm rounded-2xl p-8 border border-yellow-400/50">
|
|
<p class="text-white text-lg md:text-xl font-medium mb-4 italic">
|
|
"Dan Allah telah mengeluarkan kamu dari perut ibumu dalam keadaan tidak mengetahui sesuatupun..."
|
|
</p>
|
|
<p class="text-yellow-400 font-semibold">- QS. An-Nahl: 78</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social -->
|
|
<div class="mt-12 animate-fade-in-up animation-delay-1500 flex justify-center space-x-6">
|
|
<a href="https://instagram.com/abbauftech" target="_blank" rel="noopener noreferrer"
|
|
class="rounded-full p-3 backdrop-blur-sm 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-6 h-6 text-yellow-400" />
|
|
</a>
|
|
<a href="#" class="rounded-full p-3 backdrop-blur-sm 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-6 h-6 text-yellow-400" />
|
|
</a>
|
|
<a href="#" class="rounded-full p-3 backdrop-blur-sm border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110" aria-label="WhatsApp">
|
|
<Icon name="lucide:message-circle" class="w-6 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 { ref, onMounted, computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
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>");
|
|
}
|
|
|
|
/* Tambahkan animasi sesuai kebutuhan */
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 1s forwards;
|
|
}
|
|
|
|
.animate-fade-in-down {
|
|
animation: fadeInDown 1s 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); }
|
|
}
|
|
</style>
|