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
| Capa | Elección |
|---|---|
| Framework | Next.js 15 + React 19 + TypeScript |
| Estilos | Tailwind CSS 3 |
| Animación | Framer Motion |
| WebGL | OGL (fondo grainient del hero) |
| i18n | Diccionario personalizado + contexto de idioma (ES/EN) |
| Deploy | Vercel |
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
Landing inicial
El primer commit entregó la landing completa de SKINĀIRE Dermatología: hero, acerca de, reseñas, galería antes/después, contacto, footer, navbar y soporte bilingüe. Colores de marca documentados en Plan.md (#A57865, #BBA892, #8B6459, #E4C7B8).
Fix de deploy en Vercel
Se agregaron configuraciones explícitas de npm y Next.js en vercel.json para que el demo se despliegue de forma confiable en Vercel.
Portal clínico
Se agregó el demo del portal con tablero de marketing, sistema de temas y datos demo semilla para citas e inventario.
Pulido de navegación del portal
Se mejoró el flujo de navegación del portal y la UX demo de login para un flujo de trabajo más realista del personal.
Pulido UX de landing y portal
Favicon con corazón, refinamientos del selector de temas y notas de desarrollo para mantener el demo.
Typewriter del hero y slider comparativo
Se agregaron HeroTypewriterTitle, componente de slider reveal antes/después y copy actualizado de CTA.
Correcciones de tarjetas y móvil
Se mejoró el layout de tarjetas antes/después, alineación de hints de login y correcciones responsivas en móvil en landing y portal.
Lightbox y actualización de copy
Se corrigió el tamaño del viewport del lightbox de historias en pantallas pequeñas y se refrescó el subtítulo del hero.
Construyendo Smartclic Demo