diff --git a/package-lock.json b/package-lock.json index 748da02..89f4225 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,23 +1,30 @@ { - "name": "my-project", + "name": "my-project-565", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "my-project", + "name": "my-project-565", "version": "0.0.0", + "license": "ISC", "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" + "react-use": "^17.6.0", "sonner": "^2.0.6", "styled-components": "^6.1.19" + }, "devDependencies": { "@eslint/js": "^9.15.0", @@ -331,6 +338,8 @@ "node": ">=6.9.0" } }, + + "node_modules/@emotion/is-prop-valid": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", @@ -752,6 +761,7 @@ "node": ">=18" } }, + "node_modules/@esbuild/win32-x64": { "version": "0.25.8", "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.8.tgz", @@ -1077,6 +1087,8 @@ "node": ">=14" } }, + + "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.27", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", @@ -1330,6 +1342,7 @@ "win32" ] }, + "node_modules/@rollup/rollup-win32-x64-msvc": { "version": "4.46.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.0.tgz", @@ -2022,6 +2035,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", @@ -2885,18 +2907,31 @@ "url": "https://github.com/sponsors/rawify" } }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + "node_modules/framer-motion": { + "version": "12.23.9", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.9.tgz", + "integrity": "sha512-TqEHXj8LWfQSKqfdr5Y4mYltYLw96deu6/K9kGDd+ysqRJPNwF9nb5mZcrLmybHbU7gcJ+HQar41U3UTGanbbQ==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.23.9", + "motion-utils": "^12.23.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } } }, "node_modules/function-bind": { @@ -3928,6 +3963,21 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/motion-dom": { + "version": "12.23.9", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.9.tgz", + "integrity": "sha512-6Sv++iWS8XMFCgU1qwKj9l4xuC47Hp4+2jvPfyTXkqDg2tTzSgX6nWKD4kNFXk0k7llO59LZTPuJigza4A2K1A==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.23.6" + } + }, + "node_modules/motion-utils": { + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -4551,6 +4601,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz", + "integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==", + "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.7.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz", + "integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==", + "license": "MIT", + "dependencies": { + "react-router": "7.7.1" + }, + "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 +4940,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..6d1240d 100644 --- a/package.json +++ b/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,14 +26,20 @@ "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" + "react-use": "^17.6.0", "sonner": "^2.0.6", "styled-components": "^6.1.19" + }, "devDependencies": { "@eslint/js": "^9.15.0", diff --git a/src/App.jsx b/src/App.jsx index b460bee..8745c68 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,37 @@ + +// App.jsx +import React from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +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 ( + +
+ + + + } /> + } /> + } /> + } /> + } /> + } /> + + +
+ + import React from 'react'; import { Toaster } from 'sonner'; import Hero from './components/Hero'; @@ -144,6 +178,7 @@ const App = () => { + ); }; diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index db3e1e0..1fd3c6a 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -4,6 +4,16 @@ import Button from "./Button"; import { TiLocationArrow } from "react-icons/ti"; import { useWindowScroll } from "react-use"; import gsap from "gsap"; + +import { Link } from "react-router-dom"; + +// Navigation items and their corresponding routes +const navItems = [ + { label: "Nexus", path: "/nexus" }, + { label: "Vault", path: "/vault" }, + { label: "Prologue", path: "/prologue" }, + { label: "About", path: "/about" }, + { label: "Contact", path: "/contact" }, import SearchBar from "./SearchBar"; const navItems = [ @@ -12,6 +22,7 @@ const navItems = [ { name: "Prologue", href: "#story" }, { name: "About", href: "#about" }, { name: "Contact", href: "#contact" }, + ]; // Custom SVG Icons @@ -49,25 +60,61 @@ const VolumeOffIcon = ({ className }) => ( const Navbar = ({ gameTitles = [] }) => { const [isAudioPlaying, setIsAudioPlaying] = useState(false); + const [isIndicatorActive, setIsIndicatorActive] = useState(false); + const [lastScrollY, setLastScrollY] = useState(0); + const [isNavVisible, setIsNavVisible] = useState(true); const navContainerRef = useRef(null); const audioElementRef = useRef(null); const { y: currentScrollY } = useWindowScroll(); + // Handle scroll direction and update nav visibility + useEffect(() => { + if (currentScrollY === 0) { + setIsNavVisible(true); + } else if (currentScrollY > lastScrollY) { + setIsNavVisible(false); + } else if (currentScrollY < lastScrollY) { + setIsNavVisible(true); // Add floating nav class when scrolled (for styling effects only) useEffect(() => { if (currentScrollY > 0) { navContainerRef.current?.classList.add("floating-nav"); } else { navContainerRef.current?.classList.remove("floating-nav"); + } }, [currentScrollY]); + // Animate nav in/out with GSAP + useEffect(() => { + const tween = gsap.to(navContainerRef.current, { + y: isNavVisible ? 0 : -100, + opacity: isNavVisible ? 1 : 0, + duration: 0.2, + ease: "power2.out", + }); + + return () => tween.kill(); + }, [isNavVisible]); + + // Toggle audio playback + const toggleAudioIndicator = () => { const toggleAudio = () => { + setIsAudioPlaying((prev) => !prev); }; // Effect to play or pause audio useEffect(() => { + const audio = audioElementRef.current; + if (!audio) return; + + if (isAudioPlaying) { + audio.play().catch((err) => + console.warn("Audio autoplay failed:", err) + ); + } else { + audio.pause(); const audioEl = audioElementRef.current; if (audioEl) { if (isAudioPlaying) { @@ -81,13 +128,24 @@ const Navbar = ({ gameTitles = [] }) => { return (