Complete Sign In Component

src/app/share/footer/footer.component.html

@@ -1 +0,0 @@
-<h1>NGU</h1>

src/app/share/header/header.component.html

@@ -1,24 +1,24 @@
 <header class="header">
   <div class="header__logo">
-    <a class="header__logo-link" [routerLink]="['/home']">
+    <a class="header__logo-link" [routerLink]="['home']">
       <img [priority]="true" ngSrc="/assets/images/brand-logo.png" alt="logo" height="69.087" width="157">
     </a>
   </div>
   <div class="header__menu">
     <ul class="header__menu-list">
       <li class="header__menu-item">
-        <a class="header__menu-item-link" [routerLink]="['/home']" [routerLinkActive]="['active']">TRANG CHỦ</a>
+        <a class="header__menu-item-link" [routerLink]="['home']" [routerLinkActive]="['active']">TRANG CHỦ</a>
       </li>
       <li class="header__menu-item">
-        <a class="header__menu-item-link" [routerLink]="['/courses']" [routerLinkActive]="['active']">KHÓA HỌC</a>
+        <a class="header__menu-item-link" [routerLink]="['courses']" [routerLinkActive]="['active']">KHÓA HỌC</a>
       </li>
       <li class="header__menu-item">
-        <a class="header__menu-item-link" [routerLink]="['/about-us']" [routerLinkActive]="['active']">VỀ CHÚNG TÔI</a>
+        <a class="header__menu-item-link" [routerLink]="['about-us']" [routerLinkActive]="['active']">VỀ CHÚNG TÔI</a>
       </li>
     </ul>
   </div>
   <div class="header__buttons">
-    <a class="header__button header__button--sign-in" [routerLink]="['/sign-in']">Đăng nhập</a>
-    <a class="header__button header__button--sign-up" [routerLink]="['/sign-up']">Đăng ký</a>
+    <a class="header__button header__button--sign-in" [routerLink]="['sign-in']">Đăng nhập</a>
+    <a class="header__button header__button--sign-up" [routerLink]="['sign-up']">Đăng ký</a>
   </div>
 </header>

src/app/share/header/header.component.scss

@@ -17,9 +17,9 @@
   &-list {
     list-style-type: none;
     display: flex;
-    gap: 6rem;
     align-items: center;
     padding: 1rem;
+    gap: 6rem;
   }
 
   &-item-link {
@@ -66,3 +66,7 @@
   background-color: $on-surface;
   color: $white;
 }
+
+@media (max-width: 992px) {
+
+}

src/app/sign-in/sign-in.component.html

@@ -1 +1,29 @@
-<p>sign-in works!</p>
+<div class="sign-in">
+  <h1 class="sign-in__title">Đăng nhập</h1>
+  <form class="sign-in__form">
+    <div class="sign-in__inputs">
+      <div class="sign-in__input-wrapper">
+        <label class="sign-in__label" for="email">Email</label>
+        <input type="email" id="email" class="sign-in__input" placeholder="Email"/>
+      </div>
+      <div class="sign-in__input-wrapper">
+        <label class="sign-in__label" for="password">Mật khẩu (tối thiểu 12 kí tự bao gồm....)</label>
+        <input type="password" id="password" class="sign-in__input" placeholder="Mật khẩu (tối thiểu 12 kí tự bao gồm....)"/>
+      </div>
+    </div>
+    <div class="sign-in__options">
+      <div class="sign-in__remember">
+        <input type="checkbox" id="remember" class="sign-in__checkbox"/>
+        <label for="remember" class="sign-in__checkbox-label">Duy trì đăng nhập</label>
+      </div>
+      <a href="#" class="sign-in__forgot">Quên mật khẩu</a>
+    </div>
+    <div class="sign-in__actions">
+      <button type="submit" class="sign-in__submit">Đăng nhập</button>
+      <div class="sign-in__signup">
+        <span>Bạn chưa có tài khoản?</span>
+        <a href="#" class="sign-in__signup-link">Đăng kí ngay</a>
+      </div>
+    </div>
+  </form>
+</div>

src/app/sign-in/sign-in.component.scss

@@ -0,0 +1,117 @@
+@import "styles";
+
+.sign-in {
+  width: 768px;
+  height: 550px;
+  padding: 8rem;
+  margin: 8rem auto 40rem auto;
+  border: 0.2rem solid $secondary2;
+  border-radius: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4rem;
+}
+
+.sign-in__title {
+  color: $on-surface;
+  @include font-heading-3
+}
+
+.sign-in__form {
+  width: 608px;
+  display: flex;
+  flex-direction: column;
+  gap: 3.6rem;
+}
+
+.sign-in__inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.sign-in__input-wrapper {
+  display: flex;
+}
+
+.sign-in__input-wrapper label {
+  display: none; /* Hide label as the original HTML does not use visible labels */
+}
+
+
+.sign-in__input {
+  flex: 1 1 auto;
+  padding: 1.6rem 2rem;
+  @include font-caption-1;
+  color: $secondary2;
+  background: $white;
+  border-radius: 8px;
+  border: 1px solid $line;
+}
+
+.sign-in__options {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sign-in__remember {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 12px;
+}
+
+.sign-in__checkbox {
+  width: 20px;
+  height: 20px;
+  background: $white;
+  border: 2px solid $primary;
+}
+
+.sign-in__checkbox-label {
+  color: $on-surface;
+  @include font-body-title
+}
+
+.sign-in__forgot {
+  color: $on-surface;
+  @include font-body-title;
+  text-decoration: none;
+}
+
+.sign-in__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.sign-in__submit {
+  padding: 10px 200px;
+  color: $white;
+  background: $primary;
+  @include font-button;
+  text-transform: capitalize;
+  border-radius: 0.8rem;
+  border: none;
+  cursor: pointer;
+}
+
+.sign-in__signup {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sign-in__signup > span {
+  @include font-body-title;
+}
+
+.sign-in__signup-link {
+  color: $primary;
+  @include font-body-title;
+  text-decoration: none;
+}
+
+

src/styles/_mixins.scss

@@ -65,7 +65,7 @@
 ;
 @mixin font-body-title() {
   font-size: 1.6rem;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 2.4rem;
 }