Remove cursor on mobile view

src/components/AboutUs/index.jsx

@@ -89,28 +89,25 @@ export default function AboutSection() {
   useEffect(() => {
     const paragraph = paragraphRef.current;
 
-    const originalSpan = paragraph.querySelector(".text-primary");
-    const highlightedText = originalSpan.textContent;
-
     // Split all text nodes while preserving the special span
     const splitText = (node) => {
       if (node.nodeType === 3) {
         // Text node
-        const letters = node.textContent.split("");
-        const fragments = letters.map((letter) => {
+        const words = node.textContent.split(" ");
+        const fragments = words.map((word) => {
           const span = document.createElement("span");
           span.className = "inline-block letter-span";
-          span.innerHTML = letter === " " ? " " : letter;
+          span.innerHTML = `${word} `;
           return span;
         });
         node.replaceWith(...fragments);
       } else if (node.classList?.contains("text-primary")) {
         // For highlighted text, split but add special class
-        const letters = node.textContent.split("");
-        const fragments = letters.map((letter) => {
+        const words = node.textContent.split(" ");
+        const fragments = words.map((word) => {
           const span = document.createElement("span");
           span.className = "inline-block letter-span highlighted";
-          span.innerHTML = letter === " " ? " " : letter;
+          span.innerHTML = `${word}} `;
           return span;
         });
         node.replaceWith(...fragments);
@@ -137,7 +134,7 @@ export default function AboutSection() {
     // Animate regular text
     tl.fromTo(
       paragraph.querySelectorAll(".letter-span:not(.highlighted)"),
-      { color: "#595959" },
+      { color: "transparent" },
       {
         color: "#B7AB98",
         stagger: 0.02,
@@ -148,7 +145,7 @@ export default function AboutSection() {
     // Animate highlighted text
     tl.fromTo(
       paragraph.querySelectorAll(".highlighted"),
-      { color: "#595959" },
+      { color: "transparent" },
       {
         color: "#E76941",
         stagger: 0.02,
@@ -177,10 +174,10 @@ export default function AboutSection() {
               ref={paragraphRef}
               className="text-xl md:text-4xl md:leading-snug font-poppins font-semibold"
             >
-              Codex is the coding club at{" "}
+              Codex is the coding club at
               <span className="text-primary">
                 Symbiosis Institute of Technology
-              </span>{" "}
+              </span>
               that brings together students passionate about technology and
               programming. Our club is committed to creating an engaging
               environment where members can learn, collaborate, and grow their

src/components/Cursor/index.jsx

@@ -11,6 +11,7 @@ function Cursor() {
     y: 0,
   });
 
+  const [isMobile, setIsMobile] = useState(false); // state to track if it's mobile
   const cursorRef = useRef(null);
 
   const debouncedMouseMove = debounce((e) => {
@@ -24,10 +25,21 @@ function Cursor() {
     debouncedMouseMove(e);
   }
 
+  // Check if the device is mobile
   useEffect(() => {
-    if (cursorRef.current) {
-      //   cursorRef.current.style.left = `${mousePosition.x}px`;
-      //   cursorRef.current.style.top = `${mousePosition.y}px`;
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth <= 768); // Change 768px to your desired mobile breakpoint
+    };
+    checkIfMobile();
+
+    window.addEventListener("resize", checkIfMobile);
+    return () => {
+      window.removeEventListener("resize", checkIfMobile);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (cursorRef.current && !isMobile) {
       cursorRef.current.animate(
         {
           left: `${mousePosition.x}px`,
@@ -36,12 +48,16 @@ function Cursor() {
         { duration: 400, fill: "forwards" },
       );
     }
-    window.addEventListener("mousemove", mouseMove);
+    if (!isMobile) {
+      window.addEventListener("mousemove", mouseMove);
+    }
 
     return () => {
-      window.removeEventListener("mousemove", mouseMove);
+      if (!isMobile) {
+        window.removeEventListener("mousemove", mouseMove);
+      }
     };
-  }, [mousePosition]);
+  }, [mousePosition, isMobile]);
 
   const variants = {
     default: {
@@ -60,6 +76,11 @@ function Cursor() {
     },
   };
 
+  // If on mobile, render nothing (invisible cursor)
+  if (isMobile) {
+    return null;
+  }
+
   return (
     <motion.div
       ref={cursorRef}

src/pages/About/index.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useState, useRef } from "react";
-import Heading from "@/components/Heading/index";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Oval from "@/assets/images/About/oval.svg";
 import PageTransition from "../../components/PageTransition";
+import Heading from "@/components/Heading/index";
 import "./About.css";
 
 gsap.registerPlugin(ScrollTrigger);

src/pages/Teams/TeamMember.jsx

@@ -22,7 +22,8 @@ const images = {
 };
 
 function TeamMember({ member }) {
-  const { name, position, description, linkedin, instagram, github, id } = member;
+  const { name, position, description, linkedin, instagram, github, id } =
+    member;
   const image = images[id];
 
   return (