Update (ui)

resources/css/app-front.css

@@ -1,3 +1,15 @@
+.bg-gradient-rainbow {
+  background: linear-gradient(
+    270deg,
+    #ffa63d,
+    #ff3d77,
+    #338aff,
+    #3cf0c5,
+    #ffa63d
+  );
+  background-size: 400% 400%;
+}
+
 .bg-hero {
   background: transparent;
   background: linear-gradient(
@@ -70,7 +82,7 @@ .illuminated {
   position: relative;
   overflow: hidden;
   z-index: 1;
-  animation: shimmer 2s infinite linear; /* Apply the animation to the button */
+  animation: shimmer 3s infinite linear; /* Apply the animation to the button */
 }
 
 /* Shimmer gradient */
@@ -92,6 +104,33 @@ .illuminated::before {
   animation: shimmer 3s infinite; /* Apply the animation to the gradient */
 }
 
+/* Custom illuminated button style */
+.illuminated-slow {
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  animation: shimmer 10s infinite linear; /* Apply the animation to the button */
+}
+
+/* Shimmer gradient */
+.illuminated-slow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0) 25%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0) 75%
+  );
+  background-size: 400% 400%;
+  z-index: -1;
+  animation: shimmer 10s infinite; /* Apply the animation to the gradient */
+}
+
 /* Define the shimmer effect using keyframes */
 @keyframes shimmer {
   0% {
@@ -106,3 +145,18 @@ .word-wrap-break-word {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
+
+.hover-opacity:hover {
+  opacity: 0.7 !important;
+}
+
+.hover-grow {
+  transition: 0.3s;
+  transform: scale(1);
+}
+
+.hover-grow:hover,
+.d-grow {
+  transform: scale(1.03);
+  transition: 0.3s;
+}