pulsating rsvp icon

resources/js/app.js

@@ -11,6 +11,11 @@ document.addEventListener('DOMContentLoaded', function () {
     reset() // reset everrything to ensure smooth
     sessionStorage.setItem("initial-load", "true"); // will be used by click event
 
+    let rsvpBtn = document.getElementById("rsvp-button");
+    rsvpBtn.addEventListener('click', function(){
+        this.classList.remove("animate__flash");
+    })
+
 });
 
 

resources/views/components/navbar.blade.php

@@ -1,6 +1,6 @@
 <div class="fixed bottom-0 left-0 w-full bg-navbarcolor shadow-lg rounded-t-xl">
     <div class="flex justify-around py-4">
-        <a onclick="rsvp.showModal()" class="text-babyblue text-xl">
+        <a id="rsvp-button" onclick="rsvp.showModal()" class="text-babyblue text-xl animate__animated animate__flash animate__infinite animate__delay-4s">
             <i class="fa-solid fa-envelope-open-text"></i>
         </a>
         <a onclick="emoney.showModal()" class="text-babyblue text-xl">
@@ -21,4 +21,4 @@
     @include('modals.contact-modal')
     @include('modals.location-modal')
     @include('modals.calendar-modal')
-</div>
+</div>