Change hover styles

src/components/common/card/card.module.scss

@@ -15,6 +15,19 @@
   text-decoration: none;
   color: unset;
 
+  &:hover {
+    a {
+      &::before {
+        opacity: 1;
+        transition: all var(--duration-normal) var(--ease);
+      }
+
+      svg:nth-child(1) {
+        transform: rotate(45deg) scale(1.15);
+      }
+    }
+  }
+
   &-blog {
     border-bottom: none;
 

src/components/primitives/link/index.tsx

@@ -49,12 +49,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           {...aProps}
         >
           {children}
-          {variant === 'default' &&
-            (isExternal ? (
-              <ArrowLink className={s['icon']} />
-            ) : (
-              <ArrowLink className={clsx(s['icon'], s['icon--rotated'])} />
-            ))}
+          {variant === 'default' && <ArrowLink className={s['icon']} />}
         </a>
       </NextLink>
     )

src/components/primitives/link/link.module.scss

@@ -40,8 +40,9 @@
       left: 0;
       right: 0;
       opacity: 0;
-      width: 100%;
-      margin: auto;
+      width: 0%;
+
+      // margin: auto;
       background-image: repeating-linear-gradient(
           0deg,
           currentcolor,
@@ -80,6 +81,7 @@
       animation: border var(--duration-normal) linear infinite;
       content: '';
       pointer-events: none;
+      transition: all var(--duration-normal) var(--ease);
     }
 
     &::after {
@@ -102,10 +104,11 @@
       }
 
       &::before {
+        width: 100%;
         opacity: 1;
 
         // width: 90%;
-        transition: opacity var(--duration-normal) var(--ease);
+        transition: all var(--duration-normal) var(--ease);
       }
     }
   }