carlos/almeira-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(splash): mostrar exclusivamente la imagen vertical completa sin textos superpuestos duplicados

Browse Source
This commit is contained in:
AI Bot 2026-08-26 08:08:51 -05:00
parent 66cdabb7f6
commit 9b71d2d0f1
1 changed files with 12 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
dripzone-app/src/components/mobile/MobileSplashScreen.tsx
View File

@ -15,7 +15,7 @@ export const MobileSplashScreen: React.FC = () => {
return; return;
} }
// Duración de 4.2 segundos para apreciar la marca y el eslogan // Duración de 4.2 segundos para apreciar la imagen completa y eslogan
const fadeTimer = setTimeout(() => { const fadeTimer = setTimeout(() => {
setIsFading(true); setIsFading(true);
}, 3800); }, 3800);
@ -23,7 +23,7 @@ export const MobileSplashScreen: React.FC = () => {
const removeTimer = setTimeout(() => { const removeTimer = setTimeout(() => {
setIsVisible(false); setIsVisible(false);
sessionStorage.setItem('dripzone_splash_shown', 'true'); sessionStorage.setItem('dripzone_splash_shown', 'true');
}, 4500); }, 4600);
return () => { return () => {
clearTimeout(fadeTimer); clearTimeout(fadeTimer);
@ -35,53 +35,20 @@ export const MobileSplashScreen: React.FC = () => {
return ( return (
<div <div
className={`fixed inset-0 z-[9999] bg-[#0a0a0a] flex flex-col items-center justify-between p-6 sm:p-8 transition-opacity duration-700 pointer-events-none select-none ${ className={`fixed inset-0 z-[9999] bg-[#070709] flex items-center justify-center transition-opacity duration-800 pointer-events-none select-none ${
isFading ? 'opacity-0' : 'opacity-100' isFading ? 'opacity-0' : 'opacity-100'
}`} }`}
> >
{/* Top subtle badge */} {/* Full-screen clean master splash image (contains 3D art, logo, slogan and aura) */}
<div className="pt-8 opacity-60"> <div className="relative w-full h-full max-w-md max-h-screen flex items-center justify-center p-0">
<span className="text-[10px] tracking-[0.3em] uppercase text-purple-400 font-bold">
Official App & Store
</span>
</div>
{/* Center Hero Logo & Tagline */}
<div className="flex flex-col items-center text-center space-y-4 animate-in zoom-in-95 duration-700">
{/* Glowing Sneaker Icon */}
<div className="relative w-48 h-48 sm:w-56 sm:h-56">
<div className="absolute inset-0 bg-purple-600/25 rounded-full blur-2xl animate-pulse" />
<Image <Image
src="/splash.png" src="/splash.png"
alt="DripZone" alt="DripZone"
fill fill
priority priority
className="object-contain drop-shadow-[0_0_35px_rgba(217,70,239,0.45)]" className="object-contain sm:object-cover"
/> />
</div> </div>
{/* Brand Text */}
<div className="space-y-1">
<h1 className="text-3xl sm:text-4xl font-black tracking-wider text-white">
<span className="bg-gradient-to-r from-purple-400 via-fuchsia-400 to-pink-500 bg-clip-text text-transparent">
DRIPZONE
</span>
</h1>
<p className="text-xs sm:text-sm font-medium text-neutral-300 tracking-wide">
Ropa urbana y zapatillas deportivas
</p>
</div>
</div>
{/* Bottom Loading Indicator */}
<div className="w-full max-w-xs space-y-3 pb-8 text-center">
<div className="w-full h-1 bg-neutral-900 rounded-full overflow-hidden border border-neutral-800">
<div className="h-full bg-gradient-to-r from-purple-600 via-fuchsia-500 to-pink-500 rounded-full animate-[shimmer_2s_infinite] w-full" />
</div>
<p className="text-[10px] text-neutral-500 tracking-widest uppercase font-mono">
Cali, Colombia • Envíos 24H
</p>
</div>
</div> </div>
); );
}; };