47 lines
1.8 KiB
Vue
47 lines
1.8 KiB
Vue
<template>
|
|
<section class="w-full max-w-6xl mx-auto">
|
|
<div class="flex flex-col lg:flex-row items-center justify-between gap-8">
|
|
<!-- Left Side -->
|
|
<div class="flex-1 text-center lg:text-left">
|
|
<h1 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
|
|
Celebrate With Us
|
|
</h1>
|
|
<h2 class="text-blue-600 text-4xl md:text-6xl font-bold mb-4">
|
|
{{ childName }}
|
|
</h2>
|
|
<h3 class="text-orange-700 text-2xl md:text-3xl font-bold mb-8">
|
|
Birthday Party
|
|
</h3>
|
|
<div class="bg-yellow-300/60 backdrop-blur-sm rounded-2xl p-6 mb-8 inline-block">
|
|
<p class="text-orange-800 text-lg mb-2">Kepada Yth.</p>
|
|
<p class="text-orange-700 text-xl font-semibold">{{ guestName }}</p>
|
|
</div>
|
|
<button @click="$emit('open-invitation')"
|
|
class="bg-orange-600 hover:bg-orange-700 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all">
|
|
Open Invitation
|
|
</button>
|
|
</div>
|
|
<!-- Right Side -->
|
|
<div class="flex-1 relative">
|
|
<div class="relative w-full max-w-md mx-auto">
|
|
<div class="bg-yellow-400 rounded-full w-64 h-64 mx-auto flex items-center justify-center border-4 border-yellow-600">
|
|
<div class="text-center">
|
|
<div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 flex items-center justify-center border-4 border-gray-800">
|
|
<div class="w-12 h-12 bg-yellow-600 rounded-full"></div>
|
|
</div>
|
|
<div class="text-gray-800 font-bold text-lg">Minions</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
guestName: String
|
|
})
|
|
</script>
|