bender/8d54dbfb-cf74-4e97-8f5a-48a4ca6a74e5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3_1782165191955 into main

Browse Source 
Merge version_3_1782165191955 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-06-22 21:55:43 +00:00
parent 346fb05b24 61eb2ae58b
commit fdf8b33682
1 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/pages/HomePage/sections/Splash.tsx
View File

@@ -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>
);
}
}