Bob AI: Add glossy effect to all headlines across the page using CSS

src/app/page.tsx

@@ -1,8 +1,9 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+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';
@@ -10,22 +11,173 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Sparkles } from 'lucide-react';
+import { Sparkles, X } from 'lucide-react';
 
 export default function LandingPage() {
-  return (
+  const [bubbles, setBubbles] = useState([]);
-    <ThemeProvider
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
-      defaultButtonVariant="hover-magnetic"
+  const [videoUrl, setVideoUrl] = useState('');
-      defaultTextAnimation="reveal-blur"
+
-      borderRadius="soft"
+  useEffect(() => {
-      contentWidth="smallMedium"
+    const handleMouseMove = (e) => {
-      sizing="mediumLargeSizeMediumTitles"
+      const newBubble = {
-      background="circleGradient"
+        id: Date.now(),
-      cardStyle="outline"
+        x: e.clientX,
-      primaryButtonStyle="radial-glow"
+        y: e.clientY,
-      secondaryButtonStyle="layered"
+      };
-      headingFontWeight="normal"
+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);
+  }, []);
+
+  const openVideoPopup = (url) => {
+    setVideoUrl(url);
+    setIsVideoOpen(true);
+  };
+
+  const closeVideoPopup = () => {
+    setIsVideoOpen(false);
+    setVideoUrl('');
+  };
+   return (
+     <ThemeProvider
+       defaultButtonVariant="hover-magnetic"
+       defaultTextAnimation="reveal-blur"
+       borderRadius="soft"
+       contentWidth="smallMedium"
+       sizing="mediumLargeSizeMediumTitles"
+       background="circleGradient"
+       cardStyle="outline"
+       primaryButtonStyle="radial-glow"
+       secondaryButtonStyle="layered"
+       headingFontWeight="normal"
+     >
+       <style>{`
+         @keyframes shimmer {
+           0% {
+             background-position: -1000px 0;
+           }
+           100% {
+             background-position: 1000px 0;
+           }
+         }
+
+         h1, h2, h3 {
+           position: relative;
+           background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
+           backdrop-filter: blur(10px);
+           -webkit-backdrop-filter: blur(10px);
+           border: 1px solid rgba(255, 255, 255, 0.2);
+           border-radius: 8px;
+           padding: 12px 16px;
+           box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3);
+           animation: shimmer 3s infinite;
+           background-size: 1000px 100%;
+           background-image: 
+             linear-gradient(90deg, 
+               rgba(255, 255, 255, 0) 0%, 
+               rgba(255, 255, 255, 0.2) 50%, 
+               rgba(255, 255, 255, 0) 100%),
+             linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
+         }
+
+         h1 {
+           font-size: 2.5rem;
+           letter-spacing: -0.02em;
+         }
+
+         h2 {
+           font-size: 2rem;
+           letter-spacing: -0.015em;
+         }
+
+         h3 {
+           font-size: 1.5rem;
+           letter-spacing: -0.01em;
+         }
+       `}</style>
+      {/* Video Popup Modal */}
+      {isVideoOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Overlay Backdrop */}
+          <div
+            className="absolute inset-0 bg-black bg-opacity-75 pointer-events-auto"
+            onClick={closeVideoPopup}
+          />
+          
+          {/* Popup Container */}
+          <div className="relative z-10 w-full max-w-4xl mx-4 bg-black rounded-lg overflow-hidden shadow-2xl pointer-events-auto">
+            {/* Close Button */}
+            <button
+              onClick={closeVideoPopup}
+              className="absolute top-4 right-4 z-20 bg-white bg-opacity-20 hover:bg-opacity-40 rounded-full p-2 transition-all duration-200"
+              aria-label="Close video"
+            >
+              <X size={24} className="text-white" />
+            </button>
+
+            {/* Video Player */}
+            <div className="relative w-full bg-black" style={{ paddingBottom: '56.25%' }}>
+              <iframe
+                src={videoUrl}
+                className="absolute inset-0 w-full h-full"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                title="Video player"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Anatomical Shape Container */}
+      <div className="fixed inset-0 pointer-events-none overflow-hidden">
+        {bubbles.map((bubble) => (
+          <svg
+            key={bubble.id}
+            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>
+
+      <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={[