Mainframe: Fix up old 404 page

Author: TasoOneAsia

assets/css/v2/style.css

@@ -1981,3 +1981,40 @@ hr {
     visibility: hidden;
   }
 }
+
+.sample-graphic {
+  width: 200px;
+  height: 200px;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: black;
+}
+
+.not-found-container {
+  display: flex;
+  margin-top: 10vh;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-m);
+
+  .info-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .info-header {
+    font-size: var(--font-step-2);
+    display: flex;
+    align-items: center;
+  }
+
+  .info-desc {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    font-size: var(--font-step-0);
+  }
+}

layouts/404.html

@@ -1,25 +1,20 @@
 {{ define "main"}}
 
-<div class="container hero">
-  <h1><i class="far fa-frown"></i></h1>
-  <h1>Page not found</h1>
-
-  <div class="row no-gutters">
-    <div class="card list-card col-md-4">
-      <div class="col-md-4">
-      </div>
-      <div class="card-body">
-
-        <div class="card-text">
-        <p>Uh oh! We couldn't find the page you were looking for.</p>
-        <p><a class="button button-solid" href="{{ "/" | absURL }}">Return to the NGINX Docs Home page.</a></p>
-      </div>
+<div class="content">
+    <div class="not-found-container">
+        <div class="sample-graphic">
+            i am a sample graphic
+        </div>
+        <div class="info-wrapper">
+            <h1 class="info-header">
+              Page not found
+            </h1>
+            <div class="info-desc">
+              <p>Uh oh! We couldn't find the page/path you were looking for.</p>
+              <a href="{{ .Site.BaseURL | relLangURL }}" aria-label="Return home">Return to the {{ .Site.Title }} homepage.</a>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
 </div>
 
-
-
-
 {{ end }}