Undangan/proyek-frontend/app/components/templates/Ultah/Landing.vue
2025-10-07 10:36:44 +07:00

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>