feat/add not found page

src/app/app.routes.ts

@@ -4,6 +4,7 @@ import { publicGuard } from './core/guards/public-guard';
 import { Layout } from './layout/layout.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { LoginComponent } from './pages/login/login.component';
+import { NotFoundComponent } from './pages/not-found.component';
 
 export const routes: Routes = [
   {
@@ -25,10 +26,10 @@ export const routes: Routes = [
         redirectTo: 'dashboard',
         pathMatch: 'full',
       },
+      {
+        path: '**',
+        component: NotFoundComponent,
+      },
     ],
   },
-  {
-    path: '**',
-    redirectTo: 'login',
-  },
 ];

src/app/pages/not-found.component.html

@@ -0,0 +1,9 @@
+<div class="not-found-container">
+  <div class="image-container">
+    <img src="assets/svg/err.svg" alt="Error 404" />
+  </div>
+  <div class="message-container">
+    <h1 class="error-code">404</h1>
+    <h2 class="error-message">Sorry, Page Not Found</h2>
+  </div>
+</div>

src/app/pages/not-found.component.scss

@@ -0,0 +1,53 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+}
+
+h1 {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  height: 118px;
+  line-height: 118px;
+  font-weight: 500;
+}
+
+h2 {
+  font-weight: 500;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-size: 21px;
+  margin-top: 35px;
+}
+
+.not-found-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-container {
+  margin: 65px 0 25px;
+
+  img {
+    max-width: 175px;
+    height: 175px;
+  }
+}
+
+.error-code {
+  font-size: 102px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.error-message {
+  font-size: 1.5rem;
+  margin-top: 10px;
+  margin-bottom: 0;
+}

src/app/pages/not-found.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NotFoundComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/not-found.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  imports: [],
+  templateUrl: './not-found.component.html',
+  styleUrl: './not-found.component.scss',
+})
+export class NotFoundComponent {}