Bob AI: Update splash screen with clear button and realistic waves

src/pages/HomePage/sections/Splash.tsx

@@ -22,22 +22,17 @@ export default function SplashSection() {
     setIsSplashing(true);
     setTimeout(() => {
       setIsVisible(false);
-    }, 1500);
+    }, 2000);
   };
 
-  const droplets = Array.from({ length: 40 }).map((_, i) => {
-    const angle = (i / 40) * Math.PI * 2;
-    const distance = 200 + Math.random() * 300;
-    const tx = Math.cos(angle) * distance;
-    const ty = Math.sin(angle) * distance;
-    const scale = 0.5 + Math.random() * 1.5;
-    return { tx, ty, scale, delay: Math.random() * 0.15 };
+  const waves = Array.from({ length: 3 }).map((_, i) => {
+    return { scale: 2 + i * 2, delay: i * 0.2 };
   });
 
   return (
     <div
       data-webild-section="splash"
-      className={`fixed inset-0 z-[100] flex flex-col items-center justify-center bg-background overflow-hidden transition-opacity duration-500 ${isSplashing ? 'opacity-0 delay-1000' : 'opacity-100'}`}
+      className={`fixed inset-0 z-[100] flex flex-col items-center justify-center bg-background overflow-hidden transition-opacity duration-700 ${isSplashing ? 'opacity-0 delay-1000' : 'opacity-100'}`}
     >
       <div className="relative z-30 text-center px-4 w-full max-w-5xl mx-auto">
         <h1 className={`relative z-10 text-4xl md:text-6xl font-bold text-foreground mb-12 drop-shadow-sm transition-all duration-500 ${isSplashing ? 'opacity-0 -translate-y-8' : 'opacity-100 translate-y-0'}`}>
@@ -47,35 +42,42 @@ export default function SplashSection() {
         <div className="relative inline-block z-20">
           {/* Expanding Water Splash Background */}
           <div
-            className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 rounded-full transition-all duration-1000 ease-in-out pointer-events-none ${isSplashing ? 'w-[300vw] h-[300vw] opacity-100' : 'w-0 h-0 opacity-0'}`}
+            className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 rounded-full transition-all duration-1500 ease-out pointer-events-none ${isSplashing ? 'w-[300vw] h-[300vw] opacity-100' : 'w-0 h-0 opacity-0'}`}
             style={{
               backgroundImage: "url('https://images.unsplash.com/photo-1527066236129-8bf29eb3c05a?auto=format&fit=crop&q=80')",
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               backgroundBlendMode: 'overlay',
-              backgroundColor: 'rgba(37, 99, 235, 0.9)',
-              boxShadow: 'inset 0 0 100px rgba(255,255,255,0.6), 0 0 50px rgba(37,99,235,0.8)'
+              backgroundColor: 'rgba(37, 99, 235, 0.4)',
+              boxShadow: 'inset 0 0 100px rgba(255,255,255,0.5)'
             }}
           />
 
           <button
             onClick={handleEnter}
-            className={`relative z-10 group overflow-hidden rounded-full px-10 py-5 text-xl md:text-2xl font-bold text-white shadow-[0_15px_30px_rgba(21,71,156,0.4),inset_0_-4px_0_rgba(0,0,0,0.2),inset_0_2px_0_rgba(255,255,255,0.6)] bg-gradient-to-b from-blue-400 to-blue-700 border border-blue-800 transition-all duration-300 ${isSplashing ? 'opacity-0 scale-150' : 'opacity-100 scale-100 hover:scale-105 active:scale-95'}`}
+            className={`relative z-10 group overflow-hidden rounded-full px-10 py-5 text-xl md:text-2xl font-bold text-foreground backdrop-blur-md bg-white/40 border border-white/60 shadow-[0_8px_32px_rgba(0,0,0,0.05)] transition-all duration-300 ${isSplashing ? 'opacity-0 scale-150' : 'opacity-100 scale-100 hover:scale-105 hover:bg-white/50 active:scale-95'}`}
           >
-            <span className="relative z-10 drop-shadow-lg">Enter the New Era of Plumbing</span>
-            <div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white/30 to-transparent rounded-t-full pointer-events-none" />
+            <span className="relative z-10">Enter the New Era of Plumbing</span>
+            <div className="absolute inset-0 bg-gradient-to-tr from-white/20 to-transparent pointer-events-none rounded-full" />
           </button>
 
-          {/* Droplets */}
-          {isSplashing && droplets.map((d, i) => (
+          {/* Photorealistic Waves */}
+          {isSplashing && waves.map((w, i) => (
             <motion.div
               key={i}
-              initial={{ x: 0, y: 0, scale: 0, opacity: 1 }}
-              animate={{ x: d.tx, y: d.ty, scale: d.scale, opacity: 0 }}
-              transition={{ duration: 0.8, delay: d.delay, ease: "easeOut" }}
-              className="absolute top-1/2 left-1/2 w-6 h-6 -ml-3 -mt-3 bg-blue-200 rounded-full pointer-events-none z-20 shadow-[0_0_15px_rgba(147,197,253,0.9)]"
+              initial={{ scale: 0.2, opacity: 0.9 }}
+              animate={{ scale: w.scale * 4, opacity: 0 }}
+              transition={{ duration: 2.5, delay: w.delay, ease: "easeOut" }}
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none z-20"
               style={{
-                backgroundImage: "radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(147,197,253,0.4))"
+                width: '500px',
+                height: '500px',
+                backgroundImage: "url('https://images.unsplash.com/photo-1505424297051-c3ad50b055ae?auto=format&fit=crop&q=80')",
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                mixBlendMode: 'overlay',
+                WebkitMaskImage: 'radial-gradient(circle, transparent 35%, black 50%, transparent 65%)',
+                maskImage: 'radial-gradient(circle, transparent 35%, black 50%, transparent 65%)',
               }}
             />
           ))}