38 lines
1.2 KiB
Vue
38 lines
1.2 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">
|
|
<div class="flex-1 text-center lg:text-left">
|
|
<h1 class="text-orange-700 text-2xl md:text-3xl font-bold mb-6">
|
|
Ulang Tahun Ke -{{ age }}
|
|
</h1>
|
|
<h2 class="text-orange-800 text-3xl md:text-5xl font-bold mb-6">
|
|
{{ childName }}
|
|
</h2>
|
|
<h3 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
|
|
Anak Ke -{{ childOrder }}
|
|
</h3>
|
|
<h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
|
|
{{ parentNames }}
|
|
</h4>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="bg-yellow-300/60 rounded-3xl p-8 shadow-xl">
|
|
<img :src="childPhoto || '/assets/img/child-placeholder.jpg'"
|
|
:alt="childName"
|
|
class="w-full h-80 object-cover rounded-2xl shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
age: [Number,String],
|
|
childName: String,
|
|
childOrder: [Number,String],
|
|
parentNames: String,
|
|
childPhoto: [String, Array]
|
|
})
|
|
</script>
|