Bob AI: Replace the bubble animation effect with animated penis shap

src/app/page.tsx

@@ -1,10 +1,8 @@
-"use client"
+"use client";
 
 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';
@@ -50,18 +48,26 @@ export default function LandingPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="normal"
     >
-      {/* Bubble Container */}
+      {/* Anatomical Shape Container */}
       <div className="fixed inset-0 pointer-events-none overflow-hidden">
         {bubbles.map((bubble) => (
-          <div
+          <svg
             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"
+            className="absolute animate-float-up"
+            width="24"
+            height="32"
+            viewBox="0 0 24 32"
             style={{
               left: `${bubble.x}px`,
               top: `${bubble.y}px`,
               transform: 'translate(-50%, -50%)',
             }}
-          />
+          >
+            {/* Anatomical penis shape for educational purposes */}
+            <ellipse cx="12" cy="8" rx="6" ry="8" fill="#d4a574" opacity="0.8" />
+            <rect x="9" y="14" width="6" height="14" rx="3" fill="#d4a574" opacity="0.8" />
+            <ellipse cx="12" cy="28" rx="4" ry="3" fill="#c9956f" opacity="0.8" />
+          </svg>
         ))}
       </div>