107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<!-- components/templates/UltahStarter/Landing.vue -->
|
||
<template>
|
||
<section
|
||
class="relative flex flex-col items-center justify-center text-center h-screen w-screen text-white bg-gradient-to-b from-red-800 via-blue-900 to-black overflow-hidden"
|
||
>
|
||
<!-- 🕸️ BACKGROUND SPIDER WEB -->
|
||
<div class="absolute inset-0 opacity-15 animate-spin-slow">
|
||
<svg
|
||
viewBox="0 0 500 500"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="w-full h-full"
|
||
>
|
||
<g stroke="white" stroke-width="0.4" fill="none">
|
||
<circle cx="250" cy="250" r="60" />
|
||
<circle cx="250" cy="250" r="120" />
|
||
<circle cx="250" cy="250" r="180" />
|
||
<circle cx="250" cy="250" r="240" />
|
||
<circle cx="250" cy="250" r="300" />
|
||
<line x1="250" y1="0" x2="250" y2="500" />
|
||
<line x1="0" y1="250" x2="500" y2="250" />
|
||
<line x1="125" y1="0" x2="375" y2="500" />
|
||
<line x1="375" y1="0" x2="125" y2="500" />
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 🕷️ SPIDER ICON -->
|
||
<div class="text-8xl mb-6 animate-pulse-slow drop-shadow-lg">🕷️</div>
|
||
|
||
<!-- 🎉 TITLE -->
|
||
<h1
|
||
class="text-5xl md:text-6xl font-extrabold mb-6 text-red-400 drop-shadow-[0_0_12px_rgba(255,0,0,0.7)] animate-fade-down"
|
||
>
|
||
🕸️ Spider-Man Birthday Invitation 🕸️
|
||
</h1>
|
||
|
||
<!-- 👋 GREETING -->
|
||
<p class="text-xl mb-4 font-semibold animate-fade-up">
|
||
Halo,
|
||
<span class="text-red-300 font-bold">
|
||
{{ guestName || 'Friendly Neighborhood Guest' }}
|
||
</span>!
|
||
</p>
|
||
|
||
<!-- 🕶️ EVENT INTRO -->
|
||
<p
|
||
class="text-2xl font-bold mb-10 text-yellow-100 drop-shadow-md animate-fade-up-delay"
|
||
>
|
||
Bergabunglah dalam petualangan ulang tahun {{ childName }}! 🎭
|
||
</p>
|
||
|
||
<!-- 🔘 BUTTON -->
|
||
<button
|
||
@click="$emit('open-invitation')"
|
||
class="relative bg-gradient-to-r from-red-600 to-blue-600 text-white font-bold py-4 px-10 rounded-full shadow-2xl border-2 border-white/40 overflow-hidden group transition-all duration-300 hover:scale-110"
|
||
>
|
||
<span class="relative z-10">🕷️ Buka Undangan 🕸️</span>
|
||
<div
|
||
class="absolute inset-0 bg-white/25 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"
|
||
></div>
|
||
</button>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
guestName: String,
|
||
childName: String
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ───────────── Animations ───────────── */
|
||
@keyframes spin-slow {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@keyframes pulse-slow {
|
||
0%,100% { transform: scale(1); }
|
||
50% { transform: scale(1.15); }
|
||
}
|
||
@keyframes fade-down {
|
||
0% { opacity: 0; transform: translateY(-20px); }
|
||
100% { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes fade-up {
|
||
0% { opacity: 0; transform: translateY(20px); }
|
||
100% { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* Utility classes */
|
||
.animate-spin-slow { animation: spin-slow 40s linear infinite; }
|
||
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
|
||
.animate-fade-down { animation: fade-down 1s ease-out; }
|
||
.animate-fade-up { animation: fade-up 1.2s ease-out; }
|
||
.animate-fade-up-delay { animation: fade-up 1.8s ease-out; }
|
||
|
||
/* Pastikan layar penuh */
|
||
:host, html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|