Add src/components/cursor/CustomCursor.tsx

Merge version_1 into main

src/app/page.tsx

@@ -25,7 +25,7 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="light"
     >
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" className="w-full">
         <NavbarLayoutFloatingInline
           brandName="ZENIT"
           navItems={[
@@ -39,7 +39,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" className="w-full">
         <HeroBillboardRotatedCarousel
           title="Work at the speed of your thinking."
           description="ZENIT brings your tasks, team, and focus into one powerful workspace. Built for teams that move fast."
@@ -65,7 +65,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="marquee" data-section="marquee">
+      <div id="marquee" data-section="marquee" className="w-full">
         <FeatureBorderGlow
           title="Unified Workspace · Deep Focus Mode · Real-time Collaboration · Smart Prioritisation · Zero Distractions · Built for Speed"
           description="Everything you need to work better, faster, and smarter."
@@ -84,7 +84,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="stats" data-section="stats">
+      <div id="stats" data-section="stats" className="w-full">
         <MetricCardTen
           title="By the numbers"
           description="Join thousands of teams already transforming their productivity."
@@ -102,7 +102,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div id="features" data-section="features" className="w-full">
         <FeatureBorderGlow
           title="Built different."
           description="Every feature designed for teams that refuse to compromise."
@@ -121,7 +121,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="pricing" data-section="pricing">
+      <div id="pricing" data-section="pricing" className="w-full">
         <PricingCardFive
           title="Simple, transparent pricing."
           description="Choose the perfect plan for your team. No hidden fees, no surprises."
@@ -139,7 +139,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" className="w-full">
         <TestimonialCardSixteen
           title="Loved by teams everywhere"
           description="See how ZENIT transformed productivity for teams across industries."
@@ -165,7 +165,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="cta" data-section="cta">
+      <div id="cta" data-section="cta" className="w-full">
         <ContactCTA
           tag="GET STARTED"
           tagIcon={Zap}
@@ -179,7 +179,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" className="w-full">
         <FooterBase
           logoText="ZENIT"
           copyrightText="© 2025 ZENIT | Productivity Reimagined"

src/components/cursor/CustomCursor.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+const CustomCursor = () => {
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const followerRef = useRef<HTMLDivElement>(null);
+  const mousePosition = useRef({ x: 0, y: 0 });
+  const followerPosition = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      mousePosition.current = { x: e.clientX, y: e.clientY };
+
+      if (cursorRef.current) {
+        cursorRef.current.style.left = `${e.clientX}px`;
+        cursorRef.current.style.top = `${e.clientY}px`;
+      }
+    };
+
+    const animateFollower = () => {
+      const dx =
+        mousePosition.current.x - followerPosition.current.x;
+      const dy =
+        mousePosition.current.y - followerPosition.current.y;
+
+      followerPosition.current.x += dx * 0.15;
+      followerPosition.current.y += dy * 0.15;
+
+      if (followerRef.current) {
+        followerRef.current.style.left = `${followerPosition.current.x}px`;
+        followerRef.current.style.top = `${followerPosition.current.y}px`;
+      }
+
+      requestAnimationFrame(animateFollower);
+    };
+
+    const handleMouseEnter = () => {
+      if (cursorRef.current) {
+        cursorRef.current.style.opacity = "1";
+      }
+      if (followerRef.current) {
+        followerRef.current.style.opacity = "1";
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (cursorRef.current) {
+        cursorRef.current.style.opacity = "0";
+      }
+      if (followerRef.current) {
+        followerRef.current.style.opacity = "0";
+      }
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseenter", handleMouseEnter);
+    window.addEventListener("mouseleave", handleMouseLeave);
+    animateFollower();
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseenter", handleMouseEnter);
+      window.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={cursorRef}
+        className="pointer-events-none fixed z-50 w-3 h-3 bg-primary-cta rounded-full shadow-lg mix-blend-screen opacity-0 transition-opacity duration-300"
+        style={{
+          transform: "translate(-50%, -50%)"}}
+      />
+      <div
+        ref={followerRef}
+        className="pointer-events-none fixed z-40 w-8 h-8 border-2 border-primary-cta rounded-full opacity-0 transition-opacity duration-300"
+        style={{
+          transform: "translate(-50%, -50%)",          boxShadow: "0 0 20px rgba(var(--primary-cta-rgb), 0.3)"}}
+      />
+      <style>{`
+        * {
+          cursor: none !important;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default CustomCursor;