From 2c6b1ebd46c620b99c0f42d936a73a3b32e3089a Mon Sep 17 00:00:00 2001
From: Darsh Shah <dkshah_b23@it.vjti.ac.in>
Date: Fri, 24 Jan 2025 01:48:41 +0530
Subject: [PATCH 1/2] Updated the 404 Error Page

---
 src/App.jsx                            |  8 ++++----
 src/Components/ErrorPageWithButton.jsx | 26 ++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/Components/ErrorPageWithButton.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 99d8d90b1..bf0d89665 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
 // Enhanced App component with updated styles and layout
-import React from 'react';
+import { React } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import NavbarCard from './Components/NavbarCard';
@@ -15,13 +15,14 @@ import VerticalTimeline from './Components/Timeline';
 import Carousel from './Components/Carousel';
 import Hero from './Components/Hero';
 import Footer from "./Components/Footer"
+import ErrorPageWithButton from './Components/ErrorPageWithButton';
 
 
 const Homepage = () => {
   return (
     <div>
       <Hero />
-       {/* Text Section between Hero and Carousel */}
+      {/* Text Section between Hero and Carousel */}
       <div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">
         <h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
         <p className="text-xl">
@@ -37,8 +38,6 @@ const Homepage = () => {
 };
 
 
-
-
 function App() {
   return (
     <div className='bgC'>
@@ -51,6 +50,7 @@ function App() {
         <Route path="/achievements" element={<Achievements />} />
         <Route path="/past-projects" element={<PastProjects />} />
         <Route path="/upcoming-projects" element={<UpcomingProjects />} />
+        <Route path="*" element={<ErrorPageWithButton />} />
         {/* <Route path="/time" element={<VerticalTimeline />} /> */}
 
         {/* <Route path="/" element={<OrderManagement />} /> */}
diff --git a/src/Components/ErrorPageWithButton.jsx b/src/Components/ErrorPageWithButton.jsx
new file mode 100644
index 000000000..d9a3f5caf
--- /dev/null
+++ b/src/Components/ErrorPageWithButton.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const ErrorPageWithButton = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div className="flex flex-col items-center justify-center h-screen space-y-12 px-6 py-4 overflow-hidden">
+            <h1 className="text-[12rem] sm:text-[8rem] md:text-[8rem] leading-none tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-[#00FFFF] to-[#FF00FF] animate-pulse">
+                404!
+            </h1>
+            <h2 className="text-3xl sm:text-2xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#00FFFF] to-[#FF00FF] tracking-wide animate-wiggle">
+                Oops, Page Not Found!
+            </h2>
+            <button
+                className="mt-8 font-bold tracking-widest text-[#00FFFF] border-2 border-[#00FFFF] px-6 py-3 rounded-lg hover:bg-[#00FFFF]/20 hover:text-[#FF00FF] transition duration-500 ease-in-out transform hover:-translate-y-4 hover:scale-110 animate-bounce"
+                onClick={() => navigate('/')}
+                aria-label="Return to homepage"
+            >
+                Return to Home
+            </button>
+        </div>
+    );
+};
+
+export default ErrorPageWithButton;

From ef4df9454aa2b16d3d59c6369b5b25a3827fd738 Mon Sep 17 00:00:00 2001
From: Darsh Shah <161367760+Darsh-KShah@users.noreply.github.com>
Date: Fri, 24 Jan 2025 01:53:04 +0530
Subject: [PATCH 2/2] Updated App.jsx

Little changes
---
 src/App.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index bf0d89665..2da0e4b84 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
 // Enhanced App component with updated styles and layout
-import { React } from 'react';
+import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import NavbarCard from './Components/NavbarCard';
@@ -38,6 +38,8 @@ const Homepage = () => {
 };
 
 
+
+
 function App() {
   return (
     <div className='bgC'>
@@ -65,4 +67,4 @@ function App() {
 
 export default App;
 
-{/* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */ }
\ No newline at end of file
+{/* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */ }