Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

khitanbasic

Browse Source
This commit is contained in:
Muzakki Parsaoran Siregar 2025-10-24 09:20:03 +07:00
parent 9ca4fa2670
commit f044a14fa2
1 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue
View File

@ -7,9 +7,9 @@
class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(147,197,253,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(191,219,254,0.3),transparent_50%)]" class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(147,197,253,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(191,219,254,0.3),transparent_50%)]"
></div> ></div>
<!-- Kartu utama --> <!-- Kartu utama dengan background masjid diperbesar -->
<div <div
class="relative bg-white/90 backdrop-blur-sm shadow-xl rounded-3xl p-8 sm:p-12 max-w-2xl text-center border border-blue-100" class="relative bg-white/90 backdrop-blur-sm shadow-xl rounded-3xl p-8 sm:p-12 max-w-2xl text-center border border-blue-100 z-10 bg-[url('/masjid.png')] bg-no-repeat bg-top bg-[length:120%_auto]"
> >
<p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium"> <p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium">
Undangan Khitan Undangan Khitan
@ -28,7 +28,8 @@
<div class="bg-blue-50 border border-blue-100 rounded-xl py-4 px-6 mb-6"> <div class="bg-blue-50 border border-blue-100 rounded-xl py-4 px-6 mb-6">
<p class="text-blue-800 font-medium"> <p class="text-blue-800 font-medium">
Kepada Yth. <span class="font-semibold">{{ guestName || 'Tamu Undangan' }}</span> Kepada Yth.
<span class="font-semibold">{{ guestName || 'Tamu Undangan' }}</span>
</p> </p>
</div> </div>
@ -46,6 +47,20 @@
<div <div
class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-blue-200/50 to-transparent rounded-t-[100px]" class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-blue-200/50 to-transparent rounded-t-[100px]"
></div> ></div>
<!-- Ornamen kanan & kiri DI LUAR CONTAINER -->
<img
src="/bagoyang.png"
alt="Ornamen kiri"
class="fixed top-[-44px] left-4 sm:left-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top pointer-events-none"
/>
<img
src="/bagoyang.png"
alt="Ornamen kanan"
class="fixed top-[-44px] right-4 sm:right-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top scale-x-[-1] pointer-events-none"
/>
</section> </section>
</template> </template>
@ -57,17 +72,26 @@ defineProps({
</script> </script>
<style scoped> <style scoped>
section { @keyframes swing {
animation: fadeIn 1.2s ease-in-out; 0% {
transform: rotate(0deg);
}
25% {
transform: rotate(4deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-4deg);
}
100% {
transform: rotate(0deg);
}
} }
@keyframes fadeIn {
from { .animate-swing {
opacity: 0; animation: swing 4.5s ease-in-out infinite;
transform: translateY(15px); transform-origin: top center;
}
to {
opacity: 1;
transform: translateY(0);
}
} }
</style> </style>