Organize CTA over authentication pages

src/app/components/authentication/login/login.component.html

@@ -45,7 +45,8 @@ <h1 class="text-xl md:text-3xl font-bold leading-tight mt-12">Log in to your acc
         </div>
 
         <div class="text-right mt-2">
-          <a routerLink="/recover" class="text-sm font-semibold text-SlateGray hover:text-BrightCyan focus:text-BrightCyan">Oops! I forgot
+          <a routerLink="/recover"
+            class="text-sm font-semibold text-SlateGray hover:text-BrightCyan focus:text-BrightCyan">Oops! I forgot
             my password</a>
         </div>
 
@@ -55,15 +56,13 @@ <h1 class="text-xl md:text-3xl font-bold leading-tight mt-12">Log in to your acc
 
       <div class="flex items-center justify-center space-x-4 my-8">
         <span class="h-px w-1/2 bg-UserProgressBar"></span>
-        <span class="text-base text-LightGray font-normal whitespace-nowrap">Still not a Player?</span>
+        <span class="text-base text-SlateGray font-normal whitespace-nowrap">Still not a Player? <a
+            routerLink="/register" class="text-BrightCyan font-medium">Register Now</a>
+        </span>
         <span class="h-px w-1/2 bg-UserProgressBar"></span>
       </div>
 
-      <p class="mt-8 text-center text-SlateGray">Join Us Today! <a routerLink="/register"
-          class="text-BrightCyan font-medium">Create
-          Account</a></p>
-
     </div>
   </div>
 
-</section>
+</section>

src/app/components/authentication/recover-account/recover-account.component.html

@@ -1 +1,55 @@
-<p>recover-account works!</p>
+<section class="flex flex-col md:flex-row h-screen items-center">
+
+  <div class="bg-indigo-600 hidden lg:block w-full md:w-1/2 xl:w-2/4 h-screen">
+    <!-- <img [src]="imageLoginURL" alt="Login Photo" class="w-full h-full object-cover"> -->
+    <div
+      class="w-full h-full hidden md:flex flex-auto items-center justify-center p-10 overflow-hidden bg-gray-400 text-white bg-no-repeat bg-cover relative"
+      style="background-image: url({{imageRecoverURL}});">
+      <div class="absolute inset-0 bg-gray-400 opacity-50"></div>
+      <div class="w-full z-10 max-w-xs mt-96 ml-60">
+        <div class="sm:text-4xl xl:text-7xl h-10 leading-tight mb-0 font-gayathri text-BrightCyan">“</div>
+        <div class="sm:text-sm xl:text-md text-white font-normal text-left">In the quest of quiz mastery, those who
+          persevere through obstacles and continually refine their strategies will stand as pioneers of the gaming realm
+        </div>
+        <div class="sm:text-sm xl:text-md text-white font-normal my-6">Marcus Reynolds</div>
+        <div class="flex justify-end"><img [src]="vectorIconRecover" alt="" class="w-5 h-5"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white w-full md:max-w-md lg:max-w-full md:mx-auto md:w-1/2 xl:w-1/3 h-screen px-6 lg:px-16 xl:px-12
+        flex items-center justify-center">
+
+    <div class="w-full h-100">
+
+      <div>
+        <h1 class="text-xl md:text-3xl font-bold leading-tight mt-12">Recover Account Password</h1>
+        <p class="text-lg text-gray-500">fill with your E-mail Address</p>
+      </div>
+
+      <hr class="my-6 border-UserProgressBar w-full">
+
+      <form class="mt-6" action="#" method="POST">
+        <div>
+          <label class="block text-CoolGrey" for="email">E-mail address</label>
+          <input type="email" name="email" id="email" placeholder="Enter e-mail address"
+            class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-BrightCyan focus:bg-white focus:outline-none"
+            autofocus autocomplete required>
+        </div>
+
+        <button type="submit" class="w-full block bg-CoolGrey hover:bg-BrightCyan focus:bg-BrightCyan text-white font-medium rounded-lg
+              px-4 py-3 mt-6">Recover Account</button>
+      </form>
+
+      <div class="flex items-center justify-center space-x-4 my-8">
+        <span class="h-px w-1/2 bg-UserProgressBar"></span>
+        <span class="text-base text-SlateGray font-normal whitespace-nowrap">Remembered password? <a routerLink="/login"
+            class="text-BrightCyan font-medium">Login</a>
+        </span>
+        <span class="h-px w-1/2 bg-UserProgressBar"></span>
+      </div>
+
+    </div>
+  </div>
+
+</section>

