fade-element by content

resources/css/app.css

 }
 .fade-element {
     opacity: 0;
-    transition: opacity 3s ease-in-out;
+    transform: translateY(20px);
+    transition: opacity 3s ease-in-out, transform 3s ease-in-out;
 }
 .fade-in {
     opacity: 1;

resources/views/components/countdown.blade.php

-<div class="flex flex-col gap-5 w-4/5 py-8">
+<div class="flex flex-col gap-5 w-4/5 py-8 fade-element">
     <hr class="border-t-1 border-gray-300 mt-3 mb-5 w-4/5 self-center">
     <h1 class="font-medium text-gray-600 self-center">Majlis Bermula</h1>
     <div class="flex justify-center" id="countdown"></div>

resources/views/components/event-info.blade.php

 <div class="flex flex-col gap-5 w-4/5 mt-10">
-    <div class="flex justify-center">
+    <div class="flex justify-center fade-element">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500 pb-3">Dengan penuh rasa kesyukuran, kami</p>
         <p class="font-medium text-gray-600">DATO' HAJI AMIRUDDIN BIN MOHD SAID</p>
         <p class="font-medium text-gray-600">&</p>
         <p class="font-medium text-gray-600">DATIN HAJAH NOR ALINA BINTI ALIAS</p>
     </div>
-    <div class="text-center">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500">ingin mempersilakan</p>
         <p class="font-medium text-sm text-gray-500">Tan Sri/Dato' Sri/Datin Sri/Dato'/</p>
         <p class="font-medium text-sm text-gray-500">Datin/Tuan/Puan/Encik/Cik</p>
     </div>
-    <div class="text-center">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500 pb-3">Ke Majlis Resepsi Perkahwinan Putera Kami</p>
         <p class="font-medium text-gray-600">ALIFF BIN DATO' HAJI AMIRUDDIN</p>
         <p class="font-medium text-gray-600">&</p>
         <p class="font-medium text-gray-600">ANIZA AYUNA BINTI CHE JANI</p>
     </div>
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center">
-    <div class="text-center">
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
+    <div class="text-center fade-element">
         <p class="font-medium text-gray-600 pb-2">Tarikh</p>
         <p class="font-medium text-sm text-gray-500">Sabtu, 17 Ogos 2024</p>
         <p class="font-medium text-sm text-gray-500">(12 Safar 1446H)</p>
     </div>
-    <div class="text-center">
+    <div class="text-center fade-element">
         <p class="font-medium text-gray-600 pb-2">Masa</p>
         <p class="font-medium text-sm text-gray-500">11.00 Pagi - 4.00 Petang</p>
     </div>
-    <div class="text-center">
+    <div class="text-center fade-element">
         <p class="font-medium text-gray-600 pb-2">Tempat</p>
         <p class="font-medium text-sm text-gray-500">Dewan Jubli Perak</p>
         <p class="font-medium text-sm text-gray-500">Sultan Haji Ahmad Shah,</p>
         <p class="font-medium text-sm text-gray-500">Jalan Teluk Sisek,</p>
         <p class="font-medium text-sm text-gray-500">Kuantan, Pahang.</p>
     </div>
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center">
-    <div class="text-center">
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
+    <div class="text-center fade-element">
         <p class="font-medium text-gray-600 pb-2">Aturcara Majlis</p>
         <p class="font-medium text-sm text-gray-600">11.00 Pagi :</p>
         <p class="font-medium text-sm text-gray-500 pb-4">Majlis Bermula</p>

resources/views/components/guestbook.blade.php

 <div class="flex flex-col gap-5 w-4/5">
-    <div class="text-center pb-3">
+    <div class="text-center pb-3 fade-element">
         <p class="font-medium text-gray-600 pb-3">Ruangan Ucapan</p>
         <p class="font-medium text-sm text-gray-600 italic">Ucapan kepada kedua mempelai</p>
         <p class="font-medium text-sm text-gray-600 italic">-Nama-</p>
     </div>
-    <div class="text-center pb-2">
+    <div class="text-center pb-2 fade-element">
         <a onclick="guestbook.showModal()" class="rounded-full border-solid border-2 border-navbarcolor py-1 px-3 font-medium text-gray-600">
             <i class="fa-solid fa-pen-fancy"></i>
             <span>Ucapan</span>
         </a>
     </div>
-    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center">
+    <hr class="border-t-1 border-gray-300 my-5 w-4/5 self-center fade-element">
     @include('modals.guestbook-modal')
 </div>

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

 <div class="flex flex-col gap-5 w-4/5 mt-44 mb-40 text-navbarcolor">
-    <div class="flex justify-center">
+    <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">
+    <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>
             <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">
+    <div class="flex flex-col justify-center fade-element">
         <div class="flex justify-center">
             <p class="font-bold text-base">SABTU</p>
         </div>
             <p class="font-bold text-base">17 OGOS 2024</p>
         </div>
     </div>
-    <div class="flex flex-col justify-center">
+    <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>

resources/views/components/prayer.blade.php

 <div class="flex flex-col gap-5 w-4/5">
-    <div class="flex justify-center">
+    <div class="flex justify-center fade-element">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>
-    <div class="text-center">
+    <div class="text-center fade-element">
         <p class="font-medium text-sm text-gray-500 pb-1">Ya Allah, Ya Tuhan kami. Kami memohon restuMu</p>
         <p class="font-medium text-sm text-gray-500 pb-1">berkatilah majlis kami ini dengan keberkatan dari</p>
         <p class="font-medium text-sm text-gray-500 pb-1">permulaan hingga pengakhirannya. Sesungguhnya</p>

resources/views/digital-card.blade.php

         <div class="petal-overlay" id="petalOverlay">
             <img src="{{ asset('assets/petal.gif') }}" alt="Falling Petals">
         </div>
-    
         <audio id="player" loop>
             <source src="{{ asset('assets/background-musicv2.mp3') }}" type="audio/mp3">
         </audio>
         <div class="parent absolute h-screen w-full">
-            {{-- <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio> --}}
             @include('components.front-cover')
         </div>
-        <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20 fade-element">
+        <div class="section bg-babyblue min-h-screen flex justify-center items-center pb-20">
             @include('components.main-event')
         </div>
-        <div class="section bg-babyblue min-h-screen flex justify-center pb-20 fade-element">
+        <div class="section bg-babyblue min-h-screen flex justify-center pb-20">
             @include('components.event-info')
         </div>
         <div class="section bg-babyblue flex justify-center pb-20 fade-element">