107 lines
3.3 KiB
Vue
107 lines
3.3 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>
|
|
|
|
<!-- Main Content -->
|
|
<div class="relative z-10 min-h-screen flex items-center justify-center px-4 md:px-8 py-12">
|
|
<div class="text-center max-w-4xl mx-auto">
|
|
<!-- Title -->
|
|
<div class="mb-10 animate-fade-in-down">
|
|
<h1 class="text-yellow-400 text-3xl md:text-5xl lg:text-6xl font-bold mb-4 md:mb-6 font-script">
|
|
Introduction
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Child Section -->
|
|
<div class="relative z-10 h-full flex flex-col items-center justify-center px-6 text-center">
|
|
<!-- Child Photo -->
|
|
<div class="w-68 h-80 overflow-hidden rounded-t-3xl mx-auto mb-[-20px] shadow-lg">
|
|
<img
|
|
:src="getFullPhotoUrl(childPhoto)"
|
|
alt="Child"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Child Name with nickname.png background (Tailwind version) -->
|
|
<div
|
|
class="relative mb-0 inline-flex items-center justify-center w-[420px] h-[110px] bg-[url('/nickname.png')] bg-contain bg-no-repeat bg-center"
|
|
>
|
|
<h1 class="text-yellow-400 font-bold text-xl md:text-2xl font-script drop-shadow-lg">
|
|
{{ form.nama_lengkap || 'Nama Anak' }}
|
|
</h1>
|
|
</div>
|
|
|
|
|
|
<!-- Child Order -->
|
|
<div v-if="form.anak_ke" class="text-white/80 text-lg mb-2">
|
|
Putra ke {{ form.anak_ke }} dari
|
|
</div>
|
|
<div v-else class="text-white/80 text-lg mb-2">
|
|
Putra dari
|
|
</div>
|
|
|
|
<!-- Parents -->
|
|
<div class="text-yellow-400 font-semibold text-xl">
|
|
{{ form.nama_bapak || 'Nama Ayah' }} & {{ form.nama_ibu || 'Nama Ibu' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRuntimeConfig } from '#app'
|
|
|
|
const props = defineProps({
|
|
form: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
const backendUrl = config.public.apiBaseUrl
|
|
|
|
// ============ FOTO ANAK ============
|
|
const childPhoto = computed(() => {
|
|
const fotoPertama = props.form?.foto?.[3]
|
|
return fotoPertama || ''
|
|
})
|
|
|
|
// ============ FORMAT URL FOTO ============
|
|
const getFullPhotoUrl = (photo) => {
|
|
if (!photo) return '/pria.jpg'
|
|
if (photo.startsWith('http')) return photo
|
|
if (photo.startsWith('/storage')) return `${backendUrl}${photo}`
|
|
return `${backendUrl}/storage/${photo}`
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.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>');
|
|
}
|
|
|
|
/* Efek animasi halus muncul dari atas */
|
|
@keyframes fade-in-down {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in-down {
|
|
animation: fade-in-down 1s ease-out;
|
|
}
|
|
</style>
|