✨ Replace SVG arrow with custom component and enhance hover effects for improved performance

Author: HassanZahirnia

resources/views/components/eap-banner.blade.php

@@ -31,17 +31,7 @@ class="bg-clip-text tracking-tight text-transparent"
     </div>
 
     {{-- Arrow --}}
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="15"
-        height="11"
-        viewBox="0 0 15 11"
-        fill="none"
-        class="shrink-0 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-1"
-    >
-        <path
-            d="M1 4.8C0.613401 4.8 0.3 5.1134 0.3 5.5C0.3 5.8866 0.613401 6.2 1 6.2L1 4.8ZM14.495 5.99498C14.7683 5.72161 14.7683 5.27839 14.495 5.00503L10.0402 0.550253C9.76684 0.276886 9.32362 0.276886 9.05025 0.550253C8.77689 0.823621 8.77689 1.26684 9.05025 1.5402L13.0101 5.5L9.05025 9.4598C8.77689 9.73317 8.77689 10.1764 9.05025 10.4497C9.32362 10.7231 9.76683 10.7231 10.0402 10.4497L14.495 5.99498ZM1 6.2L14 6.2L14 4.8L1 4.8L1 6.2Z"
-            fill="#DBDAE8"
-        />
-    </svg>
+    <x-icons.right-arrow
+        class="size-3 shrink-0 text-white transition duration-300 ease-in-out will-change-transform group-hover:translate-x-1"
+    />
 </a>

resources/views/welcome.blade.php

@@ -277,7 +277,7 @@ class="truncate text-6xl font-extrabold uppercase min-[400px]:text-7xl md:text-8
 
             {{-- Shiny line --}}
             <div
-                class="absolute left-1/2 top-32 z-20 -translate-x-1/2 rotate-[50deg] transition duration-500 ease-out will-change-transform group-hover/header:translate-x-[-55%]"
+                class="absolute left-1/2 top-32 z-20 -translate-x-1/2 rotate-[50deg] transition duration-500 ease-out will-change-transform group-hover/header:translate-x-[-55%] group-hover/header:opacity-0"
                 aria-hidden="true"
             >
                 <div