Add custom 404 page

lib/router.dart

@@ -10,6 +10,8 @@ import 'package:wonders/ui/screens/intro/intro_screen.dart';
 import 'package:wonders/ui/screens/timeline/timeline_screen.dart';
 import 'package:wonders/ui/screens/wonder_details/wonders_details_screen.dart';
 
+import 'ui/screens/page_not_found/page_not_found.dart';
+
 /// Shared paths / urls used across the app
 class ScreenPaths {
   static String splash = '/';
@@ -62,6 +64,7 @@ AppRoute get _collectionRoute {
 /// Routing table, matches string paths to UI Screens, optionally parses params from the paths
 final appRouter = GoRouter(
   redirect: _handleRedirect,
+  errorPageBuilder: (context, state) => MaterialPage(child: PageNotFound(state.uri.toString())),
   routes: [
     ShellRoute(
         builder: (context, router, navigator) {

lib/ui/common/wonderous_logo.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:wonders/assets.dart';
+
+class WonderousLogo extends StatelessWidget {
+  const WonderousLogo({super.key, this.width = 100});
+
+  final double width;
+
+  @override
+  Widget build(BuildContext context) => Image.asset(
+        ImagePaths.appLogoPlain,
+        fit: BoxFit.cover,
+        width: width,
+        filterQuality: FilterQuality.high,
+      );
+}

lib/ui/screens/home_menu/home_menu.dart

@@ -7,6 +7,7 @@ import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/controls/app_header.dart';
 import 'package:wonders/ui/common/controls/locale_switcher.dart';
 import 'package:wonders/ui/common/pop_navigator_underlay.dart';
+import 'package:wonders/ui/common/wonderous_logo.dart';
 import 'package:wonders/ui/screens/home_menu/about_dialog_content.dart';
 
 class HomeMenu extends StatefulWidget {
@@ -32,12 +33,7 @@ class _HomeMenuState extends State<HomeMenu> {
       applicationIcon: Container(
         color: $styles.colors.black,
         padding: EdgeInsets.all($styles.insets.xs),
-        child: Image.asset(
-          ImagePaths.appLogoPlain,
-          fit: BoxFit.cover,
-          width: 52,
-          filterQuality: FilterQuality.high,
-        ),
+        child: WonderousLogo(width: 52),
       ),
     );
   }

lib/ui/screens/page_not_found/page_not_found.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:wonders/common_libs.dart';
+import 'package:wonders/ui/common/themed_text.dart';
+import 'package:wonders/ui/common/wonderous_logo.dart';
+
+class PageNotFound extends StatelessWidget {
+  const PageNotFound(String url, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    void handleHomePressed() => context.go(ScreenPaths.home);
+
+    return Scaffold(
+      backgroundColor: $styles.colors.black,
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            WonderousLogo(),
+            Gap(10),
+            Text(
+              'Wonderous',
+              style: $styles.text.wonderTitle.copyWith(color: $styles.colors.accent1, fontSize: 28),
+            ),
+            Gap(70),
+            Text(
+              'The page you are looking for does not exist.',
+              style: $styles.text.body.copyWith(color: $styles.colors.offWhite),
+            ),
+            Gap(70),
+            AppBtn(
+              minimumSize: Size(200, 0),
+              bgColor: $styles.colors.offWhite,
+              onPressed: handleHomePressed,
+              semanticLabel: 'Back',
+              child: DarkText(
+                child: Text(
+                  'Back to civilization',
+                  style: $styles.text.btn.copyWith(fontSize: 12),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}