adding 404 page (NotFound) and style root to

Author: nuexq

src/App.jsx

@@ -1,15 +1,21 @@
 import { ThemeProvider } from "@/components/theme-provider"
 import { Route, Routes } from "react-router-dom"
-import Home from "@/pages/Home"
+// Layouts
 import Header from "@/layouts/header"
+// Pages
+import Home from "@/pages/Home"
+import NotFound from '@/pages/404'
 
 function App() {
 
   return(
     <ThemeProvider defaultTheme="system" storageKey="ui-theme">
       <Header />
       <Routes>
-        <Route path="React-Project/" element={<Home />} />
+        <Route path='React-Project'>
+          <Route index element={<Home />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
       </Routes>
     </ThemeProvider>
   )

src/index.css

@@ -58,6 +58,9 @@
   body {
     @apply bg-background text-foreground;
   }
+  #root {
+    @apply h-screen w-screen flex flex-col
+  }
 }
 @layer components {
   .focusing {

src/pages/404.jsx

@@ -0,0 +1,16 @@
+
+function NotFound() {
+
+  return (
+    <div className="flex items-center justify-center flex-1 space-x-4">
+      <div className="text-4xl font-bold border-r-2 border-primary pr-4 font-mono">
+        404
+      </div>
+      <div className="text-lg">
+        Not Found
+      </div>
+    </div>
+  )
+}
+
+export default NotFound;