src/app/components/authentication/recover-account/recover-account.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-recover-account',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './recover-account.component.html',
   styleUrl: './recover-account.component.css'
 })
 export class RecoverAccountComponent {
-
+  imageRecoverURL: string = "assets/auth/recover.jpg";
+  vectorIconRecover: string = "assets/auth/login-vector.png"
 }

src/app/components/authentication/sign-up/sign-up.component.html

@@ -1 +1,69 @@
-<p>sign-up works!</p>
+<section class="flex flex-col md:flex-row h-screen items-center">
+
+  <div class="bg-indigo-600 hidden lg:block w-full md:w-1/2 xl:w-2/4 h-screen">
+    <!-- <img [src]="imageLoginURL" alt="Login Photo" class="w-full h-full object-cover"> -->
+    <div
+      class="w-full h-full hidden md:flex flex-auto items-center justify-center p-10 overflow-hidden bg-gray-400 text-white bg-no-repeat bg-cover relative"
+      style="background-image: url({{imageSignUpURL}});">
+      <div class="absolute inset-0 bg-gray-400 opacity-50"></div>
+      <div class="w-full z-10 max-w-xs mt-96 ml-60">
+        <div class="sm:text-4xl xl:text-7xl h-10 leading-tight mb-0 font-gayathri text-BrightCyan">“</div>
+        <div class="sm:text-sm xl:text-md text-white font-normal text-left">Within the landscape of problem-solving
+          adventures, the individuals who embrace the journey of learning and adaptability are destined to triumph in
+          the game of life
+        </div>
+        <div class="sm:text-sm xl:text-md text-white font-normal my-6">Sarah Hayes</div>
+        <div class="flex justify-end"><img [src]="vectorIconSignUp" alt="" class="w-5 h-5"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white w-full md:max-w-md lg:max-w-full md:mx-auto md:w-1/2 xl:w-1/3 h-screen px-6 lg:px-16 xl:px-12
+        flex items-center justify-center">
+
+    <div class="w-full h-100">
+
+      <div>
+        <h1 class="text-xl md:text-3xl font-bold leading-tight mt-12">Create a free account</h1>
+        <p class="text-lg text-gray-500">with your personal information</p>
+      </div>
+
+      <hr class="my-6 border-UserProgressBar w-full">
+
+      <form class="mt-6" action="#" method="POST">
+        <div>
+          <label class="block text-CoolGrey" for="username">Enter Username</label>
+          <input type="text" name="username" id="username" placeholder="Username"
+            class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-BrightCyan focus:bg-white focus:outline-none"
+            autofocus autocomplete required>
+        </div>
+
+        <div class="mt-4">
+          <label class="block text-CoolGrey" for="email">E-mail address</label>
+          <input type="email" name="email" id="email" placeholder="Enter e-mail address"
+            class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-BrightCyan focus:bg-white focus:outline-none"
+            autocomplete required>
+        </div>
+
+        <div class="mt-4">
+          <label class="block text-CoolGrey" for="password">Enter password</label>
+          <input type="password" name="password" id="password" placeholder="Password" minlength="6" class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-BrightCyan
+                focus:bg-white focus:outline-none" required>
+        </div>
+
+        <button type="submit" class="w-full block bg-CoolGrey hover:bg-BrightCyan focus:bg-BrightCyan text-white font-medium rounded-lg
+              px-4 py-3 mt-8">Create Account</button>
+      </form>
+
+      <div class="flex items-center justify-center space-x-4 my-8">
+        <span class="h-px w-1/2 bg-UserProgressBar"></span>
+        <span class="text-base text-SlateGray font-normal whitespace-nowrap">Already a player? <a
+            routerLink="/login" class="text-BrightCyan font-medium">Login Now</a>
+        </span>
+        <span class="h-px w-1/2 bg-UserProgressBar"></span>
+      </div>
+
+    </div>
+  </div>
+
+</section>

src/app/components/authentication/sign-up/sign-up.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-sign-up',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './sign-up.component.html',
   styleUrl: './sign-up.component.css'
 })
 export class SignUpComponent {
-
+  imageSignUpURL: string = "assets/auth/register.jpg";
+  vectorIconSignUp: string = "assets/auth/login-vector.png";
 }