add 404 page

src/Pages/NotFound.js

@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import image from "../assets/images/notFound.png"
@@ -11,17 +10,17 @@ const NotFound = () => {
 
 
   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 className="min-h-screen flex  justify-center items-center  bg-white">
+      <div className={`flex  flex-wrap justify-center  items-center`}>
+
+        <div className=" w-[25rem] rounded-full  flex items-center justify-center">
+          <img className="w-[18rem] " 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">
+
+        <div className=" w-[30rem] max-w-[70%]  md:text-left md:ml-10 mt-6 md:mt-0">
+          <h1 className="text-5xl md:text-left font-bold text-black">OOPS! PAGE NOT FOUND.</h1>
+          <p className="text-gray-800 md: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>

src/context/firebase.js

@@ -6,7 +6,7 @@ import { getDownloadURL as getStorageDownloadURL, getStorage, ref as storageRef,
 import { Link, useNavigate,} from 'react-router-dom' 
 
 
-const firebaseConfig = {
+const firebaseConfig = { 
     apiKey: process.env.REACT_APP_API_KEY,
     authDomain: process.env.REACT_APP_AUTH_DOMAIN,
     projectId: process.env.REACT_APP_PROJECT_ID,

tailwind.config.js

@@ -4,8 +4,15 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        'sm': '640px',  // Small screens and up
+        'md': '768px',  // Medium screens and up
+        'lg': '1024px', // Large screens and up
+        'xl': '1280px', // Extra large screens and up
+        '2xl': '1536px' // 2XL screens and up
+      },
     },
   },
   plugins: [],
-  darkMode: 'class',
+  darkMode: 'class', // Enables dark mode based on a class
 };