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/animation-config.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/animation-config.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,10 +1,12 @@
+export { Animated404 } from './animated404/animated404.js';
 export { Button } from './button/button.js';
 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 { Overlay } from './overlay/overlay.js';
 export { Player } from './player/player.js';
+export { ProtectedRoute } from './protected-route/protected-route.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export { VideoModal } from './video-modal/video-modal.js';
 export { DownloadIcon } from '@chakra-ui/icons';
@@ -30,4 +32,4 @@ export {
 } from '@chakra-ui/react';
 export { FormikProvider as FormProvider } from 'formik';
 export { Provider as StoreProvider } from 'react-redux';
-export { Outlet as RouterOutlet } from 'react-router-dom';
+export { Navigate, Outlet as RouterOutlet } from 'react-router-dom';

frontend/src/bundles/common/components/protected-route/protected-route.tsx

@@ -0,0 +1,14 @@
+import { Navigate } from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+
+interface Properties {
+    children: React.ReactNode;
+}
+
+const ProtectedRoute: React.FC<Properties> = ({ children }) => {
+    // TODO: When persistence is implemented, the user will be taken from the store. The following line is temporary
+    const user = true;
+    return user ? children : <Navigate to={AppRoute.SIGN_IN} replace />;
+};
+
+export { ProtectedRoute };

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/router/routes.tsx

@@ -1,14 +1,36 @@
 import { App } from '~/app/app.js';
-import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
-
-import { protectedRoutes } from './routes/protected-routes.js';
-import { publicRoutes } from './routes/public-routes.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 { Studio } from '~/bundles/studio/pages/studio.js';
 
 const routes = [
     {
         path: AppRoute.ROOT,
         element: <App />,
-        children: [protectedRoutes, ...publicRoutes],
+        children: [
+            {
+                path: AppRoute.SIGN_IN,
+                element: <Auth />,
+            },
+            {
+                path: AppRoute.SIGN_UP,
+                element: <Auth />,
+            },
+            {
+                path: AppRoute.STUDIO,
+                element: (
+                    <ProtectedRoute>
+                        <Studio />,
+                    </ProtectedRoute>
+                ),
+            },
+            {
+                path: AppRoute.ANY,
+                element: <NotFound />,
+            },
+        ],
     },
 ];