diff --git a/package-lock.json b/package-lock.json index 014f663..17f02b1 100644 --- a/package-lock.json +++ b/package-lock.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" @@ -3452,12 +3453,21 @@ "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" + "version": "0.7.2", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", "license": "MIT", "engines": { "node": ">= 0.6" + } }, "node_modules/copy-to-clipboard": { @@ -6343,6 +6353,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", @@ -6673,6 +6721,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 d3eb9c6..1e5d773 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,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 a38523b..8930d47 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,17 @@ +import React from 'react'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import Home from './components/Home'; +import NotFound from './components/NotFound'; + +const App = () => { + return ( + + + } /> + } /> + + + import React, { useState } from "react"; import { Toaster } from 'sonner'; import Hero from './components/Hero'; 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;