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%)]"
></div>
<!-- Kartu utama -->
<!-- Kartu utama dengan background masjid diperbesar -->
<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">
Undangan Khitan
@ -28,7 +28,8 @@
<div class="bg-blue-50 border border-blue-100 rounded-xl py-4 px-6 mb-6">
<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>
</div>
@ -46,6 +47,20 @@
<div
class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-blue-200/50 to-transparent rounded-t-[100px]"
></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>
</template>
@ -57,17 +72,26 @@ defineProps({
</script>
<style scoped>
section {
animation: fadeIn 1.2s ease-in-out;
@keyframes swing {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(4deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-4deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
.animate-swing {
animation: swing 4.5s ease-in-out infinite;
transform-origin: top center;
}
</style>