Bob AI: Updated splash screen with realistic button and water splash

Merge version_2_1782164898164 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,65 @@ export default function SplashSection() {
     setIsSplashing(true);
     setTimeout(() => {
       setIsVisible(false);
-    }, 1200);
+    }, 1500);
   };
 
+  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 };
+  });
+
   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-500 ${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-1000 ease-in-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)'
+            }}
+          />
+
+          <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'}`}
+          >
+            <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" />
+          </button>
+
+          {/* Droplets */}
+          {isSplashing && droplets.map((d, 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)]"
+              style={{
+                backgroundImage: "radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(147,197,253,0.4))"
+              }}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
-}
+}