update 404 page and add suggested button

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>

content/404.md

@@ -0,0 +1,5 @@
+---
+title: 404 Page not Found
+date: 2022-02-19
+draft: false
+---

data/fourofour.yaml

@@ -0,0 +1,9 @@
+alternatebuttons:
+  - title: Working Groups
+    link: /groups/
+  - title: Technical Specifications
+    link: /specifications/
+  - title: Compliance Specificiations
+    link: /compliance/
+  - title: Contact Us
+    link: /contact/

themes/openpowerfoundation/layouts/404.html

@@ -1,34 +1,34 @@
-i{{ partial "header.html" . }}
-
+{{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
-
-<main>
+<main id="lost">
 <section id="lost">
-	<div class="container-fluid">
-
+<div class="container">
 	<div class="section-header">
-			<h3 class="section-title">You are lost.</h3>
-			<span class="section-divider"></span>
-			<p class="section-description">404 Not Found error</p>
+		<h3 class="section-title">{{ .Title }}</h3>
+		<p class="section-description">{{ .Content }}</p>
 	</div>
-
+	<div class="row">
+		<p>Maybe you're looking for this :</p>
+		{{ range $.Site.Data.fourofour.alternatebuttons }}
+			<div class="col-lg-3"><a class="btn btn-outline-primary" href="{{ .link | relURL }}">{{ .title }}</a></div>
+		{{ end }}
+	</div>
+	<div class="row">&nbsp;</div>
 	<div class="row">
 		<div class="col-lg-1">&nbsp;</div>
 		<div class="col-lg-10 col-lg-offset-4 text-center text-center">
-				<div class="gallery-item wow fadeInUp">
-					<img src="/img/powerlinuxlaptop.png" alt="404">
-				</div>
+			{{ $logoimagefile := "img/openpower-logo.png" }}
+			{{ $logoimageresource := resources.Get $logoimagefile }}
+			{{ $404imagefile := "img/powerlinuxlaptop.png" }}
+			{{ $404imageresource := resources.Get $404imagefile }}
+			{{ $404imageoverlay := $404imageresource.Filter (images.Overlay $logoimageresource 15 15) }}
+			{{ $404image := $404imageoverlay.Fit "800x800 webp" }}
+			<div class="gallery-item wow fadeInUp"><img src="{{ $404image.RelPermalink }}" alt="404"></div>
 		</div>
 		<div class="col-lg-1">&nbsp;</div>
 	</div>
-
-		<div class="container">&nbsp;</div>
-
 </div>
 </section>
-
 </main>
-
 <div class="container">&nbsp;</div>
-
 {{ partial "footer.html" . }}