enhance 404 page

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>

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',
 }

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',
 }

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',
 }

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>
+    )
+}