trailing cursor effect

src/App.css

@@ -428,7 +428,7 @@
 .rem-default {
   text-decoration: none;
   color: inherit;
-  cursor: pointer;
+  cursor: none;
 }
 
 #close-btn {

src/App.jsx

@@ -8,6 +8,7 @@ import ScrollToTop from './components/ScrollToTop/ScrollToTop.jsx'
 import PreLoader from './components/PreLoader/PreLoader.jsx'
 import { useState } from 'react'
 import Chatbot from './components/Chatbot/chatbot.jsx';
+import TrailingCursor from './components/TrailingCursor/TrailingCursor.jsx'
 
 
 function App() {
@@ -18,6 +19,7 @@ function App() {
     <>
       {isPreLoading && <PreLoader />}
       <BackGround setIsPreLoading={setIsPreLoading} />
+      <TrailingCursor/>
       <Toast />
       <Navbar />
       <Outlet />

src/components/Chatbot/chatbot.css

@@ -20,7 +20,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    cursor: pointer;
+    cursor: none;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
@@ -173,15 +173,15 @@ to {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    cursor: pointer;
+    cursor: none;
     position: relative;
     margin-bottom: 10px; 
     font-size: 20px; 
   }
 
 
   .chat-popup-header i {
-    cursor: pointer;
+    cursor: none;
   }
 
   .chat-popup-body {
@@ -212,7 +212,7 @@ to {
     color: #ffffff;
     border: none;
     padding: 10px 20px;
-    cursor: pointer;
+    cursor: none;
     margin-left: 10px;
   }
 
@@ -257,12 +257,12 @@ to {
     position: absolute;
     right: 80px; 
     top: 12px; 
-    cursor: pointer;
+    cursor: none;
     font-size: 20px; 
   }
 
   .close-icon {
-    cursor: pointer;
+    cursor: none;
     position: relative;
     right: 20px;
     top: -12px; 

src/components/ContactForm/ContactForm.module.css

@@ -115,7 +115,7 @@
     color: white;
     transform: scale(1.1);
     box-shadow: 0 0 15px white;
-    cursor: pointer;
+    cursor: none;
 }
 
 

src/components/Hero/Hero.jsx

@@ -29,7 +29,7 @@ function Hero() {
           <p className="lead text-light">Welcome to CosmoXplore, where NASA's API unveils celestial wonders. Discover breathtaking images and cutting-edge astronomical data, embarking on a cosmic journey that transcends the boundaries of earthly imagination.</p>
           <div className="d-grid gap-5 d-md-flex justify-content-md-start pt-2">
             <a href="#apod">
-              <button type="button" className="btn btn-primary btn-lg px-4 me-md-2">Explore</button>
+              <button type="button" style={{cursor:'none'}} className="btn btn-primary btn-lg px-4 me-md-2">Explore</button>
             </a>
           </div>
         </div>

src/components/Navbar/Navbar.css

@@ -55,7 +55,7 @@
 .rem-default {
   text-decoration: none;
   color: inherit;
-  cursor: pointer;
+  cursor: none;
 }
 
 .navbar-list-item {

src/components/Navbar/Navbar.jsx

@@ -118,6 +118,15 @@ function Navbar() {
           <li className="navbar-list-item" onClick={handleMenuClose}>
             <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/nasa-projects">NASA's Projects</NavLink>
           </li>
+          <li className="navbar-list-item-contact-us">
+            <a href="#contact" className="sidebar-contact rem-default rem">
+              <button style={{cursor:'none'}}
+                className="btn btn-outline-light rounded-pill"
+                type="submit"
+              >
+                Contact Us
+              </button>
+            </a>
           <li className="navbar-list-item" onClick={handleMenuClose}>
             <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/about">About us</NavLink>
           </li>

src/components/ScrollToTop/ScrollToTop.module.css

@@ -20,6 +20,6 @@
     color: white;
     transform: scale(1.1);
     box-shadow: 0 0 15px white;
-    cursor: pointer;
+    cursor: none;
     color: white;
 }

src/components/TrailingCursor/TrailingCursor.jsx

@@ -0,0 +1,56 @@
+import React,{useEffect} from 'react';
+import Styles from './TrailingCursor.module.css'
+import cursorImage from "../../assets/rocket-cursor.svg"
+
+const TrailingCursor = () => {
+    const [cursorPosition, setCursorPosition] = React.useState({ x: 0, y: 0 });
+
+    const handleMouseMove = (event) => {
+        const scrollLeft = window.pageXOffset;
+        const scrollTop = window.pageYOffset;
+        setCursorPosition({ x: event.clientX + scrollLeft, y: event.clientY + scrollTop });
+        createTrailing(event.clientX+60, event.clientY+70);
+    };
+
+    const createTrailing = (x, y) => {
+        const trailingContainer = document.createElement('div');
+        let scrollLeft = window.pageXOffset;
+        let scrollTop = window.pageYOffset;
+        trailingContainer.className = 'trailing-container';
+
+        for (let i = 0; i<8; i++) {
+            const trailing = document.createElement('div');
+            trailing.className = Styles['trailing'];
+            let relativeX = x + scrollLeft + Math.random() * 20 - 10; // Randomize position within a range
+            let relativeY = y + scrollTop + Math.random() * 20 - 10; // Randomize position within a range
+            trailing.style.left = `${relativeX - 5}px`;
+            trailing.style.top = `${relativeY - 5}px`;
+            trailingContainer.appendChild(trailing);
+        }
+
+        document.body.appendChild(trailingContainer);
+
+        // Remove the trailing elements after the animation ends
+        setTimeout(() => {
+            trailingContainer.remove();
+        }, 500);
+    };
+
+    useEffect(() => {
+        document.addEventListener('mousemove', handleMouseMove);
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+        };
+    });
+
+    return (
+        <div>
+            <div className={Styles["cursor-container"]} style={{ left: `${cursorPosition.x}px`, top: `${cursorPosition.y}px`, position: 'absolute' }}>
+                <img src={cursorImage} alt='custom-cursor' className={Styles["custom-cursor"]}/>
+            </div>
+        </div>
+    );
+};
+
+export default TrailingCursor;

src/components/TrailingCursor/TrailingCursor.module.css

@@ -0,0 +1,54 @@
+.cursor-container {
+  position: absolute;
+  pointer-events: none;
+  z-index: 10000;
+  transform: translate(0,10%); 
+}
+
+.custom-cursor {
+  width: 60px;
+  height: 60px;
+  background: transparent;
+  transform: translate(0,20%);
+  transform: rotate(10deg);
+  filter: drop-shadow( 5px 5px 2px #b95dff);
+}
+
+
+.trailing-container {
+  position: absolute;
+  pointer-events: none;
+  animation: trailing-animation 0.4s linear;
+}
+
+.trailing {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: linear-gradient(45deg, #d294eb, #8900d3);
+  border-radius: 50%;
+  transform: scale(0);
+  animation: trailing-effect 0.4s linear;
+  transition: transform 1.2s, opacity 1s;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+@keyframes trailing-effect {
+  from {
+      transform: scale(1);
+      opacity: 1;
+  }
+  to {
+      transform: scale(3);
+      opacity: 0;
+  }
+}
+@keyframes trailing-animation {
+  from {
+      opacity: 1;
+  }
+  to {
+      opacity: 0;
+  }
+}

src/index.css

@@ -4,6 +4,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  cursor: none;
 }
 
 body {

src/pages/404 Page/Notfound.css

@@ -196,7 +196,7 @@ button.go-back {
   font-family: 'Combo', cursive;
   border: none;
   padding: 10px 20px;
-  cursor: pointer;
+  cursor: none;
   transition: 0.3s linear;
   z-index: 9;
   border-radius: 10px;

src/pages/About/About.module.css

@@ -180,7 +180,7 @@
 }
 
 .page-icons {
-    cursor: pointer;
+    cursor: none;
 }
 
 #page-num {

src/pages/MarsRover/MarsRover.module.css

@@ -117,7 +117,7 @@
     background: rgb(201, 198, 198);
     overflow: hidden;
     border-radius: 20px 20px 0 0;
-    cursor: pointer;
+    cursor: none;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -198,7 +198,7 @@
 
 #calender input::-webkit-calendar-picker-indicator {
     filter: invert(100%);
-    cursor: pointer;
+    cursor: none;
 }
 
 #calender input:focus {
@@ -221,7 +221,7 @@
     background: #8400ff;
     color: white;
     box-shadow: 0 0 15px white;
-    cursor: pointer;
+    cursor: none;
 }
 
 @media (max-width:600px) {

src/pages/NasaProjects/NasaProjects.module.css

@@ -137,7 +137,7 @@
 }
 
 .page-icons {
-    cursor: pointer;
+    cursor: none;
 }
 
 #page-num {