Fix/dependency cleanup

package.json

@@ -1,8 +1,22 @@
 {
-  "name": "my-project",
-  "private": true,
+  "name": "my-project-565",
   "version": "0.0.0",
+  "description": "src game",
+  "keywords": [
+    "gaming"
+  ],
+  "homepage": "https://github.com/Sindhura-Karumuri/scr-game#readme",
+  "bugs": {
+    "url": "https://github.com/Sindhura-Karumuri/scr-game/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sindhura-Karumuri/scr-game.git"
+  },
+  "license": "ISC",
+  "author": "sindhura_karumuri",
   "type": "module",
+  "main": "eslint.config.js",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,13 +26,15 @@
   "dependencies": {
     "@gsap/react": "^2.1.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.9",
     "gsap": "^3.12.5",
     "lucide-react": "^0.536.0",
     "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",
+    "sonner": "^2.0.7",
     "styled-components": "^6.1.19"
   },
   "devDependencies": {

src/App.jsx

@@ -1,23 +1,27 @@
+// App.jsx
 import React from 'react';
-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 { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Toaster } from 'sonner';
+import { GameProvider } from './context/GameContext';
+
+import CursorTrail from './components/CursorTrail/CursorTrail';
 import OnTopBar from './components/OnTopBar';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
+
+// Pages
+import Home from './pages/Home';
+import Nexus from './pages/Nexus';
+import Vault from './pages/Vault';
+import Prologue from './pages/Prologue';
+import About from './pages/About';
+import Contact from './pages/Contact';
 
 const App = () => {
   return (
     <GameProvider>
-      <Toaster 
-        richColors 
+      <Toaster
+        richColors
         position="top-right"
         expand={true}
         closeButton={true}
@@ -66,22 +70,25 @@ const App = () => {
           },
         }}
       />
-
-      <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 />
-        <OnTopBar />
-      </main>
+
+      <Router>
+        <main className="relative min-h-screen w-screen overflow-x-hidden">
+          <CursorTrail />
+          <OnTopBar />
+          <Navbar />
+
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/nexus" element={<Nexus />} />
+            <Route path="/vault" element={<Vault />} />
+            <Route path="/prologue" element={<Prologue />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/contact" element={<Contact />} />
+          </Routes>
+
+          <Footer />
+        </main>
+      </Router>
     </GameProvider>
   );
 };

src/components/Navbar.jsx

@@ -2,98 +2,95 @@
 import React, { useEffect, useRef, useState } from "react";
 import Button from "./Button";
 import { TiLocationArrow } from "react-icons/ti";
-// We are no longer using react-icons for the audio button.
 import { useWindowScroll } from "react-use";
+import gsap from "gsap";
+import { Link } from "react-router-dom";
 
-const navItems = [
-  { name: "Nexus", href: "#about" },
-  { name: "Vault", href: "#features" },
-  { name: "Prologue", href: "#story" },
-  { name: "About", href: "#about" },
-  { name: "Contact", href: "#contact" },
-];
-
-// ===================================================================
-// START: Custom Thematic SVG Icons
-// These are designed to perfectly match the website's futuristic UI.
-// ===================================================================
-
+// Thematic SVG Icons
 const VolumeOnIcon = ({ className }) => (
-  <svg
-    className={className}
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    viewBox="0 0 24 24"
-  >
+  <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
     <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
     <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
     <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
   </svg>
 );
 
 const VolumeOffIcon = ({ className }) => (
-  <svg
-    className={className}
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    viewBox="0 0 24 24"
-  >
+  <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
     <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
     <line x1="23" y1="9" x2="17" y2="15"></line>
     <line x1="17" y1="9" x2="23" y2="15"></line>
   </svg>
 );
-// ===================================================================
-// END: Custom Thematic SVG Icons
-// ===================================================================
+
+// Navigation items
+const navItems = [
+  { label: "Nexus", path: "/nexus" },
+  { label: "Vault", path: "/vault" },
+  { label: "Prologue", path: "/prologue" },
+  { label: "About", path: "/about" },
+  { label: "Contact", path: "/contact" },
+];
 
 const Navbar = () => {
   const [isAudioPlaying, setIsAudioPlaying] = useState(false);
+  const [isNavVisible, setIsNavVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
   const navContainerRef = useRef(null);
   const audioElementRef = useRef(null);
   const { y: currentScrollY } = useWindowScroll();
 
-  // Add floating nav class when scrolled (for styling effects only)
+  // Track scroll direction for nav visibility
   useEffect(() => {
-    if (currentScrollY > 0) {
-      navContainerRef.current?.classList.add("floating-nav");
+    if (currentScrollY === 0) {
+      setIsNavVisible(true);
+    } else if (currentScrollY > lastScrollY) {
+      setIsNavVisible(false);
     } else {
-      navContainerRef.current?.classList.remove("floating-nav");
+      setIsNavVisible(true);
     }
+    setLastScrollY(currentScrollY);
   }, [currentScrollY]);
 
+  // GSAP animation on nav show/hide
+  useEffect(() => {
+    const tween = gsap.to(navContainerRef.current, {
+      y: isNavVisible ? 0 : -100,
+      opacity: isNavVisible ? 1 : 0,
+      duration: 0.3,
+      ease: "power2.out",
+    });
+    return () => tween.kill();
+  }, [isNavVisible]);
+
+  // Toggle audio play/pause
   const toggleAudio = () => {
     setIsAudioPlaying((prev) => !prev);
   };
 
-  // Effect to play or pause audio
   useEffect(() => {
-    const audioEl = audioElementRef.current;
-    if (audioEl) {
+    const audio = audioElementRef.current;
+    if (audio) {
       if (isAudioPlaying) {
-        audioEl.play().catch(error => console.error("Audio play failed:", error));
+        audio.play().catch((err) => console.warn("Audio play failed:", err));
       } else {
-        audioEl.pause();
+        audio.pause();
       }
     }
   }, [isAudioPlaying]);
 
   return (
     <div
       ref={navContainerRef}
-      className="fixed inset-x-0 top-0 z-50 h-20 transition-all duration-700 sm:inset-x-6"
+      className={`fixed inset-x-0 top-0 z-50 h-20 transition-all duration-500 sm:inset-x-6 ${
+        isNavVisible ? "floating-nav" : "floating-view"
+      }`}
     >
       <header className="w-full">
         <nav className="flex items-center justify-between p-4">
-          {/* Left Section */}
+          {/* Left: Logo + Button */}
           <div className="flex items-center gap-7">
-            <img src="/img/logo.png" alt="logo" className="w-10" />
+            <img src="/img/logo.png" alt="logo" className="w-10" loading="lazy" />
             <Button
               id="product-button"
               title="Products"
@@ -102,37 +99,30 @@ const Navbar = () => {
             />
           </div>
 
-          {/* Right Section */}
+          {/* Right: Nav Links + Audio */}
           <div className="flex h-full items-center">
             <div className="hidden items-center space-x-6 md:flex">
               {navItems.map((item, index) => (
-                <a key={index} href={item.href} className="nav-hover-btn">
-                  {item.name}
-                </a>
+                <Link key={index} to={item.path} className="nav-hover-btn">
+                  {item.label}
+                </Link>
               ))}
-              <a href="#games-gallery" className="nav-hover-btn">
-                Games
-              </a>
-              <a href="#cart-wishlist" className="nav-hover-btn">
-                Cart
-              </a>
+              <a href="#games-gallery" className="nav-hover-btn">Games</a>
+              <a href="#cart-wishlist" className="nav-hover-btn">Cart</a>
             </div>
 
-            {/* Themed Audio Button with Custom SVG Icons */}
+            {/* Audio Button */}
             <button
               className="relative ml-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border border-white/20 bg-black/30 backdrop-blur-sm transition-transform duration-300 ease-out hover:scale-110"
               onClick={toggleAudio}
               aria-label={isAudioPlaying ? "Pause background music" : "Play background music"}
               aria-pressed={isAudioPlaying}
             >
-              {/* Animated yellow background */}
               <div
                 className={`absolute inset-0 rounded-full bg-yellow-400 shadow-[0_0_15px_rgba(252,211,77,0.5)] transition-transform duration-500 ease-out ${
                   isAudioPlaying ? 'translate-y-0' : 'translate-y-full'
                 }`}
               />
-
-              {/* Icon container */}
               <span className="relative z-10">
                 {isAudioPlaying ? (
                   <VolumeOnIcon className="h-5 w-5 text-black" />
@@ -141,18 +131,14 @@ const Navbar = () => {
                 )}
               </span>
             </button>
-
-            <audio
-              ref={audioElementRef}
-              className="hidden"
-              src="/audio/loop.mp3"
-              loop
-            />
+
+            {/* Audio element */}
+            <audio ref={audioElementRef} className="hidden" src="/audio/loop.mp3" loop />
           </div>
         </nav>
       </header>
     </div>
   );
 };
 
-export default Navbar;
+export default Navbar;

src/components/Nexus.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/all";
+import { useGSAP } from "@gsap/react";
+import AnimatedTitle from "./AnimatedTitle";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const Nexus = () => {
+  useGSAP(() => {
+    gsap.timeline({
+      scrollTrigger: {
+        trigger: "#nexus-clip",
+        start: "center center",
+        end: "+=800 center",
+        scrub: 0.5,
+        pin: true,
+        pinSpacing: true,
+      },
+    }).to(".mask-clip-path-nexus", {
+      width: "100vw",
+      height: "100vh",
+      borderRadius: "0%",
+      ease: "power2.out",
+      duration: 1.5,
+    });
+  });
+
+  return (
+    <div id="nexus" className="min-h-screen w-screen bg-gradient-to-b from-black via-zinc-900 to-black text-white">
+      <div className="relative mt-36 flex flex-col items-center gap-5 max-w-3xl mx-auto px-4 text-center backdrop-blur-md bg-white/5 rounded-2xl shadow-lg py-10">
+        <h2 className="font-general text-sm uppercase tracking-widest text-zinc-300">Enter the Nexus</h2>
+        <AnimatedTitle
+          title="Step <b>in</b>to the center<br/> of all d<b>e</b>cisions"
+          containerClass="mt-5 text-center text-4xl font-bold"
+        />
+        <div className="about-subtext text-zinc-400 mt-4">
+          <p>The Nexus connects every layer of your reality in the Matrix.</p>
+        </div>
+      </div>
+
+      <div className="h-dvh w-screen" id="nexus-clip">
+        <div className="mask-clip-path-nexus about-image relative overflow-hidden backdrop-blur-xl bg-white/10 rounded-3xl shadow-2xl">
+          <img
+            src="https://assets2.razerzone.com/images/pnx.assets/2ce96ca152420023fc7569e1ba85023a/nexus-kishiultra-pgupdate-desktop-hero.webp"
+            alt="Nexus Visual"
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Nexus;