42 lines
1.6 KiB
Vue
42 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex flex-col items-center text-center p-6 space-y-6 max-w-2xl mx-auto">
|
|
<!-- Photo frame with decoration -->
|
|
<div class="relative">
|
|
<div class="absolute -inset-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full blur opacity-30"></div>
|
|
<img
|
|
v-if="childPhoto"
|
|
:src="childPhoto"
|
|
alt="Foto Anak"
|
|
class="relative w-48 h-48 rounded-full object-cover border-4 border-white shadow-2xl z-10"
|
|
/>
|
|
<div v-else class="relative w-48 h-48 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200 border-4 border-white shadow-2xl flex items-center justify-center z-10">
|
|
<span class="text-4xl">👶</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl border border-yellow-100">
|
|
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-4">
|
|
Halo, Aku {{ childName }}
|
|
</h2>
|
|
<div class="space-y-3 text-gray-700">
|
|
<p class="text-xl font-semibold">Usiaku kini <span class="text-orange-500">{{ age }}</span> tahun 🎉</p>
|
|
<p class="text-gray-600">Putra/Putri dari</p>
|
|
<p class="text-xl font-bold text-gray-800 bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent">
|
|
{{ parentsName }}
|
|
</p>
|
|
</div>
|
|
<p class="mt-6 text-lg text-gray-600 italic">
|
|
Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
parentsName: String,
|
|
age: [String, Number],
|
|
childPhoto: String
|
|
})
|
|
</script> |