fix fade-element and set duration based on screen size

resources/js/app.js

@@ -124,7 +124,16 @@ document.addEventListener('DOMContentLoaded', function() {
             } else {
                 var start = window.pageYOffset;
                 var target = start + scrollAmount;
-                var duration = 5000; // duration of the animation
+                 // Set duration based on screen size
+                var screenWidth = window.innerWidth;
+                var duration;
+                if (screenWidth < 600) {
+                    duration = 3000; // Smaller screen
+                } else if (screenWidth < 1200) {
+                    duration = 4000; // Medium screen
+                } else {
+                    duration = 7000; // Larger screen
+                }
                 var startTime = null;
 
                 function scrollStep(timestamp) {

resources/views/components/countdown.blade.php

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-5 w-4/5 py-8 fade-element">
+<div class="flex flex-col gap-5 w-4/5 py-3 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/digital-card.blade.php

@@ -30,13 +30,13 @@
         <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">
+        <div class="section bg-babyblue min-h-screen flex justify-center pb-5">
             @include('components.event-info')
         </div>
-        <div class="section bg-babyblue flex justify-center pb-20">
+        <div class="section bg-babyblue flex justify-center pb-5">
             @include('components.countdown')
         </div>
-        <div class="section bg-babyblue flex justify-center pt-5 pb-20">
+        <div class="section bg-babyblue flex justify-center pt-5 pb-5">
             @include('components.guestbook')
         </div>
         <div class="section bg-babyblue flex justify-center pt-5 pb-20">