ok

src/pages/Join.module.css

@@ -6,6 +6,7 @@
   flex-direction: column;
   justify-content: center;
   background-color: rgb(232 204 88);
+  overflow: hidden;
 }
 
 
@@ -72,6 +73,15 @@
   margin-bottom: 1.5rem;
 }
 
+.subHeadingTransparent {
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 14px;
+  font-family: 'poppins';
+  color: transparent;
+  margin-bottom: -2.5rem;
+}
+
 /* Form */
 .linktreeForm {
   display: flex;
@@ -127,6 +137,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  margin-bottom: 14px;
 }
 
 .footerLink {
@@ -159,3 +170,129 @@
   margin-top: -50px;
   margin-bottom: 30px;
 }
+
+
+.LoginForm {
+  display: inline-flex;
+  position: relative;
+  height: 237px;
+}
+
+/* Form */
+.FormUsername {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  left: 0vw;
+}
+
+.FormUsername.animateForm {
+  animation: FormUsernameProgress 0.5s forwards;
+  /* Apply the animation when inputtingPassword is true */
+}
+
+.FormUsername.reverseForm {
+  animation: FormUsernameReverse 0.5s forwards;
+  /* Reverse animation when inputtingPassword is false */
+}
+
+@keyframes FormUsernameProgress {
+  0% {
+    left: 0vw;
+  }
+
+  100% {
+    left: -100vw;
+  }
+}
+
+@keyframes FormUsernameReverse {
+  0% {
+    left: -100vw;
+  }
+
+  100% {
+    left: 0vw;
+  }
+}
+
+.FormPassword {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  left: 100vw;
+}
+
+.FormPassword.animateForm {
+  animation: FormPasswordProgress 0.5s forwards;
+  /* Apply the animation when inputtingPassword is true */
+}
+
+.FormPassword.reverseForm {
+  animation: FormPasswordReverse 0.5s forwards;
+  /* Reverse animation when inputtingPassword is false */
+}
+
+@keyframes FormPasswordProgress {
+  0% {
+    left: 100vw;
+  }
+
+  100% {
+    left: 0vw;
+  }
+}
+
+@keyframes FormPasswordReverse {
+  0% {
+    left: 0vw;
+  }
+
+  99.9% {
+    left: 100vw;
+    visibility: hidden;
+  }
+  100% {
+    left: 0vw;
+    visibility: hidden;
+  }
+}
+
+
+.usernameLabel {
+  font-size: 0.875rem;
+  color: #444;
+  margin-bottom: 5px;
+  position: relative;
+}
+
+.usernameInputError {
+  width: 250px;
+  height: 55px;
+  padding-left: 10px;
+  font-size: 1rem;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  border: 2px solid red;
+  /* Red border when error is true */
+  margin-top: 5px;
+  margin-bottom: 15px;
+
+  /* Apply keyframe animation for border color transition */
+  animation: borderTransition 2s ease-in-out forwards;
+}
+
+/* Keyframe animation for border color transition */
+@keyframes borderTransition {
+  0% {
+    border-color: red;
+    /* Initial red border */
+  }
+
+  100% {
+    border-color: transparent;
+    /* Transition to transparent */
+  }
+}