feat(frontend): Add "404 - Not found" page

frontend/src/app/app-routing.module.ts

@@ -5,6 +5,7 @@
 
 import { NgModule } from '@angular/core';
 import { Data, RouterModule, Routes } from '@angular/router';
+import { PageNotFoundComponent } from 'src/app/general/404/404.component';
 import { authGuard } from 'src/app/general/auth/auth-guard/auth-guard.service';
 import { JobRunOverviewComponent } from 'src/app/projects/models/backup-settings/job-run-overview/job-run-overview.component';
 import { PipelineRunWrapperComponent } from 'src/app/projects/models/backup-settings/pipeline-runs/wrapper/pipeline-run-wrapper/pipeline-run-wrapper.component';
@@ -480,6 +481,7 @@ export const routes: Routes = [
     path: 'logout',
     component: LogoutComponent,
   },
+  { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
 ];
 
 @NgModule({

frontend/src/app/general/404/404.component.html

@@ -0,0 +1,31 @@
+<!--
+ ~ SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ ~ SPDX-License-Identifier: Apache-2.0
+ -->
+
+<div class="collab-card m-2.5 mb-12 !bg-banner text-center text-white">
+  <span>404</span>
+  <h1 class="!text-3xl">Page not found</h1>
+  <span>{{ router.url }}</span>
+</div>
+
+<div class="text-center text-lg">
+  <div>
+    The requested page does not exist. Perhaps it has been moved. <br />
+    If you think this is an error, please contact your system administrator.
+  </div>
+
+  <div class="mt-5 flex justify-center gap-2">
+    <a mat-stroked-button color="primary" routerLink="/">
+      Navigate to Home <mat-icon iconPositionEnd>navigate_next</mat-icon>
+    </a>
+    <a
+      mat-stroked-button
+      color="warn"
+      href="https://github.com/DSD-DBS/capella-collab-manager/issues"
+      target="_blank"
+      rel="noopener"
+      >Open Issue on Github <mat-icon iconPositionEnd>open_in_new</mat-icon>
+    </a>
+  </div>
+</div>

frontend/src/app/general/404/404.component.ts

@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { Router, RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-404',
+  standalone: true,
+  imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule],
+  templateUrl: './404.component.html',
+  styles: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageNotFoundComponent {
+  constructor(public router: Router) {}
+}

frontend/src/app/general/404/404.stories.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Meta, StoryObj } from '@storybook/angular';
+import { PageNotFoundComponent } from './404.component';
+
+const meta: Meta<PageNotFoundComponent> = {
+  title: 'General components / 404 (Not Found)',
+  component: PageNotFoundComponent,
+};
+
+export default meta;
+type Story = StoryObj<PageNotFoundComponent>;
+
+export const NotFound: Story = {};

frontend/src/app/sessions/sessions.component.html

@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="collab-card m-2.5 mb-12 !bg-[#010035] text-center text-white">
+<div class="collab-card m-2.5 mb-12 !bg-banner text-center text-white">
   <span id="welcome">Welcome to the</span>
   <h1 class="!text-3xl">Capella Collaboration Manager</h1>
 </div>

frontend/src/styles.css

@@ -47,6 +47,7 @@ table {
   --warning-color: darkorange;
   --success-color: darkgreen;
   --hover-color: lightcyan;
+  --banner-color: #010035;
   --field-padding: 0.75em;
   --section-card-width: 32em;
 }

frontend/tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
         error: "var(--error-color)",
         warning: "var(--warning-color)",
         success: "var(--success-color)",
+        banner: "var(--banner-color)",
         hover: "var(--hover-color)",
         archived: "#D1D5DB",
         url: "#2563eb",