[Update]
This commit is contained in:
parent
38d83192c3
commit
579f1c21b5
@ -1,22 +1,60 @@
|
||||
<template>
|
||||
<section class="text-center space-y-6 p-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700">📅 Waktu & Tempat</h2>
|
||||
<section
|
||||
class="relative min-h-[80vh] flex flex-col items-center justify-center text-center text-white px-6 py-12 overflow-hidden"
|
||||
>
|
||||
<!-- 🌌 Efek Background -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 opacity-90"></div>
|
||||
<div class="absolute w-[500px] h-[500px] bg-purple-400/20 blur-[180px] rounded-full top-1/3 left-1/2 -translate-x-1/2"></div>
|
||||
|
||||
<!-- 🌙 Judul -->
|
||||
<h2
|
||||
class="relative text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
|
||||
>
|
||||
📅 Waktu & Tempat
|
||||
</h2>
|
||||
|
||||
<!-- 💫 Konten utama -->
|
||||
<div
|
||||
class="relative flex flex-col items-center space-y-6 bg-white/10 backdrop-blur-2xl border border-white/20 px-10 py-12 rounded-[3rem] shadow-[0_0_40px_rgba(255,255,255,0.1)] hover:shadow-[0_0_60px_rgba(255,255,255,0.2)] transition-all duration-700 max-w-3xl w-full sm:w-[85%] md:w-[70%] animate-fade-in-slow"
|
||||
>
|
||||
<div class="space-y-5 text-lg sm:text-xl font-medium text-blue-100">
|
||||
<p class="flex flex-col items-center">
|
||||
<span class="text-yellow-300 font-semibold flex items-center gap-2">
|
||||
🗓️ Hari & Tanggal:
|
||||
</span>
|
||||
{{ hari_tanggal_acara }}
|
||||
</p>
|
||||
|
||||
<p class="flex flex-col items-center">
|
||||
<span class="text-yellow-300 font-semibold flex items-center gap-2">
|
||||
⏰ Waktu:
|
||||
</span>
|
||||
{{ waktu }}
|
||||
</p>
|
||||
|
||||
<p class="flex flex-col items-center">
|
||||
<span class="text-yellow-300 font-semibold flex items-center gap-2">
|
||||
📍 Alamat:
|
||||
</span>
|
||||
{{ alamat }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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
|
||||
class="mt-4 inline-flex items-center justify-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-8 py-3 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
|
||||
>
|
||||
🗺️ 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>
|
||||
<!-- ⏳ Hitung Mundur -->
|
||||
<div v-if="hitung_mundur" class="relative mt-12 text-center animate-fade-in-delay">
|
||||
<h3 class="font-semibold text-yellow-300 mb-3 text-lg sm:text-xl">
|
||||
Hitung Mundur Menuju Acara:
|
||||
</h3>
|
||||
<CountdownTimer :targetDate="hitung_mundur" />
|
||||
</div>
|
||||
</section>
|
||||
@ -24,6 +62,7 @@
|
||||
|
||||
<script setup>
|
||||
import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'
|
||||
|
||||
defineProps({
|
||||
hari_tanggal_acara: String,
|
||||
waktu: String,
|
||||
@ -32,3 +71,36 @@ defineProps({
|
||||
hitung_mundur: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in { animation: fade-in 1s ease-out; }
|
||||
|
||||
@keyframes fade-in-slow {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.animate-fade-in-slow { animation: fade-in-slow 1.3s ease-out; }
|
||||
|
||||
@keyframes fade-in-delay {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in-delay { animation: fade-in-delay 1.8s ease-out; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
section {
|
||||
padding: 3rem 1.2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
.max-w-3xl {
|
||||
padding: 1.5rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,159 @@
|
||||
<template>
|
||||
<section class="text-center p-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700 mb-6">📸 Galeri</h2>
|
||||
<section
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
|
||||
>
|
||||
<!-- 🌟 Bintang & Partikel -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
|
||||
<img
|
||||
<!-- 🌈 Aurora / Cahaya -->
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
|
||||
|
||||
<!-- ☁️ Awan lembut -->
|
||||
<div class="absolute bottom-10 left-[-100px] w-[300px] h-[120px] bg-white/10 rounded-full blur-2xl animate-cloud-slow"></div>
|
||||
<div class="absolute top-20 right-[-120px] w-[350px] h-[150px] bg-white/10 rounded-full blur-3xl animate-cloud-medium"></div>
|
||||
|
||||
<!-- 📸 Judul -->
|
||||
<h2
|
||||
class="relative z-10 text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
|
||||
>
|
||||
📸 Galeri
|
||||
</h2>
|
||||
|
||||
<!-- 🖼️ Grid Galeri -->
|
||||
<div
|
||||
class="relative z-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto px-6 sm:px-8 animate-fade-in-slow"
|
||||
>
|
||||
<div
|
||||
v-for="(img, index) in images"
|
||||
:key="index"
|
||||
:src="img"
|
||||
class="rounded-xl shadow-md hover:scale-105 transition duration-300"
|
||||
alt="Foto Galeri"
|
||||
/>
|
||||
class="group relative overflow-hidden rounded-3xl shadow-[0_0_30px_rgba(255,255,255,0.15)] hover:shadow-[0_0_60px_rgba(255,255,255,0.25)] transition-all duration-700"
|
||||
>
|
||||
<!-- 🌠 Efek cahaya bawah -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition duration-500"
|
||||
></div>
|
||||
|
||||
<!-- 🖼️ Gambar -->
|
||||
<img
|
||||
:src="img"
|
||||
alt="Foto Galeri"
|
||||
class="w-full h-full object-cover rounded-3xl transform group-hover:scale-110 transition-all duration-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
defineProps({ images: Array })
|
||||
|
||||
// 🌟 Generate bintang acak
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 70
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
|
||||
onMounted(() => generateStars())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✨ Efek Fade In */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fade-in-slow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-slow {
|
||||
animation: fade-in-slow 1.5s ease-out;
|
||||
}
|
||||
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ☁️ Animasi awan lembut */
|
||||
@keyframes cloud-slow {
|
||||
0% { transform: translateX(0); }
|
||||
50% { transform: translateX(40px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
.animate-cloud-slow {
|
||||
animation: cloud-slow 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes cloud-medium {
|
||||
0% { transform: translateX(0); }
|
||||
50% { transform: translateX(-60px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
.animate-cloud-medium {
|
||||
animation: cloud-medium 22s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 📱 Responsif */
|
||||
@media (max-width: 640px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.grid {
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,47 +1,87 @@
|
||||
<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">
|
||||
<!-- 🌌 Latar belakang fullscreen -->
|
||||
<section
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
|
||||
>
|
||||
<!-- 🌟 Bintang Berkedip -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(msg, index) in messages"
|
||||
:key="index"
|
||||
class="bg-white/70 p-4 rounded-lg shadow"
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 🌈 Cahaya lembut -->
|
||||
<div class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||
|
||||
<!-- 💬 Konten utama -->
|
||||
<div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
|
||||
<h2 class="text-4xl font-extrabold text-yellow-300 drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
|
||||
💬 Buku Tamu
|
||||
</h2>
|
||||
|
||||
<p class="text-blue-100">{{ saySomething }}</p>
|
||||
|
||||
<!-- 📝 Form -->
|
||||
<form
|
||||
@submit.prevent="sendMessage"
|
||||
class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
|
||||
>
|
||||
<p class="font-semibold text-blue-700">{{ msg.name }}</p>
|
||||
<p class="text-gray-700">{{ msg.text }}</p>
|
||||
<input
|
||||
v-model="guestNameInput"
|
||||
type="text"
|
||||
placeholder="Nama Anda"
|
||||
class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
v-model="messageInput"
|
||||
rows="3"
|
||||
placeholder="Tulis ucapan Anda..."
|
||||
class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
|
||||
required
|
||||
></textarea>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Kirim ✨
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- 💌 Pesan -->
|
||||
<div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
|
||||
<transition-group name="fade" tag="div">
|
||||
<div
|
||||
v-for="(msg, index) in messages"
|
||||
:key="index"
|
||||
class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
|
||||
>
|
||||
<p class="font-semibold text-yellow-300">{{ msg.name }}</p>
|
||||
<p class="text-blue-100">{{ msg.text }}</p>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🌠 Ornamen bawah -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
guestName: String,
|
||||
saySomething: String,
|
||||
@ -52,9 +92,80 @@ const emit = defineEmits(['addMessage'])
|
||||
const guestNameInput = ref(props.guestName || '')
|
||||
const messageInput = ref('')
|
||||
|
||||
// 🌟 Efek bintang
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 70
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
|
||||
onMounted(() => generateStars())
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!guestNameInput.value || !messageInput.value) return
|
||||
emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
|
||||
messageInput.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ✨ Fade animasi */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
|
||||
/* Pesan baru fade */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scrollbar halus */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,23 +1,141 @@
|
||||
<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>
|
||||
<!-- 🌌 Latar belakang fullscreen -->
|
||||
<section
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
|
||||
>
|
||||
<!-- 🌟 Bintang Berkedip -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 mt-8 italic">Wassalamu’alaikum Wr. Wb.</p>
|
||||
<!-- 🌈 Cahaya Aurora -->
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
|
||||
|
||||
<!-- ✨ Cahaya lembut di tengah -->
|
||||
<div class="absolute w-[500px] h-[500px] bg-yellow-200/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||
|
||||
<!-- 💖 Isi konten -->
|
||||
<div class="relative z-10 max-w-2xl mx-auto space-y-6 animate-fade-in">
|
||||
<h2 class="text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)]">
|
||||
Terima Kasih 💖
|
||||
</h2>
|
||||
|
||||
<p class="text-blue-100 leading-relaxed text-base sm:text-lg">
|
||||
Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara
|
||||
khitanan <br />
|
||||
<span class="text-yellow-300 font-bold text-xl sm:text-2xl">{{ childName }}</span>.
|
||||
</p>
|
||||
|
||||
<!-- 💳 Rekening -->
|
||||
<div
|
||||
v-if="jsonData.rekening_1"
|
||||
class="bg-white/10 border border-white/20 backdrop-blur-md rounded-2xl p-5 sm:p-6 max-w-md mx-auto shadow-[0_0_30px_rgba(255,255,255,0.1)]"
|
||||
>
|
||||
<p class="font-semibold text-yellow-300 text-lg">💳 Rekening Hadiah</p>
|
||||
<p class="text-blue-100 mt-1">{{ jsonData.rekening_1 }}</p>
|
||||
</div>
|
||||
|
||||
<p class="text-blue-200 italic mt-8 animate-fade-in-slow">
|
||||
Wassalamu’alaikum Wr. Wb.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 💫 Ornamen bawah -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/20 to-transparent"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
defineProps({
|
||||
childName: String,
|
||||
jsonData: Object
|
||||
})
|
||||
|
||||
// 🌟 Bintang acak
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 60
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
|
||||
onMounted(() => generateStars())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ✨ Fade-in lembut */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
|
||||
/* ✨ Fade-in slow untuk teks terakhir */
|
||||
@keyframes fade-in-slow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-slow {
|
||||
animation: fade-in-slow 1.8s ease-out;
|
||||
}
|
||||
|
||||
/* 📱 Responsif */
|
||||
@media (max-width: 640px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user