Update styles

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/UdemyCoursePromotionCard/styles.ts

@@ -2,11 +2,13 @@ import styled, { keyframes } from "styled-components";
 
 const blurAnimation = keyframes`
   0% { opacity: 0; }
+  40% { opacity: 0; }
+  60% { opacity: 1; }
   100% { opacity: 1; }
 `;
 
 export const AnimatedPromotionBackground = styled.div`
   position: absolute;
   top: 0;
-  animation: 1s ${blurAnimation} linear infinite alternate;
+  animation: 5s ${blurAnimation} linear infinite alternate;
 `;

src/components/Insights/InsightsCatalog/PromotionSection/PromotionCard/styles.ts

@@ -55,14 +55,16 @@ export const Description = styled.span`
 `;
 
 const shineAnimation = keyframes`
-  0% { left: -33%; }
-  50% {left: 33%}
-  100% { left: -33%; }
+  0% { left: -100%; }
+  25% { left: 0%; }
+  50% { left: 100%; }
+  100% { left: 100%; }
 `;
 
 export const AccessCourseButton = styled(Button)`
   padding: 6px 8px;
   position: relative;
+  overflow: hidden;
 
   &::before {
     content: "";
@@ -77,7 +79,7 @@ export const AccessCourseButton = styled(Button)`
       rgb(255 255 255 / 35%),
       rgb(255 255 255 / 0%) 70%
     );
-    animation: ${shineAnimation} 2s infinite linear;
+    animation: ${shineAnimation} 3s infinite linear;
   }
 `;
 

src/components/Main/RegistrationCard/index.tsx

@@ -11,7 +11,7 @@ import { SuccessRegistration } from "./SuccessRegistration";
 import type { RegistrationCardProps } from "./types";
 
 const TRANSITION_CLASS_NAME = "registration-card";
-const DEFAULT_TRANSITION_DURATION = 1000;
+const DEFAULT_TRANSITION_DURATION = 300;
 
 export const RegistrationCard = ({
   onClose,

src/components/Main/RegistrationCard/styles.ts

@@ -59,9 +59,10 @@ export const FormContainer = styled.div`
 
 export const Register = styled(RegisterForm)`
   flex-direction: column;
+  gap: 3px;
 
   form {
-    gap: 2px;
+    gap: 4px;
   }
 `;