65 lines
2.5 KiB
Vue
65 lines
2.5 KiB
Vue
<template>
|
|
<div class="h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden">
|
|
|
|
<!-- Background Pattern -->
|
|
<div class="absolute inset-0 bg-pattern opacity-30"></div>
|
|
|
|
<!-- Top Navigation Tabs -->
|
|
<div class="absolute top-6 left-1/2 transform -translate-x-1/2 bg-white/20 backdrop-blur-sm rounded-full px-6 py-2 flex space-x-8 z-10">
|
|
<span class="text-yellow-400 font-semibold cursor-pointer">Introduction</span>
|
|
<span class="text-blue-100 cursor-pointer">Event</span>
|
|
<span class="text-blue-100 cursor-pointer">Gallery</span>
|
|
<span class="text-blue-100 cursor-pointer">Say</span>
|
|
<span class="text-blue-100 cursor-pointer">Thank You</span>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="relative z-10 h-full flex flex-col items-center justify-center px-6 text-center">
|
|
|
|
<!-- Child Photo -->
|
|
<div class="w-48 h-60 overflow-hidden rounded-t-3xl mx-auto mb-6">
|
|
<img :src="formData.childPhoto || '/pria.jpg'" alt="Child" class="w-full h-full object-cover"/>
|
|
</div>
|
|
|
|
<!-- Child Name -->
|
|
<div class="bg-blue-800/50 border border-yellow-400 rounded-md px-6 py-2 mb-4 inline-block">
|
|
<h1 class="text-yellow-400 font-bold text-xl">{{ formData.nama_panggilan || 'SATRIA HUDA DINATA' }}</h1>
|
|
</div>
|
|
|
|
<!-- Child Order & Parents -->
|
|
<div class="text-white/80 text-lg mb-2">
|
|
Putra Ke Dua Dari
|
|
</div>
|
|
<div class="text-yellow-400 font-semibold text-xl">
|
|
{{ formData.fatherName || 'Bpk H. Munawar Huda, S.H.' }} & {{ formData.motherName || 'Ibu Hj. Dinah, A.M.Keb' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
const formData = computed(() => {
|
|
const result = {}
|
|
props.data?.fields?.forEach(f => {
|
|
result[f.name] = f.value
|
|
})
|
|
return result
|
|
})
|
|
onMounted(() => {
|
|
console.log("🧾 Introduction Data:", props.data)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Background Islamic Pattern */
|
|
.bg-pattern {
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="islamic" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><g fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"><path d="M12.5 0 L25 12.5 L12.5 25 L0 12.5 Z M6.25 6.25 L18.75 6.25 L18.75 18.75 L6.25 18.75 Z"/><circle cx="12.5" cy="12.5" r="3"/></g></pattern></defs><rect width="100%" height="100%" fill="url(%23islamic)"/></svg>');
|
|
}
|
|
</style>
|