fix: show 404 NotFound page

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"

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 (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+
 import React, { useState } from "react";
 import { Toaster } from 'sonner';
 import Hero from './components/Hero';

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;
+}

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 (
+    <GameProvider>
+      <Toaster
+        richColors
+        position="top-right"
+        expand={true}
+        closeButton={true}
+        duration={5000}
+        className="font-nippo-light"
+        toastOptions={{
+          style: {
+            background: 'linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%)',
+            border: '2px solid rgba(255, 215, 0, 0.3)',
+            backdropFilter: 'blur(15px)',
+            borderRadius: '16px',
+            padding: '20px',
+            fontSize: '15px',
+            fontWeight: '600',
+            boxShadow: '0 0 30px rgba(255, 215, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4)',
+            textShadow: '0 0 10px rgba(255, 255, 255, 0.3)',
+            letterSpacing: '0.5px',
+            minWidth: '320px',
+            maxWidth: '400px',
+          },
+          success: {
+            style: {
+              background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(22, 163, 74, 0.95) 100%)',
+              border: '2px solid rgba(34, 197, 94, 0.5)',
+              boxShadow: '0 0 30px rgba(34, 197, 94, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4)',
+              color: 'white',
+              textShadow: '0 0 10px rgba(255, 255, 255, 0.5)',
+            },
+            iconTheme: {
+              primary: 'white',
+              secondary: 'rgba(34, 197, 94, 0.9)',
+            },
+          },
+          error: {
+            style: {
+              background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%)',
+              border: '2px solid rgba(239, 68, 68, 0.5)',
+              boxShadow: '0 0 30px rgba(239, 68, 68, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4)',
+              color: 'white',
+              textShadow: '0 0 10px rgba(255, 255, 255, 0.5)',
+            },
+            iconTheme: {
+              primary: 'white',
+              secondary: 'rgba(239, 68, 68, 0.9)',
+            },
+          },
+        }}
+      />
+      <main className="relative min-h-screen w-screen overflow-x-hidden">
+        <CursorTrail />
+        <Navbar gameTitles={gameTitles} />
+        <Hero />
+        <About />
+        <Features />
+        <GamesGallery gamesData={gamesData} />
+        <Story />
+        <div className="mb-32">
+          <CartWishlist />
+        </div>
+        <Contact />
+        <Footer />
+        <OnTopBar />
+      </main>
+    </GameProvider>
+  );
+};
+
+export default Home;

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 (
+    <div className="notfound-cursor-fix flex flex-col items-center justify-center min-h-screen max-h-screen bg-gradient-to-br from-black via-purple-950 to-blue-900 text-yellow-300 p-6 text-center relative overflow-hidden">
+      {/* Subtle glowing background effect (no blocking cursor) */}
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,0,0.05),transparent_70%)] pointer-events-none"></div>
+
+      <h1 className="text-[8rem] sm:text-[10rem] font-extrabold mb-4 select-none drop-shadow-[0_0_6px_rgba(255,215,0,0.5)]">
+        404
+      </h1>
+
+      <p className="text-2xl sm:text-3xl font-bold mb-6 tracking-wider text-yellow-200">
+        Lost in the Metagame
+      </p>
+
+      <p className="max-w-md mb-10 text-lg text-yellow-200/80 font-light">
+        Oops! The page you are looking for does not exist.  
+        The portal might be broken, or you’ve wandered into the wrong realm.  
+      </p>
+
+      <button
+        onClick={goHome}
+        className="px-8 py-3 bg-yellow-400 hover:bg-yellow-500 text-black font-bold rounded-xl shadow-lg shadow-yellow-500/30 transition-all duration-300 cursor-pointer transform hover:scale-105"
+      >
+        Return to Lobby
+      </button>
+    </div>
+  );
+};
+
+export default NotFound;