add 404 page

src/Pages/NotFound.js

@@ -0,0 +1,40 @@
+
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import image from "../assets/images/notFound.png"
+const NotFound = () => {
+  const navigate = useNavigate();
+  const width = window.innerWidth;
+  console.log("width",width);
+
+
+
+
+  return (
+    <div className="h-screen flex  justify-center items-center bg-white">
+      <div className={`flex sm:w-[80%] md:w-[60%] items-center`}>
+        {/* Green Div instead of Image */}
+        <div className="w-1/2 rounded-full  flex items-center justify-center">
+          <img className="w-[17rem]" src={image}></img>
+        </div>
+
+        {/* Text Section */}``
+        <div className=" w-1/2  md:text-left md:ml-10 mt-6 md:mt-0">
+          <h1 className="text-5xl text-left font-bold text-black">OOPS! PAGE NOT FOUND.</h1>
+          <p className="text-gray-800 text-left mt-4">
+            You must have picked the wrong door because I haven’t been able to lay my eye on
+            the page you’ve been searching for.
+          </p>
+          <button
+            onClick={() => navigate("/")}
+            className="mt-6 px-10 py-3 bg-blue-500 text-white font-semibold rounded-full  hover:bg-blue-600 transition-all"
+          >
+            BACK TO HOME
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

src/context/firebase.js

@@ -7,13 +7,20 @@ import { Link, useNavigate,} from 'react-router-dom'
 
 
 const firebaseConfig = {
-    apiKey: process.env.REACT_APP_API_KEY,
-    authDomain: process.env.REACT_APP_AUTH_DOMAIN,
-    projectId: process.env.REACT_APP_PROJECT_ID,
-    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
-    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
-    appId: process.env.REACT_APP_ID,
-    measurementId: process.env.REACT_APP_MEASUREMENT_ID,
+    apiKey: "AIzaSyDbTOCwzHCkNEYoNNIEa7pkKK724kpa1nM",
+  authDomain: "fir-auth-d0dfe.firebaseapp.com",
+  projectId: "fir-auth-d0dfe",
+  storageBucket: "fir-auth-d0dfe.appspot.com",
+  messagingSenderId: "705929873228",
+  appId: "1:705929873228:web:03e3bb13e848591e17b1e9",
+  measurementId: "G-S9CFS2WNDC",
+    // apiKey: process.env.REACT_APP_API_KEY,
+    // authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+    // projectId: process.env.REACT_APP_PROJECT_ID,
+    // storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+    // messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+    // appId: process.env.REACT_APP_ID,
+    // measurementId: process.env.REACT_APP_MEASUREMENT_ID,
     databaseUrl: process.env.REACT_APP_DATABASE_URL
 };
 

src/index.js

@@ -17,6 +17,7 @@ import { FirebaseProvider } from './context/firebase';
 import MovieTicket from './Pages/MovieTicket';
 import MyTickets from './Pages/MyTickets';
 import Verify from './Pages/Verify';
+import NotFound from './Pages/NotFound';
 
 function App() {
   const location = useLocation();
@@ -42,7 +43,7 @@ function App() {
         <Route path="/Account" element={<Account />} />
         <Route path="/MovieTicket/:ticketId" element={<MovieTicket />} />
         <Route path="/Verify" element={<Verify/>}/>
-        <Route path='/*' element={<Navigate to="/" />} />
+        <Route path='/*' element={<NotFound/>} />
       </Routes>
     </>
   );