Merge pull request #342 from Sancharisingh/issue/#328

Add animated cursor

package.json

@@ -20,6 +20,7 @@
     "dotenv": "^16.4.5",
     "groq-sdk": "^0.5.0",
     "react": "^18.2.0",
+    "react-animated-cursor": "^2.11.2",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-loader-spinner": "^6.1.6",

src/App.css

@@ -0,0 +1,3 @@
+body {
+  cursor: none; 
+}

src/App.jsx

@@ -22,6 +22,8 @@ import ContributorDetail from "./pages/contributor/ContributorDetail";
 import Login from "./pages/auth/Login";
 import SignUp from "./pages/auth/SignUp";
 import ChanakyaGpt from "./pages/resources/ChanakyaGpt";
+import "./App.css";
+import AnimatedCursor from "react-animated-cursor"
 
 function App() {
   const { progress, isDarkMode } = useContext(Context); // Assuming isDarkMode is provided in your context
@@ -32,6 +34,27 @@ function App() {
 
   return (
     <div className={`d-flex flex-column ${isDarkMode ? 'dark' : ''}`}>
+          <AnimatedCursor
+      innerSize={10}
+      outerSize={12}
+      color='111, 158, 111'
+      outerAlpha={0.8}
+      innerScale={1.0}
+      outerScale={5}
+      clickables={[
+        'a',
+        'input[type="text"]',
+        'input[type="email"]',
+        'input[type="number"]',
+        'input[type="submit"]',
+        'input[type="image"]',
+        'label[for]',
+        'select',
+        'textarea',
+        'button',
+        '.link'
+      ]}
+    />
       <Router>
         <Navbar />
         <LoadingBar height={3} color="#f11946" progress={progress} />