From 086ae4f083dd20517191f340299998c103e185cc Mon Sep 17 00:00:00 2001 From: darshan02parmar Date: Fri, 5 Sep 2025 22:57:34 +0530 Subject: [PATCH] fix: show 404 NotFound page --- package-lock.json | 54 +++++++++++++ package.json | 1 + src/App.jsx | 151 +++--------------------------------- src/NotFound.css | 14 ++++ src/components/Home.jsx | 150 +++++++++++++++++++++++++++++++++++ src/components/NotFound.jsx | 44 +++++++++++ 6 files changed, 272 insertions(+), 142 deletions(-) create mode 100644 src/NotFound.css create mode 100644 src/components/Home.jsx create mode 100644 src/components/NotFound.jsx diff --git a/package-lock.json b/package-lock.json index 748da02..e63845c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.4.0", + "react-router-dom": "^7.8.2", "react-use": "^17.6.0", "sonner": "^2.0.6", "styled-components": "^6.1.19" @@ -2022,6 +2023,15 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/copy-to-clipboard": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", @@ -4551,6 +4561,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.8.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz", + "integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.8.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz", + "integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==", + "license": "MIT", + "dependencies": { + "react-router": "7.8.2" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-universal-interface": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz", @@ -4852,6 +4900,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", diff --git a/package.json b/package.json index 4cd3b64..85394c9 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.4.0", + "react-router-dom": "^7.8.2", "react-use": "^17.6.0", "sonner": "^2.0.6", "styled-components": "^6.1.19" diff --git a/src/App.jsx b/src/App.jsx index b460bee..c4b6ef5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,149 +1,16 @@ import React from 'react'; -import { Toaster } from 'sonner'; -import Hero from './components/Hero'; -import About from './components/About'; -import Navbar from './components/Navbar'; -import Features from './components/Features'; -import GamesGallery from './components/GamesGallery'; -import Story from './components/Story'; -import Contact from './components/Contact'; -import Footer from './components/Footer'; -import CursorTrail from './components/CursorTrail/CursorTrail'; -import CartWishlist from './components/CartWishlist'; -import { GameProvider } from './context/GameContext'; -import OnTopBar from './components/OnTopBar'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import Home from './components/Home'; +import NotFound from './components/NotFound'; const App = () => { - // Centralize the gamesData here - const gamesData = [ - { - id: 1, - image: "/img/gallery-1.webp", - title: "Cyber Nexus", - genre: "Sci-Fi RPG", - rating: "4.8", - isPlayable: true, - price: "1999", - originalPrice: "2999", - }, - { - id: 2, - image: "/img/gallery-2.webp", - title: "Shadow Realm", - genre: "Dark Fantasy", - rating: "4.7", - isPlayable: true, - price: "1599", - }, - { - id: 3, - image: "/img/gallery-3.webp", - title: "Neon Runner", - genre: "Cyberpunk", - rating: "4.6", - isComingSoon: true, - price: "2499", - }, - { - id: 4, - image: "/img/gallery-4.webp", - title: "Mystic Quest", - genre: "Adventure", - rating: "4.9", - isPlayable: true, - price: "999", - originalPrice: "1499", - }, - { - id: 5, - image: "/img/gallery-5.webp", - title: "Steel Warriors", - genre: "Action", - rating: "4.5", - isComingSoon: true, - price: "1799", - }, - { - id: 6, - image: "/img/swordman.webp", - title: "Blade Master", - genre: "Fighting", - rating: "4.8", - isPlayable: true, - // Free game - no price - }, - ]; - - const gameTitles = gamesData.map((game) => game.title); - return ( - - -
- - - - - - - -
- -
- -
- -
- + + + } /> + } /> + + ); }; diff --git a/src/NotFound.css b/src/NotFound.css new file mode 100644 index 0000000..ea2a6e5 --- /dev/null +++ b/src/NotFound.css @@ -0,0 +1,14 @@ +/* Global cursor rule (keep hidden on rest of the site if needed) */ +* { + /* cursor: none !important; */ +} + +/* Force cursor visible on 404 page */ +.notfound-cursor-fix { + cursor: auto !important; /* shows normal arrow */ +} + +/* Make sure buttons show pointer */ +.notfound-cursor-fix button { + cursor: pointer !important; +} diff --git a/src/components/Home.jsx b/src/components/Home.jsx new file mode 100644 index 0000000..54998a0 --- /dev/null +++ b/src/components/Home.jsx @@ -0,0 +1,150 @@ +import React from 'react'; +import { Toaster } from 'sonner'; +import Hero from './Hero'; +import About from './About'; +import Navbar from './Navbar'; +import Features from './Features'; +import GamesGallery from './GamesGallery'; +import Story from './Story'; +import Contact from './Contact'; +import Footer from './Footer'; +import CursorTrail from './CursorTrail/CursorTrail'; +import CartWishlist from './CartWishlist'; +import { GameProvider } from '../context/GameContext'; +import OnTopBar from './OnTopBar'; + +const Home = () => { + // Centralize the gamesData here + const gamesData = [ + { + id: 1, + image: "/img/gallery-1.webp", + title: "Cyber Nexus", + genre: "Sci-Fi RPG", + rating: "4.8", + isPlayable: true, + price: "1999", + originalPrice: "2999", + }, + { + id: 2, + image: "/img/gallery-2.webp", + title: "Shadow Realm", + genre: "Dark Fantasy", + rating: "4.7", + isPlayable: true, + price: "1599", + }, + { + id: 3, + image: "/img/gallery-3.webp", + title: "Neon Runner", + genre: "Cyberpunk", + rating: "4.6", + isComingSoon: true, + price: "2499", + }, + { + id: 4, + image: "/img/gallery-4.webp", + title: "Mystic Quest", + genre: "Adventure", + rating: "4.9", + isPlayable: true, + price: "999", + originalPrice: "1499", + }, + { + id: 5, + image: "/img/gallery-5.webp", + title: "Steel Warriors", + genre: "Action", + rating: "4.5", + isComingSoon: true, + price: "1799", + }, + { + id: 6, + image: "/img/swordman.webp", + title: "Blade Master", + genre: "Fighting", + rating: "4.8", + isPlayable: true, + // Free game - no price + }, + ]; + + const gameTitles = gamesData.map((game) => game.title); + + return ( + + +
+ + + + + + + +
+ +
+ +
+ +
+ + ); +}; + +export default Home; diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx new file mode 100644 index 0000000..c77ef32 --- /dev/null +++ b/src/components/NotFound.jsx @@ -0,0 +1,44 @@ +import React, { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import "../Notfound.css" // import custom styles for cursor fix + +const NotFound = () => { + const navigate = useNavigate(); + + useEffect(() => { + document.title = "404 - Page Not Found | SCR-Game"; + }, []); + + const goHome = () => { + navigate('/'); + }; + + return ( +
+ {/* Subtle glowing background effect (no blocking cursor) */} +
+ +

+ 404 +

+ +

+ Lost in the Metagame +

+ +

+ Oops! The page you are looking for does not exist. + The portal might be broken, or you’ve wandered into the wrong realm. +

+ + +
+ ); +}; + +export default NotFound;