@@ -155,4 +141,4 @@ const Navbar = () => {
);
};
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/src/components/Nexus.jsx b/src/components/Nexus.jsx
new file mode 100644
index 0000000..f434863
--- /dev/null
+++ b/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 (
+
+
+
Enter the Nexus
+
+
+
The Nexus connects every layer of your reality in the Matrix.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Nexus;
diff --git a/src/components/Prologue.jsx b/src/components/Prologue.jsx
new file mode 100644
index 0000000..361ba88
--- /dev/null
+++ b/src/components/Prologue.jsx
@@ -0,0 +1,54 @@
+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 Prologue = () => {
+ useGSAP(() => {
+ gsap.timeline({
+ scrollTrigger: {
+ trigger: "#prologue-clip",
+ start: "center center",
+ end: "+=800 center",
+ scrub: 0.5,
+ pin: true,
+ pinSpacing: true,
+ },
+ }).to(".mask-clip-path", {
+ width: "100vw",
+ height: "100vh",
+ borderRadius: "0%",
+ duration: 1,
+ });
+ });
+
+ return (
+
+
+
The Prologue
+
+
+
Before the chaos, there was only silence.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Prologue;
diff --git a/src/components/Vault.jsx b/src/components/Vault.jsx
new file mode 100644
index 0000000..170e822
--- /dev/null
+++ b/src/components/Vault.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 Vault = () => {
+ useGSAP(() => {
+ gsap.timeline({
+ scrollTrigger: {
+ trigger: "#vault-clip",
+ start: "center center",
+ end: "+=800 center",
+ scrub: 0.5,
+ pin: true,
+ pinSpacing: true,
+ },
+ }).to(".mask-clip-path-vault", {
+ width: "100vw",
+ height: "100vh",
+ borderRadius: "0%",
+ ease: "power2.out",
+ duration: 1.5,
+ });
+ });
+
+ return (
+
+
+
Unlock the Vault
+
+
+
All your items, tokens, and lore reside in the Vault.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Vault;
diff --git a/src/index.css b/src/index.css
index 23ac0d5..a7766d0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -290,41 +290,49 @@ body {
opacity: 0.8;
}
}
-
-/* =============================
- Custom Gaming Scrollbar Style
- Theme: Neon Yellow (#edff66)
- ============================= */
-
-/* —— WebKit Browsers —— */
-::-webkit-scrollbar {
- width: 12px;
- height: 12px;
+/* Merged Floating Nav Styles */
+.floating-nav {
+ @apply bg-black rounded-lg border;
+ backdrop-filter: blur(12px);
+ background-color: #ffffff;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+ border-bottom: 1px solid #e5e7eb; /* Tailwind's gray-200 */
}
-::-webkit-scrollbar-track {
- background-color: #0a0a0a;
-
- box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.05);
+.floating-view {
+ backdrop-filter: blur(12px);
+ background-color: #ffffff;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
-::-webkit-scrollbar-thumb {
- background: linear-gradient(145deg, #f6ff80, #cddf44);
- border-radius: 8px;
- border: 2px solid #0a0a0a;
- box-shadow: 0 0 10px #edff66aa;
- transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
+.nav-hover-btn {
+ @apply relative ms-10 font-general text-base sm:text-lg md:text-xl uppercase text-black hover:text-blue-500 transition-colors duration-200;
}
-::-webkit-scrollbar-thumb:hover {
- background: linear-gradient(145deg, #edff66, #aabf33);
- box-shadow: 0 0 16px #edff66;
- transform: scale(1.05);
+/* Final Indicator Line Animation */
+.indicator-line {
+ @apply h-1 w-px rounded-full bg-white transition-all duration-200 ease-in-out;
+ width: 2px;
+ height: 10px;
+ background: #00f;
+ animation: bounce 1s infinite ease-in-out;
+ opacity: 0.6;
}
+.indicator-line.active {
+ opacity: 1;
+}
+@keyframes bounce {
+ 0%, 100% {
+ transform: scaleY(1);
+ }
+ 50% {
+ transform: scaleY(1.5);
+ }
+}
-/* —— WebKit Browsers —— */
+/* Scrollbar Styles - WebKit */
::-webkit-scrollbar {
width: 12px;
height: 12px;
@@ -332,7 +340,6 @@ body {
::-webkit-scrollbar-track {
background-color: #0a0a0a;
- border-radius: 8px;
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.05);
}
@@ -350,10 +357,8 @@ body {
transform: scale(1.05);
}
-/* —— Firefox —— */
+/* Firefox Scrollbar */
* {
- scrollbar-width: auto;
- scrollbar-color: #f6ff80 #0a0a0a;
+ scrollbar-width: auto;
+ scrollbar-color: #f6ff80 #0a0a0a;
}
-
-
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
new file mode 100644
index 0000000..92f4826
--- /dev/null
+++ b/src/pages/About.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import About from '../components/About';
+
+const AboutPage = () => {
+ return
;
+};
+
+export default AboutPage;
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
new file mode 100644
index 0000000..698ad4f
--- /dev/null
+++ b/src/pages/Contact.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Contact from '../components/Contact';
+
+const ContactPage = () => {
+ return
;
+};
+
+export default ContactPage;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..98b9903
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Hero from '../components/Hero';
+import Features from '../components/Features';
+import Story from '../components/Story';
+
+const Home = () => {
+ return (
+ <>
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/src/pages/Nexus.jsx b/src/pages/Nexus.jsx
new file mode 100644
index 0000000..85515d0
--- /dev/null
+++ b/src/pages/Nexus.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Nexus from '../components/Nexus';
+
+const NexusPage = () => {
+ return
;
+};
+
+export default NexusPage;
diff --git a/src/pages/Prologue.jsx b/src/pages/Prologue.jsx
new file mode 100644
index 0000000..ff83398
--- /dev/null
+++ b/src/pages/Prologue.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Prologue from '../components/Prologue';
+
+const ProloguePage = () => {
+ return
;
+};
+
+export default ProloguePage;
diff --git a/src/pages/Vault.jsx b/src/pages/Vault.jsx
new file mode 100644
index 0000000..8b820bc
--- /dev/null
+++ b/src/pages/Vault.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Vault from '../components/Vault';
+
+const VaultPage = () => {
+ return
;
+};
+
+export default VaultPage;