From dd0b6da37ea56a07510715ca4c925cd4b3cdd15d Mon Sep 17 00:00:00 2001
From: erbhuwan <v1acharya34@gmail.com>
Date: Fri, 3 Oct 2025 22:20:40 +0545
Subject: [PATCH 1/2] feat: add themed 404 NotFound page

---
 frontend/src/App.js                 |  5 +++
 frontend/src/pages/NotFoundPage.jsx | 58 +++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 frontend/src/pages/NotFoundPage.jsx

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 349dbaa..84633f4 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -11,6 +11,7 @@ import HomePage from './pages/Home';
 import AboutPage from './pages/AboutPage';
 import DocumentationPage from './pages/DocumentationPage';
 import ContributorsPage from './pages/ContributorsPage';
+import NotFoundPage from './pages/NotFoundPage';
 import './App.css';
 
 function App() {
@@ -97,6 +98,10 @@ function App() {
               path="/contributors" 
               element={<ContributorsPage theme={theme} />} 
             />
+            <Route 
+              path="*" 
+              element={<NotFoundPage theme={theme} />} 
+            />
           </Routes>
         </Layout>
       </Router>
diff --git a/frontend/src/pages/NotFoundPage.jsx b/frontend/src/pages/NotFoundPage.jsx
new file mode 100644
index 0000000..d42d7f5
--- /dev/null
+++ b/frontend/src/pages/NotFoundPage.jsx
@@ -0,0 +1,58 @@
+import { Link } from "react-router-dom";
+import { Code, AlertCircle, Cpu, ArrowLeft } from "lucide-react";
+
+const NotFoundPage = ({ theme }) => {
+  const isDark = theme === "dark";
+
+  return (
+    <div
+      className={`relative flex-1 flex flex-col items-center justify-center p-6 transition-all duration-500 ${
+        isDark
+          ? "bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 text-white"
+          : "bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 text-gray-900"
+      }`}
+    >
+      {/* Floating icons for tech vibe */}
+      <div className="absolute top-20 left-10 opacity-40 animate-bounce-slow">
+        <Code
+          className={`${isDark ? "text-white" : "text-gray-600"} w-16 h-16`}
+        />
+      </div>
+      <div className="absolute bottom-24 right-16 opacity-40 animate-spin-slow">
+        <Cpu
+          className={`${isDark ? "text-white" : "text-gray-600"} w-20 h-20`}
+        />
+      </div>
+      <div className="absolute top-40 right-20 opacity-40 animate-pulse-slow">
+        <AlertCircle
+          className={`${isDark ? "text-white" : "text-gray-600"} w-12 h-12`}
+        />
+      </div>
+
+      {/* Main content */}
+      <div className="relative z-10 text-center max-w-xl">
+        <h1 className="text-7xl font-extrabold mb-4 animate-pulse">404</h1>
+        <p className="text-2xl mb-6">
+          Uh-oh! This algorithm didn't find a solution here.
+        </p>
+        <p className="text-lg mb-8">
+          Looks like this page isn't in the visualization. Try going back and
+          exploring!
+        </p>
+        <Link
+          to="/"
+          className={`inline-flex items-center gap-2 px-6 py-4 rounded-lg font-semibold shadow-lg transition-transform transform hover:scale-105 ${
+            isDark
+              ? "bg-blue-600 hover:bg-blue-700 text-white"
+              : "bg-blue-500 hover:bg-blue-600 text-white"
+          }`}
+        >
+          <ArrowLeft className="w-5 h-5" />
+          Go Back to Visualizer
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;

From 08042e122a58f7b73a846b0fa2b136abb00b4256 Mon Sep 17 00:00:00 2001
From: erbhuwan <v1acharya34@gmail.com>
Date: Fri, 3 Oct 2025 22:32:12 +0545
Subject: [PATCH 2/2] fix: overlapping issue of icons fixed in not found page

---
 frontend/src/pages/NotFoundPage.jsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/NotFoundPage.jsx b/frontend/src/pages/NotFoundPage.jsx
index d42d7f5..ab891e4 100644
--- a/frontend/src/pages/NotFoundPage.jsx
+++ b/frontend/src/pages/NotFoundPage.jsx
@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { Code, AlertCircle, Cpu, ArrowLeft } from "lucide-react";
+import { AlertCircle, Cpu, ArrowLeft } from "lucide-react";
 
 const NotFoundPage = ({ theme }) => {
   const isDark = theme === "dark";
@@ -14,20 +14,15 @@ const NotFoundPage = ({ theme }) => {
     >
       {/* Floating icons for tech vibe */}
       <div className="absolute top-20 left-10 opacity-40 animate-bounce-slow">
-        <Code
-          className={`${isDark ? "text-white" : "text-gray-600"} w-16 h-16`}
+        <AlertCircle
+          className={`${isDark ? "text-white" : "text-gray-600"} w-12 h-12`}
         />
       </div>
-      <div className="absolute bottom-24 right-16 opacity-40 animate-spin-slow">
+      <div className="absolute bottom-20 right-32 opacity-40 animate-spin-slow">
         <Cpu
           className={`${isDark ? "text-white" : "text-gray-600"} w-20 h-20`}
         />
       </div>
-      <div className="absolute top-40 right-20 opacity-40 animate-pulse-slow">
-        <AlertCircle
-          className={`${isDark ? "text-white" : "text-gray-600"} w-12 h-12`}
-        />
-      </div>
 
       {/* Main content */}
       <div className="relative z-10 text-center max-w-xl">