login screen csc

my-workspace/projects/sae-lib/src/styles/_variables.scss

@@ -53,7 +53,7 @@ $shadow-color: #dedede;
 // CSC project variables
 
 $csc-light-yellow-color: #FFF3D8;
-$csc-magic-color: #EEA100;
+$csc-magic-color: #a86FCD;
 $csc-bg-color: #F5F5F5;
 $csc-title-color: #000;
 

sae-csc/src/app/pages/login/login.html

@@ -1,18 +1,53 @@
 <div id="cscLogin">
+
   <!--  login page CSC-->
   <div class="Aligner">
-    <div class="Aligner-item Aligner-item--top">…</div>
+    <!--    <div class="Aligner-item Aligner-item&#45;&#45;top">…</div>-->
-    <div class="Aligner-item">…</div>
+    <div class="Aligner-item login-left">
-    <div class="Aligner-item Aligner-item--bottom">…</div>
+      <div class="left">
+
+        <h1 class="title">
+          Welcome to <br>
+          CSC Solution Matcher
+        </h1>
+        <div class="sub-title">
+          Your <span class="magic-text">
+        AI assistant
+        <i class="ri-sparkling-fill"></i>
+      </span> for the best solution
         </div>
-
+        <p>
-
+          First time to use CSC Solution Matcher ?
-  <div class="columns">
+          <a class="external-link" href="https://example.com/ask-access">
-    <div class="column form-login">
+          <span class="label">
+            Ask an access for login
+          </span>
+            <!--            <i class="ri-open-arm-line"></i>-->
+          </a>
+        </p>
+        <p>
+          <button class="button has-gradient">
+          <span class="label">
+          Login to start |
+          </span>
+            <i class="ri-arrow-right-line"></i>
+          </button>
+        </p>
 
       </div>
-    <div class="column bg-login">
+      <div class="Aligner-item Aligner-item--bottom">
+        <a class="external-link" href="https://example.com/technical">
+        <span class="label">
+          Contact for a technical issue
+        </span>
+          <i class="ri-open-arm-line"></i>
+        </a>
+      </div>
+    </div>
 
+    <div class="bg-login">
+      <!--      right-->
     </div>
   </div>
+  
 </div>

sae-csc/src/app/pages/login/login.scss

@@ -1,3 +1,6 @@
+@use '../../../styles/variables-barrel' as variables;
+
+
 #cscLogin {
   background: #1b1d27;
   color: white;
@@ -6,10 +9,64 @@
   height: 100vh;
   padding: 121px 127px;
 
-  .bg-login {
+
-    background: url('/safran_bg.jpg') center no-repeat;
+  .sub-title {
-    background-size: cover;
+    color: #FFF;
-    width: 600px;
+    font-family: Barlow;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    margin-bottom: 40px;
+  }
+
+
+  p {
+    margin-bottom: 40px;
+
+    a {
+      color: var(--Dark-brand-primary-400, #337DC3);
+
+      /* Body/Body 4/Sb */
+      font-family: Barlow;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 142.857% */
+      &:hover {
+        color: white;
+      }
+    }
+  }
+
+  .external-link {
+    color: #337DC3;
+    width: 100%;
+  }
+
+  .magic-text {
+    color: variables.$csc-magic-color;
+  }
+
+  .button {
+    display: inline-flex;
+    height: 44px;
+    padding: 14px 16px;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%);
+    color: var(--Light-base-solid-white, #FFF);
+    border-radius: 10px;
+    border: 0;
+
+
+    /* Body/Body 3/Sb */
+    font-family: Barlow;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
   }
 }
 
@@ -20,7 +77,19 @@
 }
 
 .Aligner-item {
-  max-width: 50%;
+  flex-direction: row;
+}
+
+.login-left {
+  padding-right: 100px;
+}
+
+.bg-login {
+  background: url(/safran_bg.jpg) center no-repeat;
+  background-size: cover;
+  width: 600px;
+  height: 100%;
+  border-radius: 8px;
 }
 
 .Aligner-item--top {