Construyendo SKINĀIRE Dermatología

SKINĀIRE es un sitio demo para una clínica dermatológica — una landing de marketing más un prototipo de portal clínico para gestión de citas, historias de pacientes y galerías de tratamientos antes/después. Se construyó para skin-aire-dermatologia.vercel.app con una paleta de marca cálida y clínica (rosy brown, tan, peach puff).

Qué hace

Landing pública

• Hero — Fondo WebGL Grainient, titular con efecto typewriter y copy de posicionamiento de la clínica en español/inglés.
• Acerca de — Layout tipo masonry con fotografía del doctor e historia de marca.
• Antes / después — Tarjetas con slider comparativo y modal lightbox para resultados de tratamiento (7 casos clínicos).
• Reseñas — Carrusel de opiniones de pacientes desde datos JSON estructurados.
• Ubicación y contacto — Dirección de la clínica, UI de calendario de citas y botón flotante de WhatsApp.
• CTA — Secciones orientadas a conversión con animaciones de Framer Motion.

Portal clínico (demo)

Un portal separado con estilo autenticado que incluye:

• Tablero de marketing para personal de la clínica
• Selector de temas (múltiples paletas de marca)
• UX demo de login con hints alineados
• Datos semilla de inventario y citas
• Utilidades de exportación para comparaciones de imágenes

Stack técnico

Las secciones bajo el fold usan next/dynamic con imports seguros de chunks para reducir el bundle JS inicial manteniendo SSR para SEO.

Proceso de desarrollo

SKINĀIRE es una app Next.js 15 con App Router, copy bilingüe vía contexto de diccionario personalizado, y deploy en Vercel. Colores de marca documentados en Plan.md (#A57865, #BBA892, #8B6459, #E4C7B8).

Landing de marketing (primer commit)

• Hero, acerca de, reseñas, galería antes/después, contacto, footer y navbar en un solo release.
• Cambio de idioma ES/EN con proveedor de contexto ligero (sin framework i18n pesado).
• Framer Motion para transiciones de sección y OGL para el fondo grainient del hero.
• Tipografía y tokens de color documentados en Plan.md para branding consistente de la clínica.

Confiabilidad de deploy en Vercel

• Configuración explícita en vercel.json para instalación npm y detección del framework Next.js.
• Seguimiento de la documentación de deploy de Next.js en Vercel para corregir builds de preview fallidos.
• URL de producción sirviendo páginas SSR y assets estáticos correctamente.

Demo del portal clínico

• Portal para personal con dashboard, sistema de temas y datos demo semilla de citas e inventario.
• Mejora del flujo de navegación del portal y UX de login demo para leer como un flujo clínico real.
• next/dynamic para secciones bajo el fold y reducir el bundle inicial.

Pasadas de UX en landing y portal

• Favicon con corazón, refinamientos del selector de temas y notas para mantenedores en el repo.
• HeroTypewriterTitle y slider comparativo antes/después; copy de CTA del hero actualizado.
• Layout de tarjetas antes/después, alineación de hints de login y breakpoints móviles en landing + portal.
• Tamaño del viewport del lightbox de historias corregido en pantallas pequeñas.