03/05Proyecto de cliente
Todos los casos

Uvita Body Shop

Sitio para un taller de enderezado y pintura en Uvita, pensado para cotizar por WhatsApp

Sector
Enderezado y pintura automotriz
Ubicación
Uvita, Costa Rica
Año
2026
Rol
Diseño · Desarrollo · SEO · Video
Página de inicio de Uvita Body Shop en pantalla de escritorio: un carro rojo brillante en 3D detrás del titular «Enderezado y pintura. Acabado perfecto.», con botones de WhatsApp y teléfono.
01Contexto

Punto de partida

Uvita Body Shop repara y pinta vehículos en Uvita, Puntarenas. Endereza chasis, pinta carros completos, arregla abolladuras e instala accesorios, y su sitio tiene una página para cada zona que atiende: Uvita, Dominical, Ojochal y Bahía Ballena.

Diseñamos y construimos el sitio, sus datos estructurados y un reel de marca de 26 segundos. Los botones de WhatsApp y teléfono están en la primera pantalla, y el formulario de cotización está preparado para enviar un correo al taller antes de abrir WhatsApp con el mensaje escrito. El español es el idioma por defecto; los servicios, las guías y la página de contacto también están en inglés.

026 funciones

Lo que construimos

01/06

Español primero, inglés en /en

El español es el idioma por defecto y el inglés vive en /en, adonde llegan los navegadores configurados en inglés. Servicios, guías, preguntas frecuentes, «sobre nosotros», contacto y privacidad están en inglés. Cada página tiene una dirección por idioma y ambas se enlazan con hreflang.

Ver fig. 07
02/06

Cotizaciones que terminan en WhatsApp

El formulario está preparado para enviar cada solicitud por correo al taller y luego abre WhatsApp con el mensaje ya escrito. Un botón flotante de WhatsApp queda en todas las páginas. El inicio añade un aviso de «abierto ahora» según el horario de Costa Rica.

Ver fig. 04
03/06

Spam filtrado sin CAPTCHA

Revisiones discretas en el servidor frenan a los bots simples, sin acertijos para el cliente. Las etiquetas de campaña del enlace se guardan 90 días y viajan con la solicitud.

Ver fig. 05
04/06

Un carro 3D en tiempo real

El inicio abre con un carro 3D en tiempo real: la luz sigue al cursor y la carrocería se inclina con él. El modelo comprimido pesa menos de 70 KB y se carga cuando hace falta.

Ver fig. 02
05/06

Reel de marca de 26 segundos

Hicimos un reel de marca sin audio en cuatro versiones: español e inglés, horizontal y vertical. El inicio muestra la que corresponde al idioma y a la pantalla del visitante, y solo cuando este pulsa reproducir.

Ver fig. 03
06/06

Páginas hechas para ser encontradas

Cinco páginas de servicios, cuatro de zonas y cuatro guías llevan datos estructurados, que le dicen a Google qué es cada página. También publicamos archivos de texto y una descripción de API para asistentes de IA, y el robots.txt deja pasar a sus rastreadores.

03Solo hechos

Resultados

español por defecto; inglés en servicios, guías, preguntas y contacto
ES + EN
páginas de servicios y de zonas, con preguntas marcadas para Google
5 + 4
el formulario pasa a un chat con el mensaje ya escrito
WhatsApp
CAPTCHAs: el servidor filtra el spam, no el cliente
0
de reel de marca, en español e inglés, horizontal y vertical
26 s
una sola imagen, redimensionada y recodificada: de casi 1 MB a 34 KB
-96%
048 imágenes

Galería

Cuatro tarjetas del proceso en la página de inicio: 01 Evaluar, 02 Reparar, 03 Pintar y 04 Entregar, cada una con una breve explicación.
01El proceso del taller en cuatro pasos: evaluar, reparar, pintar y entregar.
Página de inicio en un teléfono: el titular sobre un carro rojo en 3D, una descripción breve y los botones de WhatsApp y teléfono lado a lado.
02En el teléfono, el inicio conserva el carro en 3D y los dos botones de contacto.
Fotograma del reel de marca en español: la frase «No reparamos carros. Los restauramos.» en letras blancas y rojas sobre un fondo oscuro.
03Un fotograma del reel de marca de 26 segundos, versión en español: tipografía grande sobre fondo oscuro.
Sección de contacto del inicio: un titular, botones de WhatsApp y teléfono, una etiqueta verde de «abierto ahora» con ubicación y horario, y el formulario de cotización vacío.
04El formulario de cotización junto a los botones de WhatsApp y teléfono. La etiqueta verde indica si el taller está abierto en ese momento.
Sección de contacto en un teléfono: un titular, un botón de WhatsApp de ancho completo, un botón de teléfono, una etiqueta verde de «abierto ahora» con el horario y el primer campo del formulario.
05En el teléfono, el botón de WhatsApp ocupa todo el ancho y el botón flotante de WhatsApp queda en la esquina.
Fotograma del reel de marca en inglés: la frase «A finish that lasts.» en letras blancas y rojas sobre un fondo oscuro.
06La versión en inglés del reel. Cada idioma tiene su propio archivo, en formato horizontal y vertical.
Página de contacto en inglés: el titular «Let’s talk about your car», el formulario de cotización y, en una columna lateral, el contacto por WhatsApp, el horario y la ubicación.
07La página de contacto en inglés usa el mismo formulario y los mismos datos que la española.
Página de garantía escrita en español: el titular «Si no queda perfecto, lo volvemos a hacer», botones de WhatsApp y teléfono, y dos listas tituladas «Qué cubre» y «Límites».
08La página de garantía explica en frases sencillas qué cubre y qué no cubre.
058 herramientas

Tecnología

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Three.js
  • GSAP
  • next-intl
  • Vercel
06Siga explorando

Qué sigue