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

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

@ -15,7 +15,7 @@ export const MobileSplashScreen: React.FC = () => {
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(() => {
setIsFading(true);
}, 3800);
@ -23,7 +23,7 @@ export const MobileSplashScreen: React.FC = () => {
const removeTimer = setTimeout(() => {
setIsVisible(false);
sessionStorage.setItem('dripzone_splash_shown', 'true');
}, 4500);
}, 4600);
return () => {
clearTimeout(fadeTimer);
@ -35,52 +35,19 @@ export const MobileSplashScreen: React.FC = () => {
return (
<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'
}`}
>
{/* Top subtle badge */}
<div className="pt-8 opacity-60">
<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
src="/splash.png"
alt="DripZone"
fill
priority
className="object-contain drop-shadow-[0_0_35px_rgba(217,70,239,0.45)]"
/>
</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>
{/* Full-screen clean master splash image (contains 3D art, logo, slogan and aura) */}
<div className="relative w-full h-full max-w-md max-h-screen flex items-center justify-center p-0">
<Image
src="/splash.png"
alt="DripZone"
fill
priority
className="object-contain sm:object-cover"
/>
</div>
</div>
);