Undangan/proyek-frontend/app/components/templates/KhitanBasic/Introduction.vue

30 lines
971 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<section class="text-center space-y-4 p-6">
<h2 class="text-3xl font-bold text-blue-700">Assalamualaikum Wr. Wb.</h2>
<p class="text-gray-700">
Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Bapak/Ibu/Saudara/i
untuk menghadiri acara khitanan putra kami:
</p>
<h3 class="text-4xl font-bold text-blue-800 mt-4">{{ form.nama_lengkap }}</h3>
<p class="text-lg text-gray-600 italic">({{ form.nama_panggilan }})</p>
<div class="mt-6">
<p class="text-gray-700">
Putra dari pasangan <span class="font-semibold">{{ form.nama_bapak }}</span> &
<span class="font-semibold">{{ form.nama_ibu }}</span>
</p>
</div>
<button
class="mt-8 bg-blue-600 text-white px-6 py-2 rounded-full shadow-md hover:bg-blue-700"
@click="$emit('next')"
>
Lanjut ke Acara
</button>
</section>
</template>
<script setup>
defineProps({ form: Object })
</script>