created clickable header navigation

package.json

@@ -16,6 +16,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
+    "react-router-dom": "^7.7.1",
     "react-use": "^17.6.0",
     "sonner": "^2.0.6"
   },

src/App.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
 import { Toaster } from 'sonner'
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Header from "./components/Header";
+import Home from "./pages/Home";
+import Nexus from "./pages/Nexus";
+import Vault from "./pages/Vault";
 import Hero from './components/Hero'
 import About from './components/About'
 import Navbar from './components/Navbar'
@@ -15,70 +20,78 @@ import { GameProvider } from './context/GameContext'
 const App = () => {
   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: {
+      <Router>
+        <Toaster 
+          richColors 
+          position="top-right"
+          expand={true}
+          closeButton={true}
+          duration={5000}
+          className="font-nippo-light"
+          toastOptions={{
             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)',
+              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',
             },
-            iconTheme: {
-              primary: 'white',
-              secondary: 'rgba(34, 197, 94, 0.9)',
+            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)',
+            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 />
-        <Hero/>
-        <Navbar/>
-        <About/>
-        <Features/>
-        <GamesGallery/>
-        <Story/>
-        <div className="mb-32">
-          <CartWishlist/>
-        </div>
-        <Contact/>
-        <Footer/>
-      </main>
+          }}
+        />
+        <main className='relative min-h-screen w-screen overflow-x-hidden'>
+          <CursorTrail />
+          <Hero/>
+          <Navbar/>
+          <About/>
+          <Features/>
+          <GamesGallery/>
+          <Story/>
+          <div className="mb-32">
+            <CartWishlist/>
+          </div>
+          <Contact/>
+          <Footer/>
+        </main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/nexus" element={<Nexus />} />
+          <Route path="/vault" element={<Vault />} />
+          {/* Add more routes as needed */}
+        </Routes>
+      </Router>
     </GameProvider>
   )
 }

src/components/Header.css

@@ -0,0 +1,17 @@
+.header {
+  background: #111;
+  padding: 1rem;
+}
+.nav-list {
+  display: flex;
+  gap: 2rem;
+  list-style: none;
+}
+.nav-list a {
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+}
+.nav-list a:hover {
+  text-decoration: underline;
+}

src/components/Header.jsx

@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+import "./Header.css"; // Optional: for styling
+
+export default function Header() {
+  return (
+    <header className="header">
+      <nav>
+        <ul className="nav-list">
+          <li><Link to="/">HOME</Link></li>
+          <li><Link to="/nexus">NEXUS</Link></li>
+          <li><Link to="/vault">VAULT</Link></li>
+          {/* Add more links as needed */}
+        </ul>
+      </nav>
+    </header>
+  );
+}

src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
 import './index.css'
-import App from './App.jsx'
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
     <App />
-  </StrictMode>,
-)
+  </React.StrictMode>
+);

src/pages/Home.jsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div>Welcome to SCR Gaming Home!</div>;
+}

src/pages/Nexus.jsx

@@ -0,0 +1,3 @@
+export default function Nexus() {
+  return <div>This is the Nexus page.</div>;
+}

src/pages/Vault.jsx

@@ -0,0 +1,3 @@
+export default function Vault() {
+  return <div>This is the Vault page.</div>;
+}