From 027290b571c84e5e5df44d807dc6614b9ceffac4 Mon Sep 17 00:00:00 2001
From: manishcoder92 <bcawithmanish0008@gmail.com>
Date: Sun, 31 May 2026 12:39:26 +0530
Subject: [PATCH] feat: add playful custom 404 Page Not Found component

- Created a new NotFound component in src/pages/NotFound/NotFound.tsx
- Used framer-motion to add animated ghost illustration and pulsating shadow
- Designed the page using Tailwind CSS for a playful and modern aesthetic
- Imported and configured the NotFound component as a wildcard catch-all route (*) in Router.tsx to handle all invalid URLs
---
 src/Routes/Router.tsx           |  4 +++
 src/pages/NotFound/NotFound.tsx | 58 +++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/pages/NotFound/NotFound.tsx

diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 874ef7e7..bb05c4a2 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -9,6 +9,7 @@ import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.t
 import Home from "../pages/Home/Home.tsx";
 import Activity from "../pages/Activity.tsx"; 
 import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; // ✅ Updated import path to match your new folder structure
+import NotFound from "../pages/NotFound/NotFound.tsx";
 
 const Router = () => {
   return (
@@ -25,6 +26,9 @@ const Router = () => {
 
       {/* Privacy Policy page route */}
       <Route path="/privacy" element={<PrivacyPolicy />} />
+
+      {/* 404 Not Found Catch-All Route */}
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 };
diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx
new file mode 100644
index 00000000..8ce1025a
--- /dev/null
+++ b/src/pages/NotFound/NotFound.tsx
@@ -0,0 +1,58 @@
+import { Link } from "react-router-dom";
+import { Home, Ghost } from "lucide-react";
+import { motion } from "framer-motion";
+
+const NotFound = () => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[75vh] px-4 text-center overflow-hidden">
+      <motion.div 
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+        className="relative z-10"
+      >
+        {/* Animated Ghost Illustration */}
+        <div className="relative flex flex-col items-center justify-center mb-8">
+          <motion.div
+            animate={{ y: [0, -20, 0] }}
+            transition={{ repeat: Infinity, duration: 3.5, ease: "easeInOut" }}
+            className="relative z-10"
+          >
+            <Ghost className="h-32 w-32 text-indigo-500 dark:text-indigo-400 drop-shadow-2xl" strokeWidth={1.5} />
+          </motion.div>
+
+          {/* Floating Shadow */}
+          <motion.div
+            animate={{ scale: [1, 0.7, 1], opacity: [0.3, 0.1, 0.3] }}
+            transition={{ repeat: Infinity, duration: 3.5, ease: "easeInOut" }}
+            className="absolute -bottom-6 w-20 h-5 bg-gray-400 dark:bg-black rounded-[100%] blur-md"
+          />
+        </div>
+
+        <h1 className="text-7xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 mb-3 drop-shadow-sm">
+          404
+        </h1>
+        <h2 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4">
+          Spooky... This page is a ghost town.
+        </h2>
+        
+        <p className="text-gray-600 dark:text-gray-400 mb-10 max-w-md mx-auto leading-relaxed">
+          The link you followed has vanished into the digital void, or maybe it never existed at all!
+        </p>
+
+        <Link
+          to="/"
+          className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-2xl shadow-lg transition-all duration-300 hover:shadow-indigo-500/30 hover:-translate-y-1 active:translate-y-0"
+        >
+          <Home className="h-5 w-5" />
+          <span>Teleport Back Home</span>
+        </Link>
+      </motion.div>
+      
+      {/* Background decorative blobs */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-100/30 dark:bg-blue-900/10 rounded-full blur-[100px] -z-10 pointer-events-none" />
+    </div>
+  );
+};
+
+export default NotFound;