feat: page 404

pages/404.tsx

@@ -1,11 +1,10 @@
-import { Layout } from "src/components/common"
+import { NotFoundPage } from "src/components/modules/404"
 
 export default function NotFound() {
   return (
     <div>
-        The requested page doesn't exist or you don't have access to it.
+       <NotFoundPage/>
     </div>
   )
 }
 
-NotFound.Layout = Layout

src/components/modules/404/404Page/404Page.module.scss

@@ -0,0 +1,28 @@
+.wrapper{
+    @apply flex justify-center;
+    text-align: center;
+    height:100%;
+  
+    background-color: white;
+    .inner{
+        height: 100vh;
+        .logo{
+            margin-top: 2rem;
+        }
+        .text{
+            @apply flex justify-center;
+            align-items: center;   
+            width: 100%;
+            height:80%;
+           
+            h1{
+                font-weight: bold;
+                font-size: 17rem;
+                color: var(--primary);
+                font-family: var(--font-heading);
+                text-shadow: 2px 4px 5px var(--primary);
+            }
+        }
+    }
+   
+}

src/components/modules/404/404Page/404Page.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Logo } from 'src/components/common'
+import s from './404Page.module.scss'
+
+interface Props {
+}
+
+const NotFoundPage = ({ }: Props) => {
+    return (
+       
+        <div className={s.wrapper}>
+            <div className={s.inner}>
+                <div className={s.logo}>
+                    <Logo/>
+                </div>
+
+                <div className={s.text}>
+                    <h1>
+                        404
+                    </h1>
+                </div>
+            </div>
+        </div >
+    )
+}
+
+export default NotFoundPage

src/components/modules/404/index.tsx

@@ -0,0 +1 @@
+export  {default as NotFoundPage} from './404Page/404Page';