From 68705b16cc379c6faaf12da81c24364853aa42ee Mon Sep 17 00:00:00 2001
From: quangnhankie <nhantran@kie.io>
Date: Fri, 10 Sep 2021 16:08:05 +0700
Subject: [PATCH] feat: page 404

---
 pages/404.tsx                                 |  5 ++--
 .../modules/404/404Page/404Page.module.scss   | 28 +++++++++++++++++++
 .../modules/404/404Page/404Page.tsx           | 27 ++++++++++++++++++
 src/components/modules/404/index.tsx          |  1 +
 4 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 src/components/modules/404/404Page/404Page.module.scss
 create mode 100644 src/components/modules/404/404Page/404Page.tsx
 create mode 100644 src/components/modules/404/index.tsx

diff --git a/pages/404.tsx b/pages/404.tsx
index 8a357fb51..f267c6de9 100644
--- a/pages/404.tsx
+++ b/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
diff --git a/src/components/modules/404/404Page/404Page.module.scss b/src/components/modules/404/404Page/404Page.module.scss
new file mode 100644
index 000000000..7132e63c9
--- /dev/null
+++ b/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);
+            }
+        }
+    }
+   
+}
\ No newline at end of file
diff --git a/src/components/modules/404/404Page/404Page.tsx b/src/components/modules/404/404Page/404Page.tsx
new file mode 100644
index 000000000..5319b0dfa
--- /dev/null
+++ b/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
diff --git a/src/components/modules/404/index.tsx b/src/components/modules/404/index.tsx
new file mode 100644
index 000000000..50990b601
--- /dev/null
+++ b/src/components/modules/404/index.tsx
@@ -0,0 +1 @@
+export  {default as NotFoundPage} from './404Page/404Page';
\ No newline at end of file