style: gradient animation 적용 + font weight 수정 (#417)

sopt-makers · Sep 6, 2024 · 6c40a65 · 6c40a65
1 parent b1a0bbc
commit 6c40a65
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 40 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/views/MainPage/components/Banner/RecruitButton/style.ts b/src/views/MainPage/components/Banner/RecruitButton/style.ts
@@ -9,15 +9,17 @@ export const RecruitButtonWrapper = styled(Link)`
   justify-content: center;
   align-items: center;
   border-radius: 99px;
-  background: linear-gradient(274deg, #3c92ff 10%, #8fc0ff 74.12%, #3c92ff 100%);
 
-  animation: ${BackgroundMove} 3s linear infinite;
+  background: linear-gradient(274deg, #3c92ff, #8fc0ff, #8fc0ff);
+  background-size: 200% 200%;
+  animation: ${BackgroundMove} 1.8s ease-out infinite alternate;
+
   color: ${colors.gray800};
   text-align: center;
-  font-family: SUIT;
+
   font-size: 28rem;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 130%; /* 36.4px */
 
   /* 모바일 뷰 */
@@ -83,7 +85,6 @@ export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>`
       );
     opacity: 0;
     transition-duration: 0.4s;
-    transition-delay: 0.2s;
   }
 
   &:hover::before {