feat(login): implement auth layout and restructure login page with improved styling and structure

src/app/core/layout/auth-layout/auth-layout.component.html

@@ -0,0 +1,13 @@
+<section class="auth-layout">
+  <div class="auth-layout__container container-xl">
+    <div class="auth-layout__row row justify-content-center">
+      <div class="auth-layout__column col-12 col-md-9 col-lg-7 col-xl-5">
+        <article class="auth-layout__card card border-0 shadow-lg">
+          <div class="auth-layout__body card-body">
+            <router-outlet />
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>

src/app/core/layout/auth-layout/auth-layout.component.scss

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+
+.auth-layout {
+  padding: 1.5rem 0 2rem;
+}
+
+.auth-layout__container {
+  padding-inline: 1rem;
+}
+
+.auth-layout__row {
+  padding-block: 1rem;
+}
+
+.auth-layout__card {
+  border-radius: 1.5rem;
+  overflow: hidden;
+}
+
+.auth-layout__body {
+  padding: 2rem 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .auth-layout {
+    padding: 3rem 0;
+  }
+
+  .auth-layout__container {
+    padding-inline: 1.5rem;
+  }
+
+  .auth-layout__row {
+    padding-block: 1.5rem;
+  }
+
+  .auth-layout__body {
+    padding: 3rem;
+  }
+}

src/app/core/layout/auth-layout/auth-layout.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-auth-layout',
+  imports: [RouterOutlet],
+  templateUrl: './auth-layout.component.html',
+  styleUrl: './auth-layout.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AuthLayoutComponent {}

src/app/features/store/pages/login-page/login-page.component.html

@@ -1,16 +1,8 @@
-<section class="py-4 py-md-5">
+<header class="login-page__header text-center">
-  <div class="container-xl px-3 px-md-4">
+  <h1 id="login-title" class="login-page__title">Iniciar sesión</h1>
-    <div class="row justify-content-center py-md-4">
+</header>
-      <div class="col-12 col-md-9 col-lg-7 col-xl-5">
-        <article class="card border-0 shadow-lg rounded-4">
-          <div class="card-body p-4 p-md-5">
-            <header class="text-center mb-4">
-              <h1 id="login-title" class="fw-bold text-uppercase mb-0" style="font-size: 17px; color: #666666;">
-                Iniciar sesión
-              </h1>
-            </header>
 
-            <form class="d-grid gap-3" novalidate aria-labelledby="login-title">
+<form class="login-page__form d-grid gap-3" novalidate aria-labelledby="login-title">
   <div class="d-grid gap-3">
     <label class="visually-hidden" for="login-email">Email</label>
     <app-input id="login-email" type="email" placeholder="Email" />
@@ -19,11 +11,7 @@
       <label class="visually-hidden" for="login-password">Contraseña</label>
       <app-input id="login-password" type="password" placeholder="Contrasena" />
       <div class="text-end">
-                    <button
+        <button type="button" class="login-page__forgot-password btn btn-link p-0 border-0 text-decoration-none">
-                      type="button"
-                      class="btn btn-link p-0 border-0 text-decoration-none"
-                      style="font-size: 12px; font-weight: 325; color: #A0A0A0;"
-                    >
           Olvidé mi contraseña
         </button>
       </div>
@@ -32,31 +20,24 @@
 
   <div class="d-grid gap-2 text-center">
     <app-button hostClass="w-100 d-block" buttonClass="w-100">Ingresar</app-button>
-                <button
+    <button type="button" class="login-page__create-account btn btn-link border-0 text-decoration-none px-3 py-2">
-                  type="button"
-                  class="btn btn-link border-0 text-decoration-none fw-bold px-3 py-2"
-                  style="min-height: 40px;"
-                >
       Crear cuenta
     </button>
   </div>
-            </form>
+</form>
 
-            <div class="d-flex align-items-center justify-content-center gap-3 my-4" aria-hidden="true">
+<div class="login-page__divider d-flex align-items-center justify-content-center gap-3" aria-hidden="true">
-              <span class="flex-grow-1" style="max-width: 18rem; height: 1px; background-color: #d9d9d9;"></span>
+  <span class="login-page__divider-line flex-grow-1"></span>
-              <span
+  <span class="login-page__divider-dot rounded-circle border flex-shrink-0"></span>
-                class="rounded-circle border flex-shrink-0"
+  <span class="login-page__divider-line flex-grow-1"></span>
-                style="width: 16px; height: 16px; border-color: #d9d9d9 !important; background-color: #ffffff;"
+</div>
-              ></span>
-              <span class="flex-grow-1" style="max-width: 18rem; height: 1px; background-color: #d9d9d9;"></span>
-            </div>
 
-            <app-button
+<app-button
   variant="neutral-outline"
   hostClass="w-100 d-block"
   buttonClass="w-100 d-inline-flex align-items-center justify-content-center gap-2 py-2 fw-semibold"
   [disabled]="true"
-            >
+>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
@@ -82,10 +63,4 @@
     />
   </svg>
   <span>Continuar con Google</span>
-            </app-button>
+</app-button>
-          </div>
-        </article>
-      </div>
-    </div>
-  </div>
-</section>

src/app/features/store/pages/login-page/login-page.component.scss

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+}
+
+.login-page__header {
+  margin-bottom: 1.5rem;
+}
+
+.login-page__title {
+  margin: 0;
+  color: #666666;
+  font-size: 17px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.login-page__form {
+  width: 100%;
+}
+
+.login-page__forgot-password {
+  color: #a0a0a0;
+  font-size: 12px;
+  font-weight: 325;
+}
+
+.login-page__create-account {
+  min-height: 40px;
+  font-weight: 700;
+}
+
+.login-page__divider {
+  margin-block: 1.5rem;
+}
+
+.login-page__divider-line {
+  max-width: 18rem;
+  height: 1px;
+  background-color: #d9d9d9;
+}
+
+.login-page__divider-dot {
+  width: 16px;
+  height: 16px;
+  border-color: #d9d9d9 !important;
+  background-color: #ffffff;
+}

src/app/features/store/store.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 
+import { AuthLayoutComponent } from '../../core/layout/auth-layout/auth-layout.component';
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
 import { LoginPageComponent } from './pages/login-page/login-page.component';
 import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
@@ -15,7 +16,13 @@ export const routes: Routes = [
       },
       {
         path: 'login',
+        component: AuthLayoutComponent,
+        children: [
+          {
+            path: '',
             component: LoginPageComponent
+          }
+        ]
       },
       {
         path: 'producto/:id',