Immaculate Pro Painting
Landing page de conversión para empresa de pintura residencial y comercial premium. Greater Seattle Area, Washington, EE.UU.
Identidad visual luxury dark, galería interactiva before/after y múltiples puntos de contacto, diseñado para posicionar al cliente como la opción premium en el mercado de Seattle.
Demo en Vercel
🎨
Immaculate Pro Painting
Pintura premium · Seattle, WA
9
Secciones
6
Módulos JS
4
Before/After
0
Dependencias
Hero · Desktop
Hero section — luxury dark
Galería · Before/After
Before/After slider interactivo
Immaculate Pro Painting operaba con un sitio WordPress genérico que no transmitía el posicionamiento premium de la empresa. En un mercado de servicios de pintura altamente competitivo, el sitio anterior no diferenciaba al cliente de las decenas de contratistas que ofrecen el mismo servicio en Seattle.
La ausencia de una galería de trabajos efectiva era una pérdida directa de conversión. Los clientes potenciales no podían ver transformaciones reales antes de contactar, lo que alargaba el ciclo de decisión. Sin prueba visual del trabajo, la empresa dependía completamente del boca a boca.
El sitio tampoco estaba optimizado para la conversión móvil — la mayoría del tráfico en búsquedas locales de servicios del hogar. Los usuarios no encontraban una forma rápida de llamar, generando fricción en el momento de mayor intención de compra.
Lo que lo hace diferente
🔀
Before/After sliders sin librerías
Cuatro comparadores de imágenes con drag y touch. El handle dorado controla un clip-path dinámico que divide la imagen en tiempo real. Soporta mouse y táctil, con límites 2%–98% para que el handle nunca desaparezca. Sin canvas, sin jQuery, sin librerías.
🎯
Identidad luxury dark como estrategia
Paleta negro + dorado + tipografía serif (Cormorant Garamond) inspirada en marcas como Rolls-Royce. El mercado de pintura está dominado por sitios blancos genéricos — el diseño transmite premium antes de leer una sola palabra.
✨
Scroll reveal con stagger via IntersectionObserver
Las animaciones de entrada usan IntersectionObserver en lugar de scroll events: se dispara solo cuando el elemento cruza el viewport, sin polling continuo. Los elementos hermanos reciben delay incremental de 80ms. Fluido en mobile sin impacto en performance.
📞
Floating CTAs con animación pulse
Dos botones fijos — llamada y SMS — visibles en todo momento con animación CSS de pulso en el box-shadow. En mobile son el punto de contacto más inmediato, eliminando la necesidad de navegar al footer para obtener el número.
⚡
Archivo único, cero build tools
Todo el CSS y JavaScript están embebidos en el index.html. La única dependencia externa es Google Fonts por CDN. El sitio se despliega subiendo un solo archivo — sin npm, sin Webpack, sin versiones de Next.js que actualizar.
🔍
Galería filtrable por categoría
Cuatro categorías (interior, exterior, cabinets, commercial) con filtrado por data-category sin librerías. La navbar inicia transparente y transiciona a glass morphism (backdrop-filter: blur) cuando el usuario supera 40px de scroll.
Stack
Lenguajes
Tipografía
Deploy