hidden scrollbar and added lenis for viscous scroll effect

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@studio-freight/lenis": "^1.0.42",
     "@tailwindcss/vite": "^4.1.13",
     "axios": "^1.12.2",
     "framer-motion": "^12.23.22",

src/index.css

@@ -7,3 +7,26 @@
   --font-google-code: "Google Sans Code", monospace;
   --font-press-start: "Press Start 2P", cursive;
 }
+
+/* ===== Hide scrollbars globally but keep scroll functional ===== */
+::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+* {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;     /* Firefox */
+}
+
+/* ===== If you only want to hide scrollbars for a specific container ===== */
+/* Example usage: <div class="scroll-container"> ... </div> */
+
+.scroll-container {
+  overflow: auto; /* or scroll */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;     /* Firefox */
+}
+
+.scroll-container::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}

src/routes.jsx

@@ -1,30 +1,92 @@
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {
+  createBrowserRouter,
+  useLocation,
+} from "react-router-dom";
+import { useEffect } from "react";
 import Layout from "./layout/Layout";
 import LandingPage from "./pages/LandingPage";
 import LoginPage from "./pages/LoginPage";
 import RegisterPage from "./pages/RegisterPage";
 import ProtectedRoute from "./routes/ProtectedRoute";
 import PublicRoute from "./routes/PublicRoute";
-import FeaturesPage from "./pages/FeaturesPage";
-import AboutPage from "./pages/AboutPage";
+import Lenis from "@studio-freight/lenis";
 
-// Placeholder component for dashboard
+// ===== Scroll & Smooth Wrapper =====
+const SmoothScrollWrapper = ({ children }) => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // Initialize Lenis
+    const lenis = new Lenis({
+      duration: 1.0, // higher = heavier / more viscous feel
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+      smoothWheel: true,
+      smoothTouch: true,
+    });
+
+    // RAF loop
+    const raf = (time) => {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    };
+    requestAnimationFrame(raf);
+
+    // Scroll to top smoothly on route change
+    lenis.scrollTo(0, { offset: 0, duration: 1.2 });
+
+    return () => {
+      lenis.destroy();
+    };
+  }, [pathname]);
+
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        backgroundColor: "#0f172a",
+        color: "#f9fafb",
+        animation: "fadeIn 0.6s ease-in-out",
+      }}
+    >
+      {children}
+      <style>
+        {`
+          html {
+            scroll-behavior: auto; /* Let Lenis handle it */
+          }
+          body {
+            overflow: visible; /* ✅ keep scroll enabled */
+          }
+          @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(15px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+// ===== Dashboard Placeholder =====
 const DashboardPage = () => (
   <div style={{ padding: "2rem", textAlign: "center", color: "#f9fafb" }}>
     <h2>Dashboard</h2>
-    <p>
-      Welcome to your dashboard! User functionality will be implemented here.
-    </p>
+    <p>Welcome to your dashboard! User functionality will be implemented here.</p>
+    {/* Extra content for scroll testing */}
+    <div style={{ height: "200vh" }}></div>
   </div>
 );
 
+// ===== Routes =====
 const routes = createBrowserRouter([
   {
     path: "/",
     element: (
-      <Layout>
-        <LandingPage />
-      </Layout>
+      <SmoothScrollWrapper>
+        <Layout>
+          <LandingPage />
+        </Layout>
+      </SmoothScrollWrapper>
     ),
   },
   {
@@ -46,31 +108,37 @@ const routes = createBrowserRouter([
   {
     path: "/login",
     element: (
-      <PublicRoute>
-        <Layout>
-          <LoginPage />
-        </Layout>
-      </PublicRoute>
+      <SmoothScrollWrapper>
+        <PublicRoute>
+          <Layout>
+            <LoginPage />
+          </Layout>
+        </PublicRoute>
+      </SmoothScrollWrapper>
     ),
   },
   {
     path: "/register",
     element: (
-      <PublicRoute>
-        <Layout>
-          <RegisterPage />
-        </Layout>
-      </PublicRoute>
+      <SmoothScrollWrapper>
+        <PublicRoute>
+          <Layout>
+            <RegisterPage />
+          </Layout>
+        </PublicRoute>
+      </SmoothScrollWrapper>
     ),
   },
   {
     path: "/dashboard",
     element: (
-      <ProtectedRoute>
-        <Layout>
-          <DashboardPage />
-        </Layout>
-      </ProtectedRoute>
+      <SmoothScrollWrapper>
+        <ProtectedRoute>
+          <Layout>
+            <DashboardPage />
+          </Layout>
+        </ProtectedRoute>
+      </SmoothScrollWrapper>
     ),
   },
 ]);