add: animation for underline and text bg

src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html

@@ -4,7 +4,7 @@ <h2 class="card__title">Bir Kelime</h2>
         <div class="card--inner">
             <div class="card__word">
                 <h3>
-                    <a (click)="scrollToTop()" [routerLink]="word.madde">{{word.madde}}</a>
+                    <a class="animatedUnderline" (click)="scrollToTop()" [routerLink]="word.madde">{{word.madde}}</a>
                 </h3>
             </div>
             <div class="card__definition">
@@ -19,7 +19,8 @@ <h2 class="card__title">Bir Deyim-Atasözü</h2>
         <div class="card--inner">
             <div class="card__word">
                 <h3>
-                    <a (click)="scrollToTop()" [routerLink]="phrase.madde">{{phrase.madde}}</a>
+                    <a class="animatedUnderline" (click)="scrollToTop()"
+                        [routerLink]="phrase.madde">{{phrase.madde}}</a>
                 </h3>
             </div>
             <div class="card__definition">

src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss

@@ -20,28 +20,40 @@
         padding-bottom: 10px;
         // font-size: clamp(1.5rem, 5vw, 2.5rem);
         font-weight: 700;
-        background: -webkit-linear-gradient(45deg, var(--primary-purple) 10%, var(--main-color)90%);
+        background: -webkit-linear-gradient(45deg, var(--primary-purple) 10%, var(--gradient-purple)90%);
+        background-size: 300% 300%;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         border-bottom: 2px solid var(--main-bg-color);
+        animation: flowingGradient 2.5s ease infinite;
     }
 
     &__definition {
         font-size: clamp(1.25rem, 5vw, 1.5rem);
     }
 
     &__word a {
-        transition: color 0.5s ease-out;
-        color: var(--main-color);
-
-        &:hover {
-            color: var(--primary-purple);
-        }
+        text-decoration: none;
+        color: var(--primary-purple);
     }
 }
 
 @media (min-width: 780px) {
     .daily-word-and-phrase {
         grid-template-columns: repeat(2, minmax(300px, 600px));
     }
+}
+
+@keyframes flowingGradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
 }

src/app/partials/_custom-text.scss

@@ -0,0 +1,30 @@
+.animatedUnderline {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+
+    &:hover:after {
+        transform-origin: bottom left;
+        transform: scaleX(1);
+    }
+
+    &:after {
+        content: '';
+        transition: transform 0.5s ease-out;
+        width: 100%;
+        height: 3px;
+        background-color: var(--primary-purple);
+        transform-origin: bottom right;
+        transform: scaleX(0);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+// .animatedUnderline {
+//     @apply inline-block cursor-pointer relative after:content-['']
+//     after:transition-transform after:duration-300
+//     after:ease-out after:w-full after:h-[2px] after:absolute after:bottom-0 after:left-0
+//     after:bg-primary-blue after:origin-bottom-right after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left
+//   }

src/app/partials/_index.scss

@@ -1,2 +1,3 @@
 @forward "./transitions";
-@forward "./font-families";
+@forward "./font-families";
+@forward "./custom-text";

src/styles.scss

@@ -15,6 +15,7 @@
     --color-scheme: light;
     --secondary-bg-color: #f5f5f5;
     --primary-purple: #a545ef;
+    --gradient-purple: #6900ba;
     --secondary-purple: #dabfff;
     --font-family: sans-serif;
     --primary-shadow-color: var(--grey);