✨ Enhance footer social links with reveal animations and improved opacity

Author: HassanZahirnia

resources/views/components/footer.blade.php

@@ -44,7 +44,7 @@ class="h-5"
                 () => {
                     motion.inView($el, (element) => {
                         motion.animate(
-                            $refAll('socialLink'),
+                            Array.from($el.children),
                             {
                                 y: [10, 0],
                                 opacity: [0, 1],
@@ -58,7 +58,7 @@ class="h-5"
                     })
                 }
             "
-            class="flex flex-wrap items-center justify-center gap-2.5"
+            class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
             aria-label="Social networks"
         >
             <x-social-networks-all />

resources/views/components/social-networks-all.blade.php

@@ -1,7 +1,4 @@
-<div
-    x-ref="socialLink"
-    class="opacity-0"
->
+<div>
     <a
         href="https://bsky.app/profile/nativephp.bsky.social"
         title="Bluesky"
@@ -13,10 +10,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     </a>
 </div>
 
-<div
-    x-ref="socialLink"
-    class="opacity-0"
->
+<div>
     <a
         href="https://discord.gg/X62tWNStZK"
         title="Go to discord server"
@@ -28,10 +22,7 @@ class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-
     </a>
 </div>
 
-<div
-    x-ref="socialLink"
-    class="opacity-0"
->
+<div>
     <a
         href="https://opencollective.com/nativephp"
         title="NativePHP on Open Collective"
@@ -43,10 +34,7 @@ class="size-[1.1rem] text-black transition duration-200 hover:invert-0 group-hov
     </a>
 </div>
 
-<div
-    x-ref="socialLink"
-    class="opacity-0"
->
+<div>
     <a
         href="https://github.com/nativephp"
         title="Source code of NativePHP"
@@ -58,10 +46,7 @@ class="size-[1.1rem] transition duration-200 group-hover:fill-violet-400 dark:fi
     </a>
 </div>
 
-<div
-    x-ref="socialLink"
-    class="opacity-0"
->
+<div>
     <a
         href="https://pinkary.com/@nativephp"
         title="NativePHP on Pinkary"
@@ -73,10 +58,7 @@ class="size-[1.1rem] text-black transition duration-200 hover:invert-0 group-hov
     </a>
 </div>
 
-<div
-    x-ref="socialLink"
-    class="opacity-0"
->
+<div>
     <a
         href="https://www.linkedin.com/company/nativephp/"
         title="NativePHP on LinkedIn"