Bob AI: Add a cursor-following bubble animation effect that creates

src/app/page.tsx

@@ -3,6 +3,9 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+'use client';
+
+import { useState, useEffect } from 'react';
 import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
@@ -13,6 +16,27 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Sparkles } from 'lucide-react';
 
 export default function LandingPage() {
+  const [bubbles, setBubbles] = useState([]);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      const newBubble = {
+        id: Date.now(),
+        x: e.clientX,
+        y: e.clientY,
+      };
+
+      setBubbles((prev) => [...prev, newBubble]);
+
+      // Remove bubble after animation completes (2 seconds)
+      setTimeout(() => {
+        setBubbles((prev) => prev.filter((bubble) => bubble.id !== newBubble.id));
+      }, 2000);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -26,6 +50,38 @@ export default function LandingPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="normal"
     >
+      {/* Bubble Container */}
+      <div className="fixed inset-0 pointer-events-none overflow-hidden">
+        {bubbles.map((bubble) => (
+          <div
+            key={bubble.id}
+            className="absolute w-6 h-6 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 opacity-70 animate-float-up"
+            style={{
+              left: `${bubble.x}px`,
+              top: `${bubble.y}px`,
+              transform: 'translate(-50%, -50%)',
+            }}
+          />
+        ))}
+      </div>
+
+      <style jsx>{`
+        @keyframes float-up {
+          0% {
+            opacity: 0.7;
+            transform: translate(-50%, -50%) scale(1);
+          }
+          100% {
+            opacity: 0;
+            transform: translate(-50%, -500px) scale(0.5);
+          }
+        }
+
+        .animate-float-up {
+          animation: float-up 2s ease-out forwards;
+        }
+      `}</style>
+
       <div id="nav" data-section="nav">
         <NavbarStyleApple
           navItems={[