Bob AI: Add custom cursor animations and styling globally across the

src/app/layout.tsx

@@ -31,6 +31,125 @@ export default function RootLayout({
           dangerouslySetInnerHTML={{
             __html: `
 (function() {
+  // Initialize custom cursor and click sound
+  if (!window.__customCursorInitialized) {
+    window.__customCursorInitialized = true;
+    
+    // Create custom cursor elements
+    const cursorDot = document.createElement('div');
+    cursorDot.id = 'custom-cursor-dot';
+    cursorDot.style.cssText = 'position: fixed; width: 12px; height: 12px; background: radial-gradient(circle, #4d96ff, #2563eb); border-radius: 50%; pointer-events: none; z-index: 9999; box-shadow: 0 0 10px rgba(77, 150, 255, 0.6); display: none;';
+    document.body.appendChild(cursorDot);
+    
+    const cursorRing = document.createElement('div');
+    cursorRing.id = 'custom-cursor-ring';
+    cursorRing.style.cssText = 'position: fixed; width: 32px; height: 32px; border: 2px solid #4d96ff; border-radius: 50%; pointer-events: none; z-index: 9998; display: none; box-shadow: 0 0 15px rgba(77, 150, 255, 0.4);';
+    document.body.appendChild(cursorRing);
+    
+    // Trail particles
+    const trails = [];
+    const maxTrails = 8;
+    
+    function createTrail(x, y) {
+      const trail = document.createElement('div');
+      trail.style.cssText = 'position: fixed; width: 6px; height: 6px; background: rgba(77, 150, 255, 0.6); border-radius: 50%; pointer-events: none; z-index: 9997;';
+      trail.style.left = x + 'px';
+      trail.style.top = y + 'px';
+      document.body.appendChild(trail);
+      
+      trails.push({ element: trail, life: 1 });
+      if (trails.length > maxTrails) {
+        const old = trails.shift();
+        old.element.remove();
+      }
+      
+      let opacity = 1;
+      const fadeInterval = setInterval(() => {
+        opacity -= 0.15;
+        trail.style.opacity = opacity;
+        if (opacity <= 0) {
+          clearInterval(fadeInterval);
+          trail.remove();
+        }
+      }, 30);
+    }
+    
+    // Mouse move listener
+    let mouseX = 0, mouseY = 0;
+    let dotX = 0, dotY = 0;
+    let ringX = 0, ringY = 0;
+    
+    document.addEventListener('mousemove', (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+      
+      cursorDot.style.display = 'block';
+      cursorRing.style.display = 'block';
+      
+      createTrail(mouseX - 3, mouseY - 3);
+    });
+    
+    // Smooth animation loop
+    function animateCursor() {
+      dotX += (mouseX - dotX) * 0.3;
+      dotY += (mouseY - dotY) * 0.3;
+      ringX += (mouseX - ringX) * 0.15;
+      ringY += (mouseY - ringY) * 0.15;
+      
+      cursorDot.style.left = (dotX - 6) + 'px';
+      cursorDot.style.top = (dotY - 6) + 'px';
+      cursorRing.style.left = (ringX - 16) + 'px';
+      cursorRing.style.top = (ringY - 16) + 'px';
+      
+      requestAnimationFrame(animateCursor);
+    }
+    animateCursor();
+    
+    // Hide cursor on leave
+    document.addEventListener('mouseleave', () => {
+      cursorDot.style.display = 'none';
+      cursorRing.style.display = 'none';
+    });
+    
+    // Click sound effect
+    function playClickSound() {
+      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+      
+      oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
+      oscillator.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.1);
+      
+      gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
+      
+      oscillator.start(audioContext.currentTime);
+      oscillator.stop(audioContext.currentTime + 0.1);
+    }
+    
+    // Click listener
+    document.addEventListener('click', () => {
+      playClickSound();
+      
+      // Pulse effect on ring
+      cursorRing.style.animation = 'none';
+      setTimeout(() => {
+        cursorRing.style.animation = 'pulse 0.4s ease-out';
+      }, 10);
+    });
+    
+    // Add pulse animation
+    const style = document.createElement('style');
+    style.textContent = '@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }';
+    document.head.appendChild(style);
+    
+    // Hide default cursor
+    document.documentElement.style.cursor = 'none';
+  }
+  
   if (window.self === window.top) return;
 
   if (window.__webildEditorInitialized) return;

src/components/sections/testimonial/TestimonialCardSixteen.tsx

@@ -85,7 +85,7 @@ const TestimonialCard = memo(({
     overlayClassName = "",
     ratingClassName = "",
     nameClassName = "",
-    roleClassName = "",
+roleClassName = "",
     companyClassName = "",
 }: TestimonialCardProps) => {
     const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });