From c86948219cd2a5a401a933ce03c743de44484cf3 Mon Sep 17 00:00:00 2001
From: john <john@mx.com>
Date: Wed, 11 May 2022 06:03:31 +0700
Subject: [PATCH] enhance 404 page

---
 src/index.js          |  3 ++-
 src/lang/en.js        |  4 ++++
 src/lang/fr.js        |  4 ++++
 src/lang/tw.js        |  4 ++++
 src/pages/NotFound.js | 45 +++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/NotFound.js

diff --git a/src/index.js b/src/index.js
index f037319..367e00e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import { Home, Farm } from './pages'
 import reportWebVitals from './reportWebVitals'
 import * as serviceWorker from './serviceWorker'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { NotFound } from './pages/NotFound'
 
 const element = document.getElementById('root')
 const root = createRoot(element)
@@ -18,7 +19,7 @@ root.render(
           <Route index element={<Home />} />
           <Route path="home" element={<Home />} />
           <Route path="farm" element={<Farm />} />
-          <Route path="*" element={<div>Not Found</div>} />
+          <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/src/lang/en.js b/src/lang/en.js
index 0945950..c405d55 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -30,4 +30,8 @@ export const en = {
     more: 'More',
     partners: 'Partners',
     auditors: 'Auditors',
+
+    notFound: 'Page Not Found',
+    notFoundContent: "The page you're looking for does not seem to exist",
+    goHome: 'Go to Home',
 }
\ No newline at end of file
diff --git a/src/lang/fr.js b/src/lang/fr.js
index 105ec94..c2a6f55 100644
--- a/src/lang/fr.js
+++ b/src/lang/fr.js
@@ -30,4 +30,8 @@ export const fr = {
     more: 'More',
     partners: 'Partners',
     auditors: 'Auditors',
+
+    notFound: 'Page Not Found',
+    notFoundContent: "The page you're looking for does not seem to exist",
+    goHome: 'Go to Home',
 }
\ No newline at end of file
diff --git a/src/lang/tw.js b/src/lang/tw.js
index 19f61cf..5e52cbd 100644
--- a/src/lang/tw.js
+++ b/src/lang/tw.js
@@ -30,4 +30,8 @@ export const tw = {
     more: '更多',
     partners: 'Partners',
     auditors: 'Auditors',
+
+    notFound: 'Page Not Found',
+    notFoundContent: "The page you're looking for does not seem to exist",
+    goHome: 'Go to Home',
 }
\ No newline at end of file
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
new file mode 100644
index 0000000..5ca02f1
--- /dev/null
+++ b/src/pages/NotFound.js
@@ -0,0 +1,45 @@
+import { Box, Button, Heading, Text } from "@chakra-ui/react"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+
+export const NotFound = () => {
+
+    const navTo = useNavigate()
+    const { t } = useTranslation()
+
+    const onBtnGoHome = () => {
+        navTo('/')
+    }
+
+    return (
+        <Box textAlign="center" py={10} px={6}>
+            <Heading
+                display="inline-block"
+                as="h2"
+                size="2xl"
+                bgGradient="linear(to-r, teal.400, teal.600)"
+                bgClip="text"
+            >
+                404
+            </Heading>
+
+            <Text fontSize="18px" mt={3} mb={2}>
+                {t('notFound')}
+            </Text>
+
+            <Text color={'gray.500'} mb={6}>
+                {t('notFoundContent')}
+            </Text>
+
+            <Button
+                colorScheme="teal"
+                bgGradient="linear(to-r, teal.400, teal.500, teal.600)"
+                color="white"
+                variant="solid"
+                onClick={onBtnGoHome}
+            >
+                {t('goHome')}
+            </Button>
+        </Box>
+    )
+}
\ No newline at end of file