Merge pull request #317 from Mr-Sunglasses/main

feat: Add new 404 page with some eastereggs 🐣

Author: Mr-Sunglasses

package.json

@@ -14,6 +14,7 @@
     "flowbite-react": "^0.3.2",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
+    "react-chrome-dino-ts": "^0.1.2",
     "react-dom": "^18.3.1",
     "react-dotenv": "^0.1.3",
     "react-facebook-login": "^4.1.1",

src/App.jsx

@@ -1,12 +1,11 @@
 import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Homepage from "./pages/Homepage";
-import Navbar from "./components/Navbar";
 import Team from "./pages/Team";
 import Contacts from "./pages/Contacts";
-import Shipyard from "./pages/Shipyard"
+import Shipyard from "./pages/Shipyard";
 import About from "./pages/AboutOrg";
 import Buiding from "./pages/Buiding";
-import ReactDOM from "react-dom/client";
 import Guide from "./pages/Guide";
 import Faqs from "./pages/Faqs";
 import Resources from "./pages/Resources";
@@ -21,51 +20,37 @@ import Tail_wind from "./pages/Frontend/Tail_wind";
 import Vue__js from "./pages/Frontend/Vue__js";
 import React__native from "./pages/Frontend/React__native";
 import Three__js from "./pages/Frontend/Three__js";
-
-// import About from './components/About'
-// import AboutOrg from "./pages/AboutOrg";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
 import PageNotFound from "./pages/PageNotFound";
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App />);
-
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Homepage />}></Route>
-        <Route path="/home" element={<Homepage />}></Route>
-        <Route path="/team" element={<Team />}></Route>
-        <Route path="/contact" element={<Contacts />}></Route>
-        <Route path="/shipyard" element={<Shipyard />}></Route>
-        <Route path="/about" element={<About />}></Route>
-        <Route path="/building" element={<Buiding />}></Route>
-        <Route path="/guide" element={<Guide />}></Route>
-        <Route path="/faq" element={<Faqs />}></Route>
-        <Route path="/resource" element={<Resources />}></Route>
-        <Route path="/privacypolicy" element={<Privacy />}></Route>
-        <Route path="/frontend" element={<Frontends />}></Route>
-        <Route path="/html_css" element={<HTMLCSS />}></Route>
-        <Route path="/javascript" element={<JS />}></Route>
-        <Route path="/electron" element={<Eletron />}></Route>
-        <Route path="/reactjs" element={<Reactjs />}></Route>
-        <Route path="/nextjs" element={<Next__js />}></Route>
-        <Route path="/tailwind" element={<Tail_wind />}></Route>
-        <Route path="/vuejs" element={<Vue__js />}></Route>
-        <Route path="/threejs" element={<Three__js />}></Route>
-        <Route path="/reactnative" element={<React__native />}></Route>
-        <Route path="*" element={<PageNotFound />}></Route>
+        <Route path="/" element={<Homepage />} />
+        <Route path="/home" element={<Homepage />} />
+        <Route path="/team" element={<Team />} />
+        <Route path="/contact" element={<Contacts />} />
+        <Route path="/shipyard" element={<Shipyard />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/building" element={<Buiding />} />
+        <Route path="/guide" element={<Guide />} />
+        <Route path="/faq" element={<Faqs />} />
+        <Route path="/resource" element={<Resources />} />
+        <Route path="/privacypolicy" element={<Privacy />} />
+        <Route path="/frontend" element={<Frontends />} />
+        <Route path="/html_css" element={<HTMLCSS />} />
+        <Route path="/javascript" element={<JS />} />
+        <Route path="/electron" element={<Eletron />} />
+        <Route path="/reactjs" element={<Reactjs />} />
+        <Route path="/nextjs" element={<Next__js />} />
+        <Route path="/tailwind" element={<Tail_wind />} />
+        <Route path="/vuejs" element={<Vue__js />} />
+        <Route path="/threejs" element={<Three__js />} />
+        <Route path="/reactnative" element={<React__native />} />
+        <Route path="*" element={<PageNotFound />} />
       </Routes>
     </BrowserRouter>
   );
 }
 
-export default App;
-
-{
-  /* <Navbar />
-<Hero />
-<About />
-<Newsletter/> */
-}
+export default App;

src/pages/PageNotFound.jsx

@@ -1,20 +1,19 @@
 import { Link } from "react-router-dom";
 import logo_404 from "../assets/img/page_not_found_img/error.png";
+import DinoGame from 'react-chrome-dino-ts'
+import 'react-chrome-dino-ts/index.css'
 
 function PageNotFound() {
   return (
     <div className="flex   text-white flex-col items-center justify-center  p-10">
-      <img className="w-96 mx-auto " src={logo_404} alt="404-page-not-found" />
+      <DinoGame />
       <p className="font-bold md:text-3xl  sm:text-2xl text-xl p-4 text-white">
         Sorry the page you are looking for does not exist.
       </p>
       <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px]  rounded-md font-medium my-4 py-3 text-black">
-        <button>
           <Link to="/">GO BACK HOME</Link>
-        </button>
       </button>
     </div>
   );
 }
-
 export default PageNotFound;

yarn.lock

@@ -2651,6 +2651,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-chrome-dino-ts@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/react-chrome-dino-ts/-/react-chrome-dino-ts-0.1.2.tgz#4a247be70991ebb32568bd915edee6463b3c02c2"
+  integrity sha512-UT7zEkeLFykgwgl2r/5FHzZgs0Bp8c/ZpB+4TZxMPdgakrXGbR7CZl/wYZ5uTJKDwqf7JcEE/5sVZsKaWXuSBA==
+
 react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"