feat(templates): implement new design of 404 page of Boilerplate #8880 (

#8920)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotFoundPage.razor

@@ -2,9 +2,10 @@
 @attribute [Route("{culture?}" + Urls.NotFoundPage)]
 @inherits AppPageBase
 
-<div class="main">
-    <h1 class="title">404</h1>
-    <div class="description">
-        @Localizer[nameof(AppStrings.NotFoundText)]
-    </div>
-</div>
+<section>
+    <BitStack HorizontalAlign="BitAlignment.Center">
+        <BitImage Src="_content/Boilerplate.Client.Core/images/404.svg" Width="100%" Style="max-width:600px" />
+        <BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.NotFoundText)]</BitText>
+        <BitButton Href="@Urls.HomePage">@Localizer[nameof(AppStrings.BackToHome)]</BitButton>
+    </BitStack>
+</section>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/NotFoundPage.razor.scss

@@ -1,30 +1,7 @@
-@import '../../Styles/abstracts/_functions.scss';
-@import '../../Styles/abstracts/_media-queries.scss';
-
-.main {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-flow: column nowrap;
+section {
+    width: 100%;
+    height: 100%;
 }
 
-.title {
-    font-weight: 600;
-    font-size: rem2(120px);
-    line-height: rem2(168px);
-
-    @include lt-xl {
-        font-size: rem2(100px);
-    }
-}
-
-.description {
-    font-weight: 400;
-    font-size: rem2(18px);
-    line-height: rem2(28px);
-
-    @include lt-xl {
-        font-size: rem2(16px);
-        line-height: rem2(24px);
-    }
+::deep {
 }