Home Trades Online Landing
Landing Page y Sitio de Marketing
California, Estados Unidos
- Rol
- Frontend · Landing de producto
- Tipo de trabajo
- Trabajo para cliente
- Industria
- Construcción y oficios
Resumen
SalesForPro es el sitio web de marketing público de Home Trades Online, diseñado para convertir contratistas que visitan en usuarios a través de una experiencia de demo interactiva del producto.
El sitio incluye una animación de intro cinematográfica, un hero interactivo multi-paso que permite a los visitantes probar el generador de propuestas con IA antes de registrarse, secciones con animación por scroll y una experiencia totalmente bilingüe (inglés/español). Construido como un sitio de marketing renderizado en servidor con animaciones de cliente, modo oscuro y diseño responsive mobile-first.
El desafío
Las landing pages SaaS para herramientas de contratistas suelen ser estáticas y genéricas, lo que dificulta comunicar rápidamente el valor del producto. Los contratistas son escépticos y necesitan ver la herramienta en acción antes de comprometerse.
SalesForPro resuelve esto incrustando un demo del producto en vivo dentro del hero — los visitantes pueden seleccionar su rubro, ingresar su ubicación y generar una propuesta real con IA sin registrarse, transformando la propia landing en una herramienta de conversión.
Enlaces
Repositorio de GitHub
Demo en Vivo
Privado — proyecto de cliente
Construido con
Django Templates
Tailwind CSS
GSAP
ScrollTrigger
Alpine.js
CSS
SVG (inline, animated)
Django i18n
Entregables clave
- Diseño y desarrollo de un intro cinematográfico con animaciones de revelación circular en capas usando CSS @property para transiciones suaves de radio, creando una primera impresión de marca.
- Hero interactivo multi-paso con borde animado en gradiente (rotación de conic-gradient), efectos shimmer en las transiciones, fondos con patrón de puntos y barra de progreso con pulso luminoso.
- Animaciones de scroll con GSAP: revelado de subtítulos palabra por palabra, entradas escalonadas de cards izquierda/derecha con ScrollTrigger y conectores SVG con dibujo de path y dot viajero entre los pasos de «Cómo Funciona».
- Modo oscuro completo con paleta de colores consistente en todas las secciones (hero, cómo funciona, testimonios, CTA, footer), incluyendo adaptación de los colores de los conectores SVG y sombras de cards.
- Diseño totalmente responsive y mobile-first que escala impecable desde teléfonos de 320px hasta desktops ultra-wide: conectores verticales en pantallas chicas, divisores SVG en forma de ola entre secciones, navbar sticky con sombra al hacer scroll y áreas táctiles de 48px+ en cada elemento interactivo.
- Integración de Django i18n con tags {% trans %} en todo el contenido de marketing para un cambio sin fricciones entre inglés y español mediante ruteo por prefijo de URL (/ar/).
- Buenas prácticas de accesibilidad: media query prefers-reduced-motion deshabilitando animaciones, etiquetas ARIA, HTML semántico, focus rings visibles y regiones aria-live para estados de carga.
- Efecto shimmer en CTA con barrido de gradiente solo con CSS, divisores en forma de ola con paths SVG inline y estados de carga con skeletons animados en el preview de generación de propuestas.