✨ Enhance footer component with improved hover effects and transitions for better user interaction

Author: HassanZahirnia

resources/views/components/footer.blade.php

@@ -101,20 +101,30 @@ class="group relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg
                     class="absolute left-3 top-1/2 -z-10 size-16 -translate-y-1/2 rounded-full bg-cyan-400/60 blur-2xl dark:block"
                     aria-hidden="true"
                 ></div>
+
                 {{-- Content --}}
                 <div class="flex items-center gap-5 text-sm">
-                    <div class="flex flex-col items-center gap-2.5">
+                    <div class="flex flex-col items-center gap-2">
                         {{-- Icon --}}
                         <x-icons.email-document class="size-7 shrink-0" />
+
                         {{-- Title --}}
-                        <h2 class="font-medium">Newsletter</h2>
+                        <h2
+                            class="transition duration-300 will-change-transform group-hover:scale-105"
+                        >
+                            Newsletter
+                        </h2>
                     </div>
+
                     {{-- Message --}}
-                    <p class="leading-relaxed opacity-50">
+                    <p
+                        class="leading-relaxed opacity-50 transition duration-300 will-change-transform group-hover:translate-x-0.5"
+                    >
                         Get the latest NativePHP updates and news delivered to
                         your inbox.
                     </p>
                 </div>
+
                 {{-- Right arrow --}}
                 <x-icons.right-arrow
                     x-init="

resources/views/components/icons/email-document.blade.php

@@ -3,6 +3,7 @@
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
+    overflow="visible"
 >
     <path
         fill="#66e1ff"
@@ -20,11 +21,13 @@
         stroke-width="1"
     ></path>
     <path
+        class="transition duration-300 will-change-transform group-hover:-translate-y-px"
         fill="#e3e3e3"
         d="M19.5 1.5v12.67l-3.77 2.51 -0.23 -0.18h-7l-0.23 0.18 -3.77 -2.51V1.5c0 -0.26522 0.10536 -0.51957 0.29289 -0.707107C4.98043 0.605357 5.23478 0.5 5.5 0.5h13c0.2652 0 0.5196 0.105357 0.7071 0.292893 0.1875 0.187537 0.2929 0.441887 0.2929 0.707107Z"
         stroke-width="1"
     ></path>
     <path
+        class="transition duration-300 will-change-transform group-hover:-translate-y-px"
         fill="#ffffff"
         d="M18.5 0.5h-13c-0.26522 0 -0.51957 0.105357 -0.70711 0.292893C4.60536 0.98043 4.5 1.23478 4.5 1.5v12.67l0.484 0.322L18.893 0.582C18.769 0.52814 18.6352 0.500234 18.5 0.5Z"
         stroke-width="1"
@@ -58,34 +61,39 @@
         stroke-width="1"
     ></path>
     <path
+        class="transition duration-300 will-change-transform group-hover:-translate-y-px"
         stroke="#191919"
         stroke-linecap="round"
         stroke-linejoin="round"
         d="M19.5 14V1.5c0 -0.26522 -0.1054 -0.51957 -0.2929 -0.707107C19.0196 0.605357 18.7652 0.5 18.5 0.5h-13c-0.26522 0 -0.51957 0.105357 -0.70711 0.292893C4.60536 0.98043 4.5 1.23478 4.5 1.5V14"
         stroke-width="1"
     ></path>
     <path
+        class="transition duration-300 will-change-transform group-hover:-translate-y-px"
         stroke="#191919"
         stroke-linecap="round"
         stroke-linejoin="round"
         d="M7.5 3.5h2"
         stroke-width="1"
     ></path>
     <path
+        class="transition duration-300 will-change-transform group-hover:-translate-y-px"
         stroke="#191919"
         stroke-linecap="round"
         stroke-linejoin="round"
         d="M9.5 6.5h7"
         stroke-width="1"
     ></path>
     <path
+        class="transition duration-300 will-change-transform group-hover:-translate-y-px"
         stroke="#191919"
         stroke-linecap="round"
         stroke-linejoin="round"
         d="M7.5 9.5h9"
         stroke-width="1"
     ></path>
     <path
+        class="transition duration-300 will-change-transform group-hover:-translate-y-px"
         stroke="#191919"
         stroke-linecap="round"
         stroke-linejoin="round"