feat(aio): page not found layout and designs (#16089)

Add 404 svg image
h1 custom styling

PR Close #16089

aio/content/file-not-found.md

@@ -1,3 +1,9 @@
-@title
 @description
-<h3>Document not found</h3>
+
+<div class="nf-container l-flex-wrap flex-center">
+    <img src="assets/images/support/angular-404.svg" width="300px" height="300px"/>
+    <div class="nf-response l-flex-wrap">
+        <h1>Page Not Found</h1>
+        <p>We're sorry. The page you are looking for cannot be found.</p>
+    </div>
+</div>

aio/src/assets/images/support/angular-404.svg

@@ -6,21 +6,17 @@
 	.st0{fill:#E23237;}
 	.st1{fill:#B52E31;}
 	.st2{fill:#FFFFFF;}
+	.st3{fill:none;stroke:#FFFFFF;stroke-width:10;stroke-linecap:round;stroke-miterlimit:10;}
 </style>
+<g>
+	<path class="st0" d="M5.7,33.2L98.8,0l95.5,32.6l-15.4,123.1L98.8,200L20,156.3L5.7,33.2z"/>
+	<path class="st1" d="M194.3,32.6L98.8,0v200l80.1-44.3L194.3,32.6L194.3,32.6z"/>
+</g>
 <g>
 	<g>
-		<path class="st0" d="M5.7,33.2L98.8,0l95.5,32.6l-15.4,123.1L98.8,200L20,156.3L5.7,33.2z"/>
+		<circle class="st2" cx="61.7" cy="80" r="10.7"/>
-		<path class="st1" d="M194.3,32.6L98.8,0v200l80.1-44.3L194.3,32.6L194.3,32.6z"/>
+		<circle class="st2" cx="138.3" cy="80" r="10.7"/>
-	</g>
-	<g>
-		<path class="st2" d="M70,106h5.5v9.8H70v11.5H57.3v-11.5H36.1l-0.8-7.8l21.9-35.3v-0.1H70V106z M46.7,106h10.6V89.1l-0.2-0.1
-			l-1,1.5L46.7,106z"/>
-		<path class="st2" d="M119.1,105.7c0,7.4-1.7,13-5.1,16.7c-3.4,3.8-8.1,5.7-13.9,5.7c-5.9,0-10.5-1.9-13.9-5.7
-			c-3.4-3.8-5.1-9.3-5.1-16.7V94.3c0-7.4,1.7-13,5.1-16.7c3.4-3.8,8-5.7,13.9-5.7c5.8,0,10.5,1.9,13.9,5.7c3.4,3.8,5.2,9.4,5.2,16.7
-			V105.7z M106.4,93.4c0-4.2-0.6-7.2-1.7-9c-1.1-1.8-2.7-2.7-4.8-2.7c-2.1,0-3.7,0.9-4.8,2.7c-1.1,1.8-1.6,4.8-1.6,9v13.1
-			c0,4.3,0.5,7.3,1.6,9.1c1.1,1.8,2.7,2.7,4.8,2.7c2.1,0,3.7-0.9,4.7-2.7c1.1-1.8,1.6-4.9,1.6-9.1V93.4z"/>
-		<path class="st2" d="M159.1,106h5.5v9.8h-5.5v11.5h-12.7v-11.5h-21.2l-0.8-7.8l21.9-35.3v-0.1h12.7V106z M135.8,106h10.6V89.1
-			l-0.2-0.1l-1,1.5L135.8,106z"/>
 	</g>
+	<path class="st3" d="M138,130.6c0,0-33.5-42.5-76,0"/>
 </g>
 </svg>

aio/src/styles/1-layouts/_layout-global.scss

@@ -27,6 +27,9 @@ l-relative {
   flex-wrap: wrap;
 }
 
+.flex-center {
+    justify-content: center;
+}
 .flex-center {
     display: flex;
     justify-content: center;

aio/src/styles/1-layouts/_layouts-dir.scss

@@ -8,4 +8,5 @@
 @import 'top-menu';
 @import 'marketing-layout';
 @import 'footer';
-@import 'layout-global';
+@import 'layout-global';
+@import 'not-found';

aio/src/styles/1-layouts/_not-found.scss

@@ -0,0 +1,21 @@
+#file-not-found {
+    padding: 3rem 3rem 3rem;
+} 
+
+.nf-container {
+    align-items: center;
+    padding: 32px;
+}
+
+.nf-response {
+    margin: 32px;
+    height: 100%;
+    flex-direction: column;
+
+    h1 {
+        font-size: 48px;
+        color: $blue;
+        text-transform: uppercase;
+        margin: 8px 0;
+    }
+}