29 lines
871 B
Vue
29 lines
871 B
Vue
<template>
|
|
<div class="flex flex-col items-center text-center min-h-screen bg-yellow-200 py-12 px-6">
|
|
<img
|
|
v-if="childPhoto"
|
|
:src="childPhoto"
|
|
alt="Foto Anak"
|
|
class="w-40 h-40 rounded-full shadow-lg mb-6 object-cover border-4 border-yellow-500"
|
|
/>
|
|
|
|
<h2 class="text-3xl font-bold text-orange-700 mb-2">{{ childName }}</h2>
|
|
<p class="text-lg text-gray-700 mb-4">Berusia {{ age }} tahun 🎂</p>
|
|
<p class="text-md text-gray-600 mb-6">Putra/Putri dari {{ parentsName }}</p>
|
|
|
|
<p class="max-w-md text-gray-700 leading-relaxed">
|
|
Dengan penuh sukacita, kami mengundang teman-teman dan keluarga untuk hadir dalam acara ulang tahun kami yang
|
|
ke-{{ age }}!
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
age: [String, Number],
|
|
childName: String,
|
|
parentsName: String,
|
|
childPhoto: String
|
|
})
|
|
</script>
|