ValzurPTY

01Resumen

ValzurPTY es el sitio web de una distribuidora panameña de accesorios para autos: iluminación LED, pantallas Android para vehículos, car audio y productos de detailing. El negocio es distribuidor oficial de las marcas Bewahrt, W&L Int. Corp, Genius Audio y Ebullient, y ofrece instalación técnica con cita previa y envíos a todo Panamá.

No es un e-commerce transaccional: no hay checkout ni pasarela de pago. Es un sitio "vitrina + cotizador" donde el visitante arma una lista de productos de interés y esa lista se convierte en un mensaje de WhatsApp prellenado, que es el canal real de venta del negocio.

02Objetivo

Dar presencia digital profesional al negocio.

03Arquitectura técnica

Construido con Next.js (App Router) sobre React y TypeScript, con Tailwind CSS v4 usado principalmente como sistema de variables de tema (colores, escalas) más que como utilidades de clase: el grueso del estilo vive en un archivo CSS por componente, con nomenclatura tipo BEM.

El sitio se compila como exportación 100% estática (output "export" de Next.js): no hay servidor Node en producción, y el optimizador de imágenes de Next queda desactivado, lo que explica por qué las imágenes se sirven desde Cloudinary en vez de por Next mismo.

Solo existen dos rutas reales: la portada, que es una landing de una sola página compuesta por secciones ancladas (inicio, servicios, marcas, ubicación, contacto), y el catálogo de productos, con su propia página de filtros.

El estado del "carrito" de cotización se maneja con un Context de React (sin librería externa de manejo de estado), y vive únicamente en memoria: no persiste en el navegador, así que se reinicia si el usuario recarga la página. Las animaciones de entrada de las secciones usan Framer Motion, y el carrusel de productos destacados usa Embla Carousel.

04Servicios externos

Cloudinary aloja y sirve todas las imágenes del sitio (productos, logo, fotos del local, logos de marca). Al estar la exportación de Next en modo estático, Next no puede optimizar imágenes en tiempo real, así que Cloudinary cubre ese rol como CDN de imágenes externo.

Cloudflare R2 se usa exclusivamente para alojar los catálogos en PDF de cada marca distribuida, separados de Cloudinary porque son archivos binarios grandes que no necesitan procesamiento de imagen, solo almacenamiento y entrega directa.

El sitio está preparado para desplegarse tanto en Vercel como en hosting compartido tipo Apache (tal como Hostinger), con las reglas de caché, compresión y reescritura correspondientes a cada uno.

05Funcionalidades

• Landing de una sola página con navegación por anclas: servicios, carrusel de productos destacados, marcas y catálogos descargables, información del negocio, ubicación con mapa y horario, y contacto.
• Catálogo completo filtrable por categoría (iluminación LED, pantallas Android, car audio, detailing).
• "Carrito" de cotización: el usuario agrega productos y un panel lateral genera un mensaje de WhatsApp con la lista completa, listo para enviar.
• Modal de detalle de producto, con opción de cotizar ese producto directamente por WhatsApp.
• Descarga de catálogos en PDF por marca.
• Sistema propio de detección de nuevas versiones: el sitio consulta periódicamente un archivo de versión generado en cada compilación y se recarga automáticamente si detecta un despliegue más reciente, para que los visitantes no queden con una copia cacheada desactualizada.

06SEO, rendimiento y accesibilidad

Metadata de SEO (título, descripción, Open Graph en español de Panamá) definida por página, y un sitemap XML que se regenera automáticamente en cada compilación a partir de las rutas reales del sitio, en vez de mantenerse a mano.

Las imágenes usan carga diferida salvo el logo del encabezado, marcado como prioritario para evitar saltos de layout en la carga inicial. Las fuentes se cargan de forma optimizada, y la estrategia de caché es agresiva para los archivos con hash (un año, inmutable) pero explícitamente desactivada para el HTML y el archivo de versión, para que el mecanismo de auto-actualización funcione.

El sitio usa atributos ARIA de forma consistente (etiquetas accesibles, roles explícitos en filtros y controles del carrusel, estados de expansión en el menú y los filtros), soporta cierre de modales con la tecla Escape, y hace que las imágenes clicables sean operables por teclado.

07Decisiones técnicas

La exportación estática permite desplegar el sitio en hosting compartido económico (como Hostinger) sin depender de un servidor Node en producción.

El mecanismo de auto-actualización es una solución hecha a medida a un problema real de los sitios estáticos con caché agresiva: sin un servidor que revalide contenido, el propio sitio necesita avisarle al navegador cuándo hay una versión nueva.

08Estado de testing y despliegue

El proyecto no cuenta con pruebas automatizadas ni con un pipeline de integración continua. El catálogo de productos se administra directamente en el código: no hay panel de administración, CMS ni base de datos detrás del sitio.