76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<section
|
|
class="min-h-screen bg-gradient-to-b from-yellow-400 to-yellow-500 flex flex-col lg:flex-row items-center justify-center px-8 md:px-16 relative overflow-hidden"
|
|
>
|
|
<!-- Left Side (Image) -->
|
|
<div class="flex-1 relative mt-10 lg:mt-0 flex justify-center lg:justify-start">
|
|
<img
|
|
src="/pria.jpg"
|
|
alt="Character"
|
|
class="w-64 md:w-80 lg:w-96 drop-shadow-2xl animate-bounce-slow"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Right Side (Text) -->
|
|
<div class="flex-1 text-center lg:text-left space-y-6 z-10 lg:pl-10">
|
|
<h1 class="text-orange-700 text-xl md:text-2xl font-semibold">
|
|
Celebrate With Us
|
|
</h1>
|
|
<h2
|
|
class="text-blue-700 text-4xl md:text-6xl font-extrabold drop-shadow-md"
|
|
>
|
|
{{ childName }}
|
|
</h2>
|
|
<h3 class="text-orange-800 text-2xl md:text-4xl font-bold">
|
|
Birthday Party
|
|
</h3>
|
|
|
|
<div
|
|
class="bg-yellow-100/70 border border-yellow-300 shadow-md rounded-xl px-6 py-4 inline-block"
|
|
>
|
|
<p class="text-orange-700 text-lg">Kepada Yth.</p>
|
|
<p class="text-orange-800 text-xl font-bold">{{ guestName }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
@click="$emit('open-invitation')"
|
|
class="mt-6 bg-orange-600 hover:bg-orange-700 text-white px-8 py-3 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all"
|
|
>
|
|
Open Invitation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Musik Icon -->
|
|
<div class="absolute bottom-6 left-6">
|
|
<button
|
|
class="bg-orange-700/80 p-3 rounded-full text-white shadow-lg hover:scale-110 transition-transform"
|
|
>
|
|
🎵
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
guestName: String,
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes bounce-slow {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
.animate-bounce-slow {
|
|
animation: bounce-slow 3s infinite ease-in-out;
|
|
}
|
|
</style>
|