From 84fbccaf6ec748da51bc75f48becd85ece244978 Mon Sep 17 00:00:00 2001
From: XCODE89 <maph0989@gmail.com>
Date: Thu, 22 Aug 2024 16:18:57 -0400
Subject: [PATCH] OV-44: + not found page

---
 .../common/components/not-found/not-found.tsx | 79 +++++++++++++++++++
 .../src/router/routes/protected-routes.tsx    |  5 +-
 2 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/bundles/common/components/not-found/not-found.tsx

diff --git a/frontend/src/bundles/common/components/not-found/not-found.tsx b/frontend/src/bundles/common/components/not-found/not-found.tsx
new file mode 100644
index 000000000..9e5de2c21
--- /dev/null
+++ b/frontend/src/bundles/common/components/not-found/not-found.tsx
@@ -0,0 +1,79 @@
+import { Box, Center, Text } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+
+const NotFound: React.FC = () => {
+    const circleAnimation = {
+        r: [1, 5, 10, 15, 20],
+        opacity: [0.9, 0.3, 0.2, 0.1, 0],
+    };
+
+    const circleTransition = {
+        repeat: Number.POSITIVE_INFINITY,
+        ease: 'easeOut',
+        duration: 2,
+    };
+
+    return (
+        <Center height="100vh" background="background.900">
+            <Box textAlign="center">
+                <motion.svg
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 200 82.7"
+                    width="500px"
+                    height="400px"
+                    aria-label="404 Page not found"
+                >
+                    <g>
+                        <text
+                            transform="matrix(1.2187 0 0 1 13 75.6393)"
+                            fill="white"
+                            fontSize="83.0285px"
+                            fontFamily="FootlightMTLight"
+                        >
+                            4
+                        </text>
+                        <text
+                            transform="matrix(1.2187 0 0 1 133.0003 73.6393)"
+                            fill="white"
+                            fontSize="83.0285px"
+                            fontFamily="FootlightMTLight"
+                        >
+                            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"
+                        />
+                        <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"
+                        />
+                        <motion.circle
+                            cx="100"
+                            cy="41"
+                            r="1"
+                            fill="white"
+                            animate={circleAnimation}
+                            transition={circleTransition}
+                        />
+                    </g>
+                </motion.svg>
+                <Text
+                    fontSize="2xl"
+                    color="brand.secondary.900"
+                    mt={4}
+                    as="span"
+                >
+                    [Page not found]
+                </Text>
+            </Box>
+        </Center>
+    );
+};
+
+export { NotFound };
diff --git a/frontend/src/router/routes/protected-routes.tsx b/frontend/src/router/routes/protected-routes.tsx
index 4724f0a4b..942cc7068 100644
--- a/frontend/src/router/routes/protected-routes.tsx
+++ b/frontend/src/router/routes/protected-routes.tsx
@@ -1,5 +1,4 @@
-import { Navigate } from 'react-router-dom';
-
+import { NotFound } from '~/bundles/common/components/not-found/not-found.js';
 import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
 import { Studio } from '~/bundles/studio/pages/studio.js';
 
@@ -16,7 +15,7 @@ const protectedRoutes = {
         },
         {
             path: AppRoute.ANY,
-            element: <Navigate to={AppRoute.ROOT} replace />,
+            element: <NotFound />,
         },
     ],
 };