From 995d2e975f18b5b5f17c86d2291614375eea1930 Mon Sep 17 00:00:00 2001
From: Prachi-Shende <163986045+Prachi-Shende@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:29:05 +0530
Subject: [PATCH 1/2] Added 404 Page Not Found page

---
 src/App.jsx                     |   4 +-
 src/Components/PageNotFound.jsx |  43 ++++++
 src/index.css                   | 258 ++++++++++++++++++++++++++++----
 3 files changed, 273 insertions(+), 32 deletions(-)
 create mode 100644 src/Components/PageNotFound.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 99d8d90b1..63b839ccc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,7 +14,8 @@ import UpcomingProjects from './Components/UpcomingProjects';
 import VerticalTimeline from './Components/Timeline';
 import Carousel from './Components/Carousel';
 import Hero from './Components/Hero';
-import Footer from "./Components/Footer"
+import Footer from "./Components/Footer";
+import PageNotFound from './Components/PageNotFound';
 
 
 const Homepage = () => {
@@ -51,6 +52,7 @@ function App() {
         <Route path="/achievements" element={<Achievements />} />
         <Route path="/past-projects" element={<PastProjects />} />
         <Route path="/upcoming-projects" element={<UpcomingProjects />} />
+        <Route path="*" element={<PageNotFound />} />
         {/* <Route path="/time" element={<VerticalTimeline />} /> */}
 
         {/* <Route path="/" element={<OrderManagement />} /> */}
diff --git a/src/Components/PageNotFound.jsx b/src/Components/PageNotFound.jsx
new file mode 100644
index 000000000..e909bab68
--- /dev/null
+++ b/src/Components/PageNotFound.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../index.css'; 
+
+const PageNotFound = () => {
+  return (
+    <div className="relative bg-transparent min-h-screen w-full flex flex-col items-center justify-center text-center px-4">
+      {/* Main Message */}
+      <div className="mb-12">
+        <h1 className="text glitch" data-text="404">
+          404
+        </h1>
+        <p className="text glitch" data-text="Code Not Found!">
+          Code Not Found!
+        </p>
+        <p className="text-lg text-gray-500 mt-3 max-w-lg mx-auto">
+          This page isn’t in the code.<br />Let’s head back to the main branch!
+        </p>
+      </div>
+
+      {/* Go Back Button */}
+      <div className="mt-8">
+        <Link 
+          to="/" 
+          className="block text-center text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-lg px-8 py-4 transition duration-300"
+        >
+          Return to Homepage
+        </Link>
+      </div>
+
+      {/* SVG for styling */}
+      <svg
+        className="absolute bottom-0 left-0 right-0 z-10 opacity-100"
+        viewBox="0 0 1440 320"
+        style={{ clipPath: 'polygon(0 0, 100% 0, 100% 90%, 0 100%)' }}
+      >
+        <use href="src/assets/wordcloud.svg" />
+      </svg>
+    </div>
+  );
+};
+
+export default PageNotFound;
diff --git a/src/index.css b/src/index.css
index 565287a3c..f0256ef85 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,42 +1,238 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 
-#root {
+* {
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+}
 
+body, html {
+  width: 100%;
+  height: 100%;
+  background-color: black;
 }
 
-.gruppo-regular {
-    font-family: "Gruppo", sans-serif;
-    font-weight: 400;
-    font-style: normal;
+.content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column; /* Allow content to grow and not be cut off */
+}
+
+.text {
+  position: relative;
+  color: white;
+  font-weight: 700;
+  font-size: 40px;
+  transform: scale(2);
+  padding: 30px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
+
+.text:before,
+.text:after {
+  padding: 30px;
+  color: white;
+  content: attr(data-text);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  overflow: hidden;
+  top: 0;
+}
+
+.text:before {
+  left: 1px;
+  text-shadow: -1px 0 red;
+  animation: glitch-1 5s linear infinite reverse;
+}
+
+.text:after {
+  left: -1px;
+  text-shadow: -2px 0 blue;
+  animation: glitch-2 5s linear infinite reverse;
+}
+
+.text-lg.text-gray-500 {
+  font-size: 25px;
+  color: white; 
+  font-weight: 600;
+  max-width: 600px; 
+  margin: 20px auto; 
+}
+
+@keyframes glitch-1 {
+  0% {
+    clip: rect(132px, auto, 101px, 30px);
+  }
+  5% {
+    clip: rect(17px, auto, 94px, 30px);
+  }
+  10% {
+    clip: rect(40px, auto, 66px, 30px);
   }
-  @layer utilities {
-    .shadow-gradient {
-      box-shadow: 0 25px 50px -12px rgba(199, 21, 133, 0.25), 0 35px 60px -15px rgba(25, 25, 112, 0.3);
-    }
+  15% {
+    clip: rect(87px, auto, 82px, 30px);
   }
+  20% {
+    clip: rect(137px, auto, 61px, 30px);
+  }
+  25% {
+    clip: rect(34px, auto, 14px, 30px);
+  }
+  30% {
+    clip: rect(133px, auto, 74px, 30px);
+  }
+  35% {
+    clip: rect(76px, auto, 107px, 30px);
+  }
+  40% {
+    clip: rect(59px, auto, 130px, 30px);
+  }
+  45% {
+    clip: rect(29px, auto, 84px, 30px);
+  }
+  50% {
+    clip: rect(22px, auto, 67px, 30px);
+  }
+  55% {
+    clip: rect(67px, auto, 62px, 30px);
+  }
+  60% {
+    clip: rect(10px, auto, 105px, 30px);
+  }
+  65% {
+    clip: rect(78px, auto, 115px, 30px);
+  }
+  70% {
+    clip: rect(105px, auto, 13px, 30px);
+  }
+  75% {
+    clip: rect(15px, auto, 75px, 30px);
+  }
+  80% {
+    clip: rect(66px, auto, 39px, 30px);
+  }
+  85% {
+    clip: rect(133px, auto, 73px, 30px);
+  }
+  90% {
+    clip: rect(36px, auto, 128px, 30px);
+  }
+  95% {
+    clip: rect(68px, auto, 103px, 30px);
+  }
+  100% {
+    clip: rect(14px, auto, 100px, 30px);
+  }
+}
 
-  @keyframes bounceLess {
-    0%, 20%, 50%, 80%, 100% {
-      transform: translateY(0);
-    }
-    40% {
-      transform: translateY(-10px); 
-    }
-    60% {
-      transform: translateY(-5px); 
-    }
+@keyframes glitch-2 {
+  0% {
+    clip: rect(129px, auto, 36px, 30px);
+  }
+  5% {
+    clip: rect(36px, auto, 4px, 30px);
   }
-  
-  .animate-bounce-less {
-    animation: bounceLess 1s infinite;
+  10% {
+    clip: rect(85px, auto, 66px, 30px);
   }
+  15% {
+    clip: rect(91px, auto, 91px, 30px);
+  }
+  20% {
+    clip: rect(148px, auto, 138px, 30px);
+  }
+  25% {
+    clip: rect(38px, auto, 122px, 30px);
+  }
+  30% {
+    clip: rect(69px, auto, 54px, 30px);
+  }
+  35% {
+    clip: rect(98px, auto, 71px, 30px);
+  }
+  40% {
+    clip: rect(146px, auto, 34px, 30px);
+  }
+  45% {
+    clip: rect(134px, auto, 43px, 30px);
+  }
+  50% {
+    clip: rect(102px, auto, 80px, 30px);
+  }
+  55% {
+    clip: rect(119px, auto, 44px, 30px);
+  }
+  60% {
+    clip: rect(106px, auto, 99px, 30px);
+  }
+  65% {
+    clip: rect(141px, auto, 74px, 30px);
+  }
+  70% {
+    clip: rect(20px, auto, 78px, 30px);
+  }
+  75% {
+    clip: rect(133px, auto, 79px, 30px);
+  }
+  80% {
+    clip: rect(78px, auto, 52px, 30px);
+  }
+  85% {
+    clip: rect(35px, auto, 39px, 30px);
+  }
+  90% {
+    clip: rect(67px, auto, 70px, 30px);
+  }
+  95% {
+    clip: rect(71px, auto, 103px, 30px);
+  }
+  100% {
+    clip: rect(83px, auto, 40px, 30px);
+  }
+}
 
-  body {
-    scrollbar-width: thin; /* For Firefox */
-    scrollbar-color: #888 transparent; /* For Firefox */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.gruppo-regular {
+  font-family: "Gruppo", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@layer utilities {
+  .shadow-gradient {
+    box-shadow: 0 25px 50px -12px rgba(199, 21, 133, 0.25), 0 35px 60px -15px rgba(25, 25, 112, 0.3);
+  }
+}
+
+@keyframes bounceLess {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px); 
+  }
+  60% {
+    transform: translateY(-5px); 
   }
+}
+
+.animate-bounce-less {
+  animation: bounceLess 1s infinite;
+}
+
+body {
+  scrollbar-width: thin; /* For Firefox */
+  scrollbar-color: #888 transparent; /* For Firefox */
+}
+
 #root::-webkit-scrollbar {
   width: 5px;
 }
@@ -50,6 +246,6 @@
   border-radius: 10px;
 }
 
-  .bgC{
-    background-image: repeating-linear-gradient(157deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(112deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(247deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(202deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),linear-gradient(202deg, rgb(1, 9, 29),rgb(7, 14, 49));
-  }
\ No newline at end of file
+.bgC {
+  background-image: repeating-linear-gradient(157deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), repeating-linear-gradient(112deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), repeating-linear-gradient(247deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), repeating-linear-gradient(202deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), linear-gradient(202deg, rgb(1, 9, 29), rgb(7, 14, 49));
+}
\ No newline at end of file

From d8b791b81a53163b10b9c1c98ac9e51ac73b9f12 Mon Sep 17 00:00:00 2001
From: Prachi-Shende <163986045+Prachi-Shende@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:53:09 +0530
Subject: [PATCH 2/2] Solved navigation issue

---
 src/Components/PageNotFound.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/PageNotFound.jsx b/src/Components/PageNotFound.jsx
index e909bab68..37e7c0563 100644
--- a/src/Components/PageNotFound.jsx
+++ b/src/Components/PageNotFound.jsx
@@ -19,7 +19,7 @@ const PageNotFound = () => {
       </div>
 
       {/* Go Back Button */}
-      <div className="mt-8">
+      <div className="mt-8 relative z-20"> 
         <Link 
           to="/" 
           className="block text-center text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-lg px-8 py-4 transition duration-300"