feat(ui): add CursorWrapper component for potential custom cursor reuse

Author: Achalogy

src/app/page.tsx

@@ -6,17 +6,18 @@ import { Hero } from "@/components/home/sections/hero";
 import { Members } from "@/components/home/sections/members";
 import { HeroUIProvider } from "@heroui/react";
 import MainNavbar from '@/components/home/main-navbar';
+import { CursorWrapper } from "@/components/home/ui/CursorWrapper";
 
 export default function HomePage() {
   return (
     <HeroUIProvider>
-      <div className="cursor-none">
+      <CursorWrapper>
         <MainNavbar />
         <Hero />
         <AboutUs />
         <Members />
         <Activities />
-      </div>
+      </CursorWrapper>
     </HeroUIProvider>
   );
 }

src/components/home/member-modal.tsx

@@ -66,7 +66,7 @@ const MemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
                                 <Building className="w-4 h-4" />
                                 <span className="font-medium">{member.title}</span>
                             </div>
-                            <div className="text-[var(--azul-niebla)]">{member.role}</div>
+                            <div className="dark:text-[var(--azul-niebla)]">{member.role}</div>
                             <Button
                                 variant="outline"
                                 className="mt-4 dark:hover:bg-[#121212] hover:bg-[var(--azul-niebla)] hover:text-[var(--azul-electrico)] hover:border-[var(--azul-crayon)] transition-colors duration-200"

src/components/home/sections/hero.tsx

@@ -1,25 +1,8 @@
 "use client";
-import React, { useEffect } from "react";
+import React from "react";
 import ThreeBlobs from "../three-blobs";
 
 export function Hero() {
-    // Add mouse movement handler for the cursor
-    useEffect(() => {
-        const handleMouseMove = (event: MouseEvent) => {
-            const cursor = document.getElementById('custom-cursor');
-            if (cursor) {
-                cursor.style.left = `${event.clientX}px`;
-                cursor.style.top = `${event.clientY}px`;
-            }
-        };
-
-        window.addEventListener('mousemove', handleMouseMove);
-
-        // Cleanup
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-        };
-    }, []);
 
     return (
         <section
@@ -75,19 +58,6 @@ export function Hero() {
             {/* Enhanced gradient overlay for depth */}
             <div
                 className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/25 dark:to-white/15 pointer-events-none z-10"></div>
-
-            {/* Custom cursor with higher z-index to ensure it's always on top */}
-            <div
-                className="hidden xl:flex fixed rounded-full w-6 h-6 border-2 border-azul-noche dark:border-white pointer-events-none"
-                style={{
-                    left: 0,
-                    top: 0,
-                    transform: 'translate(-50%, -50%)',
-                    transition: 'transform 0.05s ease',
-                    zIndex: 999 // Very high z-index to stay above all other elements
-                }}
-                id="custom-cursor"
-            />
         </section>
     );
 }

src/components/home/ui/CursorWrapper.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+
+export const CursorWrapper = ({ children }) => {
+
+  // Add mouse movement handler for the cursor
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      const cursor = document.getElementById('custom-cursor');
+      if (cursor) {
+        cursor.style.left = `${event.clientX}px`;
+        cursor.style.top = `${event.clientY}px`;
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
+  return <div className="cursor-none">
+
+    {children}
+
+    {/* Custom cursor with higher z-index to ensure it's always on top */}
+    <div
+      className="hidden xl:flex fixed rounded-full w-6 h-6 border-2 border-azul-noche dark:border-white pointer-events-none"
+      style={{
+        left: 0,
+        top: 0,
+        transform: 'translate(-50%, -50%)',
+        transition: 'transform 0.05s ease',
+        zIndex: 999 // Very high z-index to stay above all other elements
+      }}
+      id="custom-cursor"
+    />
+  </div>
+}