main event changes

package.json

@@ -11,10 +11,12 @@
         "laravel-vite-plugin": "^1.0.0",
         "postcss": "^8.4.39",
         "tailwindcss": "^3.4.4",
+        "tailwindcss-animated": "^1.1.2",
         "vite": "^5.0.0"
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.5.2",
-        "jquery": "^3.7.1"
+        "jquery": "^3.7.1",
+        "tailwindcss-animate": "^1.0.7"
     }
 }

resources/css/app.css

@@ -5,3 +5,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+    font-family: 'Tan Pearl';
+    src: url('tanPearl.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}

resources/js/app.js

@@ -80,4 +80,21 @@ $(function() {
 
     // Initially check visibility on page load
     $(window).trigger('scroll');
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fadeUp');
+                    entry.target.classList.remove('opacity-0');
+                }
+            });
+        }, {
+            threshold: 0.1
+        });
+
+        document.querySelectorAll('.fade-up').forEach(element => {
+            observer.observe(element);
+        });
+    });
 });

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

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-5 w-4/5">
+<div class="flex flex-col gap-5 w-4/5 mt-10">
     <div class="flex justify-center">
         <img src="{{ asset('assets/bismillah.png') }}" alt="Logo">
     </div>

resources/views/components/front-cover.blade.php

@@ -4,7 +4,7 @@
             <img src="{{ asset('assets/logo-left.png') }}" alt="Logo" class="logo-img">
         </div>
         <div class="flex justify-end items-center">
-            <img src="{{ asset('assets/name-left.png') }}" alt="Logo" class="logo-img">
+            <img src="{{ asset('assets/name-left.png') }}" alt="Name Left" class="logo-img">
         </div>
     </div>
 </div>
@@ -14,7 +14,7 @@
             <img src="{{ asset('assets/logo-right.png') }}" alt="Logo" class="logo-img">
         </div>
         <div class="flex justify-start items-center">
-            <img src="{{ asset('assets/name-right.png') }}" alt="Logo" class="logo-img">
+            <img src="{{ asset('assets/name-right.png') }}" alt="Name Right" class="logo-img">
         </div>
     </div>
 </div>

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

@@ -1,8 +1,32 @@
-<div class="flex flex-col gap-8 w-4/5">
+<div class="flex flex-col gap-5 w-4/5 mt-44 mb-40 text-navbarcolor">
     <div class="flex justify-center">
-        <img src="{{ asset('assets/logo.png') }}" alt="Logo" class="logo-img">
+        <p class="font-semibold text-sm">WALIMATULURUS</p>
     </div>
-    <div class="flex justify-center">
-        <img src="{{ asset('assets/name.png') }}" alt="Name" class="name-img">
+    <div class="flex flex-col gap-8 pt-8 pb-8 justify-center">
+        <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">
+        <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">
+        <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>
 </div>

resources/views/digital-card.blade.php

@@ -19,7 +19,7 @@
             <audio src="{{asset('assets/paper-ripping.mp3')}}"></audio>
             @include('components.front-cover')
         </div>
-        <div class="section bg-babyblue h-screen flex justify-center items-center">
+        <div class="section bg-babyblue min-h-screen flex justify-center items-center">
             @include('components.main-event')
         </div>
         <div class="section bg-babyblue min-h-screen flex justify-center">

tailwind.config.js

@@ -8,9 +8,22 @@ export default {
     extend: {
       colors: {
         babyblue: '#e9f6fb',
+        babybluesecond: '#DFF2F6',
         babybluedark: '#d2ebef',
         navbarcolor: '#5a5b5e',
-      }
+      },
+      fontFamily: {
+        'tan-pearl': ['Tan Pearl', 'sans-serif'],
+      },
+      keyframes: {
+          fadeUp: {
+              '0%': { opacity: 0, transform: 'translateY(20px)' },
+              '100%': { opacity: 1, transform: 'translateY(0)' },
+          },
+      },
+      animation: {
+          fadeUp: 'fadeUp 0.5s ease-out forwards',
+      },
     },
     screens: {
       'sm': '640px',
@@ -19,7 +32,10 @@ export default {
       'xl': '1280px',
       '2xl': '1536px',
     },
+    
   },
-  plugins: [],
+  plugins: [
+    require('tailwindcss-animate'),
+  ],
 }