OV-44: Add Not found page

frontend/src/bundles/common/components/animated404/animated404.tsx

@@ -0,0 +1,62 @@
+import { motion } from 'framer-motion';
+
+import {
+    CIRCLE_TRANSITION,
+    CIRCLE_VARIANTS,
+} from './libs/constants/constants.js';
+
+const Animated404: 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 { Animated404 };

frontend/src/bundles/common/components/animated404/libs/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/components.ts

@@ -1,3 +1,4 @@
+export { Animated404 } from './animated404/animated404.js';
 export { Button } from './button/button.js';
 export { Header } from './header/header.js';
 export { Input } from './input/input.js';

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

@@ -0,0 +1,22 @@
+import {
+    Box,
+    Center,
+    Heading,
+} from '~/bundles/common/components/components.js';
+
+import { Animated404 } from '../../components/animated404/animated404.js';
+
+const NotFound: React.FC = () => {
+    return (
+        <Center height="100vh" bg="background.900">
+            <Box textAlign="center">
+                <Animated404 />
+                <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 />,
+            },
         ],
     },
 ];