Feature/robot cursor

src/components/Hero/Robot.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Spline from '@splinetool/react-spline';
+import { Application, SPEObject } from '@splinetool/runtime';
+import React, { useEffect, useRef } from 'react';
+
+const Robot = () => {
+  const headRef = useRef<SPEObject | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!headRef.current) return;
+
+      const container = containerRef.current;
+      if (container) {
+        const rect = container.getBoundingClientRect();
+        const insideX = event.clientX >= rect.left && event.clientX <= rect.right;
+        const insideY = event.clientY >= rect.top && event.clientY <= rect.bottom;
+        if (insideX && insideY) return;
+      }
+
+      const mouseX = event.clientX;
+      const mouseY = event.clientY;
+
+      const centerX = window.innerWidth / 2;
+      const centerY = window.innerHeight / 2;
+
+      // Calculate normalized position (-1 to 1 range)
+      const dx = (mouseX - centerX) / centerX;
+      let dy = (mouseY - centerY) / centerY;
+      if (dy > 0) dy *= 1.8; // Enhance downward movement
+
+      const maxRotation = 0.5;
+      const smoothingFactor = 0.1; // Lower = smoother transition
+
+      // Apply smooth transition
+      const targetRotationY = dx * maxRotation;
+      const targetRotationX = dy * maxRotation;
+
+      headRef.current.rotation.y += (targetRotationY - headRef.current.rotation.y) * smoothingFactor;
+      headRef.current.rotation.x += (targetRotationX - headRef.current.rotation.x) * smoothingFactor;
+    };
+
+    document.addEventListener('mousemove', handleMouseMove, { passive: true });
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
+  const onLoad = (spline: Application) => {
+    const head = spline.findObjectByName('Head');
+    if (head) {
+      headRef.current = head;
+    } else {
+      console.warn('Head not found in Spline scene');
+    }
+  };
+
+  return (
+    <div 
+      ref={containerRef}
+      className="absolute h-56 w-full flex justify-center items-center top-[450px] sm:top-[600px] md:top-[470px]"
+    >
+      <div className="relative h-48 z-4">
+        <Spline
+          style={{ width: '250px', height: '200px' }}
+          scene="https://prod.spline.design/xftrkvFRb1DBOaCk/scene.splinecode"
+          onLoad={onLoad}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Robot;

src/components/Hero/index.tsx

@@ -1,6 +1,6 @@
-import Spline from '@splinetool/react-spline/next';
 import Link from "next/link";
 import "./hero.css";
+import Robot from './Robot';
 const Hero = () => {
 
   return (
@@ -9,13 +9,7 @@ const Hero = () => {
         id="home"
         className="relative overflow-hidden bg-primary pt-[150px] md:pt-[150px] lg:pt-[160px]"
       >
-        <div className='robotiii absolute h-56 w-full justify-center items-center top-[450px] sm:top-[600px] md:top-[470px]'>
-        <center><div  className='relative h-48 sm:w-2/5 md:w-2/5 justify-center z-4'>
-        <Spline
-        scene="https://prod.spline.design/xftrkvFRb1DBOaCk/scene.splinecode" 
-      />
-          </div></center>
-        </div>
+       <Robot/>
         <div className="container">
 
           <div className="-mx-4 flex flex-wrap items-center">