Skip to content

Commit

Permalink
Merge Merge pull request #298 from implement-404-page
Browse files Browse the repository at this point in the history
Implement 404 page with proper responsiveness issue #263
  • Loading branch information
github-actions[bot] authored Oct 13, 2024
2 parents 9ec9177 + e296a2d commit a8e4fdf
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 3 deletions.
39 changes: 39 additions & 0 deletions src/Pages/NotFound.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
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="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>


<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>
<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;
Binary file added src/assets/images/notFound.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/context/firebase.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>
</>
);
Expand Down
9 changes: 8 additions & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
};

0 comments on commit a8e4fdf

Please sign in to comment.