Bob AI: Replace the existing CTA button in the hero section with a n

src/components/sections/hero/HeroSplitTestimonial.tsx

@@ -5,6 +5,7 @@ import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import MagneticButton from "@/components/ui/MagneticButton";
 
 type Testimonial = {
   name: string;
@@ -69,7 +70,9 @@ const HeroSplitTestimonial = ({
             />
 
             <div className="flex flex-wrap max-md:justify-center gap-3 mt-2">
-              <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
+              <MagneticButton>
+                <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
+              </MagneticButton>
               <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animate delay={0.1} />
             </div>
           </div>
@@ -123,4 +126,4 @@ const HeroSplitTestimonial = ({
   );
 };
 
-export default HeroSplitTestimonial;
+export default HeroSplitTestimonial;

src/components/ui/MagneticButton.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useRef, useState, MouseEvent, ReactNode } from "react";
+import { motion } from "motion/react";
+
+interface MagneticButtonProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function MagneticButton({ children, className = "" }: MagneticButtonProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const handleMouse = (e: MouseEvent<HTMLDivElement>) => {
+    if (!ref.current) return;
+    const { clientX, clientY } = e;
+    const { height, width, left, top } = ref.current.getBoundingClientRect();
+    const middleX = clientX - (left + width / 2);
+    const middleY = clientY - (top + height / 2);
+    setPosition({ x: middleX * 0.3, y: middleY * 0.3 });
+  };
+
+  const reset = () => {
+    setPosition({ x: 0, y: 0 });
+  };
+
+  const { x, y } = position;
+
+  return (
+    <motion.div
+      className={`relative inline-flex ${className}`}
+      ref={ref}
+      onMouseMove={handleMouse}
+      onMouseLeave={reset}
+      animate={{ x, y }}
+      transition={{ type: "spring", stiffness: 150, damping: 15, mass: 0.1 }}
+    >
+      {children}
+    </motion.div>
+  );
+}