Merge pull request #261 from Ansh101112/PNF

Pnf added

src/App.js

@@ -16,6 +16,7 @@ import AuthRoute from "./components/AuthRoute";
 import AdminD from "./Dashboards/AdminD";
 import Settings from "./pages/Settings";
 import AccountSettings from "./settings/AccountSettings";
+import NotFoundPage from "./pages/PNF";
 
 const App = () => {
   return (
@@ -41,6 +42,7 @@ const App = () => {
         </Route>
         <Route path="/contact" element={<CustomerVoices />} />
         <Route path="/user/review" element={<Review />} />
+        <Route path="*" element={<NotFoundPage></NotFoundPage>} />
       </Routes>
     </>
   );

src/index.css

@@ -4,7 +4,31 @@
 
 /* Toggle switch styles */
 input:checked ~ .dot {
-    transform: translateX(100%);
-    background-color: #4CAF50;
+  transform: translateX(100%);
+  background-color: #4caf50;
+}
+
+@layer components {
+  .neon-text {
+    color: #39ff14;
+    text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14, 0 0 20px #39ff14,
+      0 0 40px #39ff14, 0 0 80px #14bcff, 0 0 90px #39ff14, 0 0 100px #ff14d8,
+      0 0 150px #39ff14;
+  }
+  .tree {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .trunk {
+    width: 20px;
+    height: 60px;
+  }
+  .leaves {
+    width: 0;
+    height: 0;
+    border-left: 40px solid transparent;
+    border-right: 40px solid transparent;
+    border-bottom: 60px solid #39ff14;
   }
-  
+}

src/pages/PNF.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+
+const NotFoundPage = () => {
+  return (
+    <>
+      <Navbar></Navbar>
+      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-white">
+        <div className="text-center space-y-4">
+          <h1 className="text-9xl font-bold neon-text animate-pulse">404</h1>
+          <p className="text-2xl font-medium">Page Not Found</p>
+          <div className="flex flex-col items-center space-y-2">
+            <p className="text-lg">Let's save the earth and save energy!</p>
+            <p className="text-lg">Enjoy the greenery while you're here.</p>
+          </div>
+        </div>
+        <div className="mt-8 animate-bounce">
+          <div className="flex space-x-4">
+            <Tree />
+            <Tree />
+            <Tree />
+          </div>
+        </div>
+      </div>
+      <Footer></Footer>
+    </>
+  );
+};
+
+const Tree = () => (
+  <div className="tree">
+    <div className="trunk bg-brown-600"></div>
+    <div className="leaves bg-green-500"></div>
+  </div>
+);
+
+export default NotFoundPage;