page not found enrichment

src/app/shared/components/page-not-found/page-not-found.component.html

@@ -1,8 +1,25 @@
 <app-header></app-header>
-<section class="hero is-warning is-medium">
+<section class="hero is-info is-medium">
 	<div class="hero-body">
 		<div class="container">
-			<h1 class="title has-text-centered">o_O {{ message | translate }}</h1>
+			<h1 class="title has-text-centered">
+				o_O <br />
+				{{ message | translate }}
+			</h1>
+			<div class="support has-text-centered">
+				<h2 class="title is-2">Support</h2>
+				<a class="button marged-right is-info" href="mailto:{{ env.appSupportEmail }}">
+					<i class="fa fa-envelope"></i>
+					mail
+				</a>
+				<a class="button is-info" href="{{ env.appSupportWebpage }}">
+					<i class="fa fa-comment"></i>
+					Autres canaux
+				</a>
+			</div>
+			<div class="marged-v">
+				<img src="../../../../assets/img/undraw_Moving_twwf.svg" alt="calendrier icone framadate" />
+			</div>
 		</div>
 	</div>
 </section>

src/app/shared/components/page-not-found/page-not-found.component.scss

@@ -1,4 +1,6 @@
-:host {
+.hero-body {
+	padding-top: 5rem;
+	min-height: 50vh;
 	.title {
 		color: #222;
 	}

src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { environment } from '../../../../environments/environment';
 
 @Component({
 	selector: 'app-page-not-found',
@@ -8,4 +9,5 @@ import { Component, Input } from '@angular/core';
 export class PageNotFoundComponent {
 	@Input()
 	public message = 'PAGE_NOT_FOUND.DEFAULT';
+	env: any = environment;
 }