added 404 page

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "bootstrap": "^5.3.2",
     "framer-motion": "^11.0.3",
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",

src/App.css

@@ -24,11 +24,11 @@ body {
 }
 
 .main-container {
-  transition: margin-left 0.5s ease;
+  /* transition: margin-left 0.5s ease; */
 }
 
 @media (min-width: 768px) {
   .main-container.shifted {
-    margin-left: 120px;
+    /* margin-left: 120px; */
   }
 }

src/App.jsx

@@ -6,9 +6,12 @@ import './App.css';
 import SideBar from './components/Sidebar/SideBar';
 import Links from './components/Links';
 import MainPage from './components/Pages/MainPage';
+import Error from './components/Error/Error';
+
 
 import CursorComponent from './components/Cursor/Cursor'
 
+
 const categories = ['angular', '', 'frontend', 'next', 'node', 'react', 'vanilla', 'vue'];
 const routes = Links();
 
@@ -33,13 +36,17 @@ function App() {
           <div className={`main-container ${isSidebarOpen ? 'shifted' : ''}`}>
 
             <Routes>
+            <Route path='/*' element={<Error/>}></Route>
               {categories.map((category) => {
                 return <Route key={category} exact path={`/${category}`} element={<MainPage className='main-page' setProgress={setProgress} key={category} category={category} routes={routes} query={query}/>} />;
               })}
             </Routes>
           </div>
         </SideBar>
-
+
+
+
+
       </Router>
     </div>
   );

src/components/Error/Error.css

@@ -0,0 +1,25 @@
+.flex{
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+   margin:2rem 2rem  auto 0; 
+  width: 100vw;
+  height: auto;
+  overflow-x:hidden;
+}
+
+
+
+.but{
+  padding: 1rem;
+  background-color: #212121;
+  color: #fff;
+  border-radius: 10px;
+  border: black solid;
+}
+
+.but:hover{
+  color: #212121;
+  background-color: #fff;
+}

src/components/Error/Error.jsx

@@ -0,0 +1,16 @@
+import Lottie from "lottie-react";
+import err from "../../assets/404.json";
+import './Error.css'
+function Error(){
+  return (
+    <center className="flex">
+      <div>
+        <Lottie animationData={err}/>
+      </div>
+
+      <a href='/'> <button className="but">HOME</button> </a>
+    </center>
+  )
+}
+
+export default Error;

src/components/Pages/mainpage.css

@@ -7,7 +7,7 @@
   display: none;
   background: none;
   width: 150px;
-  margin-left: auto;
+  /* margin-left: auto; */
 }
 
 /* Main Page Styles */