digital-card/resources/views/components/main-event.blade.php

<div class="flex flex-col gap-5 w-4/5 mt-44 mb-40 text-navbarcolor relative">
    <div class="flex justify-center fade-element">
        <p class="font-semibold text-sm">WALIMATULURUS</p>
    </div>
    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center fade-element">
        <div class="flex justify-center">
            <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>liff</p>
        </div>
        <div class="flex justify-center">
            <p class="font-tan-pearl font-semibold text-3xl">&</p>
        </div>
        <div class="flex justify-center">
            <p class="font-tan-pearl font-semibold text-5xl"><span class="text-6xl">A</span>yuna</p>
        </div>
    </div>
    <div class="flex flex-col justify-center fade-element">
        <div class="flex justify-center">
            <p class="font-bold text-base">SABTU</p>
        </div>
        <div class="flex justify-center">
            <p class="font-bold text-base">17 OGOS 2024</p>
        </div>
    </div>
    <div class="flex flex-col justify-center fade-element">
        <div class="flex justify-center">
            <p class="font-semibold text-sm">DEWAN JUBLI PERAK</p>
        </div>
        <div class="flex justify-center">
            <p class="font-semibold text-sm">SULTAN HAJI AHMAD SHAH</p>
        </div>
    </div>
    <img id="scroller" src="{{asset('assets/scrolling.png')}}" alt="" class="absolute animate__animated animate__fadeInUp animate__infinite" width="35" height="35" style="bottom: 50%; right:20px">
</div>