OV-44: Add Not found page

frontend/src/bundles/common/components/components.ts

@@ -4,6 +4,7 @@ export { Header } from './header/header.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
+export { NotFoundAnimation } from './not-found-animation/not-found-animation.js';
 export { Overlay } from './overlay/overlay.js';
 export { Player } from './player/player.js';
 export { ProtectedRoute } from './protected-route/protected-route.js';

frontend/src/bundles/common/components/not-found-animation/constants/constants.ts

@@ -0,0 +1,14 @@
+const CIRCLE_VARIANTS = {
+    animate: {
+        r: [1, 5, 10, 15, 20],
+        opacity: [0.9, 0.3, 0.2, 0.1, 0],
+    },
+};
+
+const CIRCLE_TRANSITION = {
+    repeat: Number.POSITIVE_INFINITY,
+    ease: 'easeOut',
+    duration: 2,
+};
+
+export { CIRCLE_TRANSITION, CIRCLE_VARIANTS };

frontend/src/bundles/common/components/not-found-animation/not-found-animation.tsx

@@ -0,0 +1,62 @@
+import { motion } from 'framer-motion';
+
+import {
+    CIRCLE_TRANSITION,
+    CIRCLE_VARIANTS,
+} from '../not-found-animation/constants/constants.js';
+
+const NotFoundAnimation: React.FC = () => (
+    <motion.svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 200 82.7"
+        width="500"
+        height="400"
+        aria-hidden="true"
+    >
+        <g>
+            <text
+                transform="matrix(1.2187 0 0 1 13 75.6393)"
+                fill="white"
+                fontSize="83"
+                fontFamily="FootlightMTLight"
+                aria-hidden="true"
+            >
+                4
+            </text>
+            <text
+                transform="matrix(1.2187 0 0 1 133 73.6393)"
+                fill="white"
+                fontSize="83"
+                fontFamily="FootlightMTLight"
+                aria-hidden="true"
+            >
+                4
+            </text>
+        </g>
+        <g>
+            <motion.path
+                d="M81.8,29.2c4.1-5.7,10.7-9.4,18.3-9.4c6.3,0,12.1,2.7,16.1,6.9c0.6-0.4,1.1-0.7,1.7-1.1
+                    c-4.4-4.8-10.8-7.9-17.8-7.9c-8.3,0-15.6,4.2-20,10.6C80.7,28.5,81.3,28.8,81.8,29.2z"
+                fill="white"
+                aria-hidden="true"
+            />
+            <motion.path
+                d="M118.1,53.7c-4,5.7-10.7,9.5-18.2,9.5c-6.3,0-12.1-2.6-16.2-6.8c-0.6,0.4-1.1,0.7-1.7,1.1
+                    c4.4,4.8,10.8,7.8,17.9,7.8c8.3,0,15.6-4.3,19.9-10.7C119.2,54.5,118.6,54.1,118.1,53.7z"
+                fill="white"
+                aria-hidden="true"
+            />
+            <motion.circle
+                cx="100"
+                cy="41"
+                r="1"
+                fill="white"
+                variants={CIRCLE_VARIANTS}
+                animate="animate"
+                transition={CIRCLE_TRANSITION}
+            />
+        </g>
+    </motion.svg>
+);
+
+export { NotFoundAnimation };

frontend/src/bundles/common/pages/not-found/not-found.tsx

@@ -0,0 +1,21 @@
+import {
+    Box,
+    Center,
+    Heading,
+    NotFoundAnimation,
+} from '~/bundles/common/components/components.js';
+
+const NotFound: React.FC = () => {
+    return (
+        <Center height="100vh" bg="background.900">
+            <Box textAlign="center">
+                <NotFoundAnimation />
+                <Heading variant="H3" mt={4} as="span">
+                    Page not found
+                </Heading>
+            </Box>
+        </Center>
+    );
+};
+
+export { NotFound };

frontend/src/routes/routes.tsx

@@ -2,6 +2,7 @@ import { App } from '~/app/app.js';
 import { Auth } from '~/bundles/auth/pages/auth.js';
 import { ProtectedRoute } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { NotFound } from '~/bundles/common/pages/not-found/not-found.js';
 import { Home } from '~/bundles/home/pages/home.js';
 import { MyAvatar } from '~/bundles/my-avatar/pages/my-avatar.js';
 import { Studio } from '~/bundles/studio/pages/studio.js';
@@ -43,6 +44,10 @@ const routes = [
                     </ProtectedRoute>
                 ),
             },
+            {
+                path: AppRoute.ANY,
+                element: <NotFound />,
+            },
         ],
     },
 ];