From e296a2dc13e6b3eb03192619f155a977a6d1ee9c Mon Sep 17 00:00:00 2001
From: hemant9808 <hemant27134@gmail.com>
Date: Sun, 13 Oct 2024 11:11:35 +0530
Subject: [PATCH] add 404 page

---
 src/Pages/NotFound.js   | 19 +++++++++----------
 src/context/firebase.js |  2 +-
 tailwind.config.js      |  9 ++++++++-
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/Pages/NotFound.js b/src/Pages/NotFound.js
index 0bd4383..03dc7eb 100644
--- a/src/Pages/NotFound.js
+++ b/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>
diff --git a/src/context/firebase.js b/src/context/firebase.js
index 263d98f..d0b48d7 100644
--- a/src/context/firebase.js
+++ b/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,
diff --git a/tailwind.config.js b/tailwind.config.js
index c6bac4b..9e45a9d 100644
--- a/tailwind.config.js
+++ b/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
 };