Llantas, lubricantes, baterías y taller para flotas y el Estado
Grupo IAP
Una landing con una llanta en 3D que cuenta todo lo que hace la empresa y convierte visitas en cotizaciones.
Ver el sitio en vivo · grupoiap.com.pe503
Error 503
Servicio no disponible
- Antes:
- Un sitio caído, de plantilla y sin presencia en Google.
- Después:
- Una portada en 3D que muestra el negocio y lleva a cotizar.
El problema
El sitio anterior se había caído. Además, parecía una plantilla, no tenía fotos propias ni descripción para Google, mostraba un correo con una errata y se desbordaba en el celular.
En la práctica, no mostraba lo que hace la empresa ni a quién atiende.
La solución
Un sitio nuevo con una portada en 3D: una llanta generada en tiempo real baja al hacer scroll, deja su huella al tocar el suelo y la palabra «rueda.» gana peso en ese momento.
Cada línea del negocio tiene su sección (llantas, lubricantes, baterías y taller), junto con el servicio a flotas y al Estado, la historia de la empresa desde 2015 y el contacto con mapa y horario. La cotización se arma en el sitio y sale directo por WhatsApp o correo, y en el celular hay un botón fijo de WhatsApp.
El resultado
Grupo IAP tiene hoy un sitio propio que explica sus cuatro líneas de negocio y su servicio a flotas y al Estado, con cotización directa y una versión pensada para el celular.
En escritorio, Lighthouse marca 100 en rendimiento, accesibilidad, buenas prácticas y SEO.
En pantalla
Under the hoodDetalles técnicos
Stack
- React 19
- Three.js
- GSAP + ScrollTrigger
- Vite 8
- Prerender SSR propio
- Llanta procedural de unos 400.000 vértices generada en un Web Worker, con subida escalonada de texturas y shaders compilados de forma asíncrona para no trabar la carga.
- Rendimiento según el dispositivo: render solo con el hero a la vista, resolución adaptativa por tiempo de fotograma e imagen fija si no hay WebGL2.
- «Freno suave» en el scroll para que la escena nunca quede a medias, sin romper los elementos sticky.
- Sitio estático con prerender: Google y las vistas previas reciben el contenido sin ejecutar JavaScript.
- Proceso de diseño en fases documentadas: auditoría, tres conceptos evaluados, dirección artística e implementación. Las imágenes generadas con IA se identifican como ilustrativas.