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

Merge version_3_1782165191955 into main

src/pages/HomePage/sections/Splash.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import Button from '@/components/ui/Button';
+import { motion } from 'motion/react';
 
 export default function SplashSection() {
   const [isVisible, setIsVisible] = useState(true);
@@ -22,30 +22,67 @@ export default function SplashSection() {
     setIsSplashing(true);
     setTimeout(() => {
       setIsVisible(false);
-    }, 1200);
+    }, 2000);
   };
 
+  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-700' : '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-10 text-center px-4 transition-all duration-300 ${isSplashing ? 'opacity-0 scale-90' : 'opacity-100 scale-100'}`}>
-        <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-8">
+      <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'}`}>
           AS Plumbing, Electrical & Maintenance
         </h1>
-        <Button
-          text="Enter the New Era of Plumbing"
-          onClick={handleEnter}
-          variant="primary"
-          className="text-lg md:text-xl px-8 py-4"
-        />
-      </div>
-      <div
-        className={`absolute inset-0 bg-blue-500 z-20 flex items-center justify-center transition-all duration-1000 ease-in-out ${isSplashing ? 'translate-y-[-20%] rounded-t-none' : 'translate-y-full rounded-t-[50%]'}`}
-      >
-        <div className="w-full h-full opacity-30 bg-[url('https://images.unsplash.com/photo-1527066236129-8bf29eb3c05a?auto=format&fit=crop&q=80')] bg-cover bg-center mix-blend-overlay" />
+        
+        <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-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.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-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">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>
+
+          {/* Photorealistic Waves */}
+          {isSplashing && waves.map((w, i) => (
+            <motion.div
+              key={i}
+              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={{
+                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%)',
+              }}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
-}
+}