feat : slicing login page

scss/landingpage/_general.scss

@@ -81,7 +81,7 @@
     width: 100%;
     padding: 0px;
     position: relative;
-    background-image: url('@/assets/images/landingpage/shape/line-bg.svg');
+    // background-image: url('@/assets/images/landingpage/shape/line-bg.svg');
     background-repeat: no-repeat;
     background-position: center center;
 }
@@ -94,7 +94,7 @@
     width: 100%;
     padding: 0px;
     position: relative;
-    background-image: url('@/assets/images/landingpage/shape/line-bg-2.svg');
+    // background-image: url('@/assets/images/landingpage/shape/line-bg-2.svg');
     background-repeat: no-repeat;
     background-position: center center;
 }

scss/pages/_auth.scss

@@ -1,114 +1,55 @@
-.auth{
-    z-index: 2;
-}
-.auth-card{
-    width: 100%;
-    max-width: 460px;
-}
+.login-page {
+    min-height: 100vh;
 
-.min-vh-100{
-    min-height: 100vh !important;
-}
+    .login-form-panel {
+        background-color: #fff;
+    }
 
-.auth-divider{
-    span{
+    .login-form-wrap {
+        max-width: 440px;
+    }
+
+    .right-panel {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .right-panel-content {
+        position: relative;
         z-index: 1;
+        width: 90%;
     }
-    &::before{
-        position: absolute;
+
+    .hero-image {
+        display: block;
         width: 100%;
-        border-top: thin solid rgb(229, 234, 239);
-        top: 50%;
-        content: "";
-        transform: translateY(50%);
-        left: 0;
     }
-    &::after
-    {
-        position: absolute;
-        width: 100%;
-        border-top: thin solid rgb(var(--v-theme-borderColor));
-        top: 50%;
-        content: "";
-        transform: translateY(50%);
-        right: 0;
-    }   
-}
 
-
-.circle-top {
-    position: absolute;
-    top: -33%;
-    left: -14%;
-    border: 120px solid #0b2947;
-    height: 700px;
-    width: 700px;
-    display: block;
-    background: 0 0;
-    border-radius: 100%;
-    z-index: 1;
-}
-.circle-bottom {
-    img{
-    position: absolute;
-    bottom: 0;
-    right: 1%;
-    height: 450px;
-    width: 450px;
-    display: block;
-    background: 0 0;
-    z-index: 1;
-    opacity: .5;
+    .feature-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
     }
-    
-}
 
-.auth-login {
-    max-width: 1160px !important;
-}
-.auth-bg {
-    background: url(@/assets/images/backgrounds/login-bg.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 100%;
-    .v-carousel__controls{
-        height: auto;
-        .v-btn{
-            margin: 0 0 !important;
-             
-            &.v-btn--active{
-                .v-btn__content{
-                    color:rgb(var(--v-theme-primary)) !important;
-                    .v-icon{
-                        opacity: 1 !important ;
-                    }
-                }
-            }
-            .v-btn__content{
-                    .v-icon{
-                        opacity: 1 !important ;
-                    }
-            }
+    .feature-pill {
+        display: flex;
+        align-items: center;
+        min-height: 48px;
+        padding: 0 14px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 14px;
+        color: #fff;
+        font-size: 0.95rem;
+        font-weight: 500;
+        background: rgba(255, 255, 255, 0.12);
+    }
+
+    .btn-login {
+        transition: all 0.3s ease;
+
+        &:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
         }
-        
     }
 }
-
-
-
-.h-n80 {
-    height: calc(100vh - 80px);
-}
-
-@media screen and (max-width:1280px){
-    .mh-100{
-        height: 100% !important;
-    } 
-}
-
-@media screen and (max-width:600px){
-    .mw-100{
-        width: 100%;
-        padding: 0 15px;
-    } 
-}