107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<template>
|
||
<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>
|
||
|
||
<a
|
||
v-if="link_gmaps"
|
||
:href="link_gmaps"
|
||
target="_blank"
|
||
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>
|
||
|
||
<!-- ⏳ 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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'
|
||
|
||
defineProps({
|
||
hari_tanggal_acara: String,
|
||
waktu: String,
|
||
alamat: String,
|
||
link_gmaps: String,
|
||
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>
|