Rajput-xv · Rajput-xv · Oct 16, 2025 · Oct 16, 2025
diff --git a/client/index.html b/client/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="lenis lenis-smooth">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -14,6 +14,7 @@
     "firebase": "^12.2.1",
     "i18next": "^25.5.2",
     "i18next-browser-languagedetector": "^8.2.0",
+    "lenis": "^1.3.11",
     "lucide-react": "^0.294.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -10,8 +10,38 @@ import './i18n';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 
+// Import Lenis for smooth scrolling
+import Lenis from 'lenis';
+import 'lenis/dist/lenis.css';
+
 import { LoadingProvider } from './context/LoadingContext.jsx';
 
+// Initialize Lenis smooth scrolling
+const lenis = new Lenis({
+  duration: 1.2,
+  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+  orientation: 'vertical',
+  gestureOrientation: 'vertical',
+  smoothWheel: true,
+  wheelMultiplier: 1,
+  smoothTouch: false,
+  touchMultiplier: 2,
+  infinite: false,
+});
+
+// Request animation frame for Lenis
+function raf(time) {
+  lenis.raf(time);
+  requestAnimationFrame(raf);
+}
+
+requestAnimationFrame(raf);
+
+// Integrate Lenis with AOS
+lenis.on('scroll', () => {
+  AOS.refresh();
+});
+
 // Initialize AOS with optimized settings
 AOS.init({
   duration: 800,

diff --git a/client/src/styles/global.css b/client/src/styles/global.css
@@ -5,6 +5,32 @@
   box-sizing: border-box;
 }
 
+html {
+  /* Disable default smooth scroll to let Lenis handle it */
+  scroll-behavior: auto;
+}
+
+html.lenis,
+html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+  pointer-events: none;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, sans-serif;

diff --git a/client/src/utils/useLenis.js b/client/src/utils/useLenis.js
@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+
+/**
+ * Custom hook to control Lenis smooth scrolling
+ * @param {Object} options - Lenis options
+ * @returns {Object} - Lenis control functions
+ */
+export const useLenis = (callback) => {
+  useEffect(() => {
+    if (callback) {
+      // Access the global lenis instance if needed
+      const handleScroll = (e) => {
+        callback(e);
+      };
+
+      window.addEventListener('scroll', handleScroll);
+      return () => window.removeEventListener('scroll', handleScroll);
+    }
+  }, [callback]);
+};
+
+/**
+ * Scroll to a specific element or position
+ * @param {string|number} target - Element selector or scroll position
+ * @param {Object} options - Scroll options
+ */
+export const scrollTo = (target, options = {}) => {
+  if (typeof target === 'string') {
+    const element = document.querySelector(target);
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        ...options,
+      });
+    }
+  } else if (typeof target === 'number') {
+    window.scrollTo({
+      top: target,
+      behavior: 'smooth',
+      ...options,
+    });
+  }
+};
+
+/**
+ * Scroll to top of the page
+ */
+export const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};
+
+/**
+ * Stop smooth scrolling
+ */
+export const stopScroll = () => {
+  document.documentElement.classList.add('lenis-stopped');
+};
+
+/**
+ * Resume smooth scrolling
+ */
+export const startScroll = () => {
+  document.documentElement.classList.remove('lenis-stopped');
+};
+
+export default {
+  useLenis,
+  scrollTo,
+  scrollToTop,
+  stopScroll,
+  startScroll,
+};