Registro de entrega
Fecha del registro: 1 de agosto de 2025. La tecnología y las capturas describen la versión entregada según quedó documentada en esta fecha. Cualquier observación de rendimiento corresponde al mismo registro puntual. El sitio enlazado puede incluir cambios posteriores realizados por el cliente u otros proveedores.
Mr Fade Barbershop necesitaba una presencia digital premium que reflejara la experiencia en tienda y pudiera servir tanto a clientes de habla inglesa como española. Lideré la construcción end-to-end de un sitio de marketing bilingüe enfocado en confianza, storytelling y reserva sin fricciones. La experiencia está impulsada por un héroe cinematográfico, CTAs orientados a audiencias específicas y una galería viva de cortes recientes que se actualiza directamente desde almacenamiento en la nube.
- Aumentar reservas haciendo que las opciones de contacto sean obvias y estén disponibles en todas partes
- Entregar una experiencia bilingüe que se sienta nativa en ambos idiomas
- Mostrar la amplitud de servicios y artesanía a través de una galería de alto impacto
- Preservar la personalidad de marca con una estética oscura audaz mientras se soporta el modo claro
Aspectos Destacados de la Experiencia
- Héroe inmersivo con movimiento parallax, burbujas flotantes de portfolio alimentadas por datos de galería en vivo y storytelling bilingüe que ajusta copy e interacciones instantáneamente.
- CTAs orientados a la conversión como un marcador telefónico/llamada/WhatsApp persistente, navegación inferior móvil y un modal de reserva táctil con gestos listos para haptic feedback, swipe-to-dismiss y soporte de teclado con accesibilidad-first.
- Catálogo de servicios con más de 25 ofrecimientos agrupados por categoría, badges de popularidad y lazy loading móvil usando Intersection Observer para que la página permanezca ágil en dispositivos más lentos.
- Galería Our Work que extrae las fotos de más alta resolución más recientes desde almacenamiento en la nube, las renderiza en un layout Masonry y entrega un lightbox animado con navegación por swipe y teclado.
- Contenido que genera confianza a través de biografías del equipo, testimonios y FAQs mostrados vía accordions, todo traducido a través de un único contexto de idioma.
- Next.js App Router + TypeScript para una arquitectura basada en componentes, layouts basados en rutas y metadata zero-runtime vía el directorio app/.
- Sistema de diseño Tailwind CSS con tokens personalizados, superficies glassmorphism y tipografía responsiva afinada para paletas oscuras y claras.
- LanguageContext + next-themes para gestionar toggles instantáneos EN/ES y cambio de tema mientras persisten preferencias de usuario en localStorage.
- Framer Motion impulsando parallax de scroll, revelados escalonados, transiciones de lightbox y micro-interacciones de modal con fallbacks de reduced-motion.
- API serverless de imágenes (app/api/images/route.ts) que conecta con un bucket de Backblaze B2 S3, filtra assets de medios y retorna URLs firmadas para burbujas del héroe y la galería.
- Biblioteca de componentes incluyendo un botón de CTA flotante, rail de navegación móvil, modal de reserva y sistema de accordion, todos escritos como client components para interactividad rica.
Accesibilidad y Rendimiento
- Honra preferencias del sistema para reduced motion, safe-area insets y temas oscuros/claros.
- Implementa landmarks semánticos, alt text descriptivo y controles de lightbox y modal amigables con teclado.
- Optimiza medios con Image de Next.js, assets de héroe priorizados y lazy loading de Masonry para mantener LCP bajo a pesar de visuales grandes.
- Añade feedback háptico móvil, gestos de momentum y animaciones conscientes del viewport que pausan en dispositivos con recursos limitados.
- Colaboré directamente con el dueño de la tienda para alinear voz de marca, curación de fotografía y precios de servicios.
- Desplegué en Vercel con preview branches para feedback rápido de stakeholders y QA.
- Documenté workflows de entrada de contenido y subida de imágenes para que el equipo pueda mantener la galería sin tocar código.
El lanzamiento le da a Mr Fade Barbershop un sitio de marketing de alta conversión que refleja su artesanía, optimiza consultas y habla a la audiencia de Miami en dos idiomas. Desde que está en vivo el equipo usa las herramientas de galería y reserva diariamente, y el sitio ahora ancla sus campañas sociales con un destino confiable que se ve y se siente como la tienda.
Ver Proyecto
