SMQS

SMQS necesitaba explicar una oferta que no cabe en una lista de productos. Insumos, implantes, capacitación y soporte en sala forman una misma promesa de servicio, pero debían entenderse en segundos y conservar el detalle técnico que exige una compra hospitalaria. La interfaz también tenía que transmitir precisión sin parecer la plantilla de una clínica.

La solución no fue mostrar más información, sino decidir qué debía entenderse primero. El hero fija la propuesta de valor; el catálogo introduce líneas y referencias de forma progresiva; y la identidad azul/cyan sostiene una estética médica y tecnológica sin imitar un hospital. En móvil, tablet y escritorio cada recorrido conserva una salida comercial visible hacia WhatsApp o el formulario de cotización.

1. 01

   El contenido comercial y las 11 líneas de producto viven en módulos tipados separados de la interfaz; actualizar una referencia no exige rearmar sus componentes visuales.

2. 02

   La página pública se divide en secciones reutilizables y usa un router propio para las pocas rutas necesarias; el panel privado se carga aparte para no entrar en el bundle inicial.

3. 03

   Los videos pasan por una interfaz de almacenamiento común: la presentación no depende de Supabase, del contenido publicado como seed ni del proveedor externo utilizado.

4. 04

   Mapas y reproductores externos permanecen bloqueados hasta recibir consentimiento; quien los rechaza conserva la dirección, el catálogo y enlaces alternativos sin perder información.

5. 05

   El responsive cambia la composición, no solo la escala: el hero prioriza mensaje y CTA en móvil, incorpora la pieza quirúrgica en tablet y reserva las llamadas técnicas flotantes para escritorio.

• React
• TypeScript
• Vite
• Tailwind CSS
• GSAP
• Motion
• Supabase

• Un hero que cambia de composición, no solo de tamaño

  La pieza quirúrgica, el titular y tres llamadas técnicas compiten por el mismo encuadre. Reducir todo habría vuelto ilegible el hero. La versión móvil prioriza texto y acciones; la pieza entra desde tablet con límites de altura ligados al viewport; y las llamadas aparecen únicamente cuando el escritorio ofrece espacio real. El mensaje conserva jerarquía sin deformar el producto.

• Convertir 42 referencias en un catálogo que todavía se puede recorrer

  Una cuadrícula completa habría convertido el sitio en una pared de fichas. Las 11 líneas se agrupan con búsqueda, filtros documentales y detalle progresivo dentro de cada tarjeta; las entradas animadas se procesan por filas para acompañar la lectura. El catálogo mantiene profundidad técnica sin bloquear la vista general.

• Contenido externo sin cargarlo a espaldas del visitante

  El mapa y los reproductores podían enviar datos al proveedor apenas se abría la página. Se sustituyeron por fachadas locales y solo se montan después de una decisión explícita. Los videos, además, se administran desde un panel conectado a una capa de almacenamiento intercambiable. SMQS puede actualizar esa sección sin tocar sus componentes y el visitante puede rechazar terceros sin perder el contenido esencial.

Cliente

SMQS Colombia S.A.S.

Rol

Diseño UI/UX y desarrollo frontend

Estado

En producción

Dominio

smqssas.com