237 lines
7.5 KiB
Vue
237 lines
7.5 KiB
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>
|
|
|
|
<!-- Kubah Decorations -->
|
|
<div class="absolute top-0 left-8 md:left-32 w-16 md:w-34 kubah-swing animation-delay-300">
|
|
<img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
|
|
</div>
|
|
<div class="absolute top-0 right-8 md:right-22 w-16 md:w-44 kubah-swing animation-delay-600">
|
|
<img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
|
|
</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 -->
|
|
<!-- 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="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full 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="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full 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="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full 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>
|
|
|
|
<!-- Footer -->
|
|
<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>
|
|
/* =========================
|
|
🎨 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='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>");
|
|
}
|
|
|
|
/* =========================
|
|
✨ General Animations
|
|
========================= */
|
|
.animate-sway {
|
|
animation: sway 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes sway {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
/* =========================
|
|
🕌 Smooth Kubah Swing
|
|
========================= */
|
|
.kubah-swing {
|
|
animation: kubahSwingSmooth 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
@keyframes kubahSwingSmooth {
|
|
0% { transform: rotate(0deg); }
|
|
20% { transform: rotate(2.5deg); }
|
|
40% { transform: rotate(-2.5deg); }
|
|
60% { transform: rotate(2deg); }
|
|
80% { transform: rotate(-2deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
/* =========================
|
|
✨ Fade Animations
|
|
========================= */
|
|
.animate-fade-in-down {
|
|
animation: fadeInDown 1s ease-out forwards;
|
|
}
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 1s ease-out forwards;
|
|
}
|
|
.animate-fade-in-left {
|
|
animation: fadeInLeft 1s ease-out forwards;
|
|
}
|
|
.animate-fade-in-right {
|
|
animation: fadeInRight 1s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from { opacity: 0; transform: translateY(-20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
from { opacity: 0; transform: translateX(20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
/* =========================
|
|
⏱️ Delay Utilities
|
|
========================= */
|
|
.animation-delay-300 { animation-delay: 0.3s; }
|
|
.animation-delay-600 { animation-delay: 0.6s; }
|
|
.animation-delay-1000 { animation-delay: 1s; }
|
|
|
|
/* =========================
|
|
🕌 Font Arabic
|
|
========================= */
|
|
.arabic-text {
|
|
font-family: 'Noto Naskh Arabic', serif;
|
|
}
|
|
</style>
|