Solace

Sobre Este Template

Solace es una plantilla editorial y cálida para clínicas concierge, consultas médicas privadas y grupos de wellness. Doce páginas cubren home, un índice de servicios con páginas de detalle que incluyen pasos de proceso numerados y médico asignado, un directorio de equipo con perfiles completos, historias de pacientes, un blog de salud con autor vinculado y tiempo de lectura, un FAQ con pestañas por categoría, nosotros, contacto y 404. El hero es lo que destaca: la foto de consulta arranca a sangre completa, luego se recorta hacia dentro hasta inset(40%) y se disuelve mientras emerge un círculo verde salvia que escala de 0.6 a 3 con scrub y late en un keyframe de respiración de cuatro segundos. Incluye cuatro colecciones de contenido, tres skins de color, contadores de confianza animados y 30 fotografías.

Firma

El hero abre con una fotografía de consulta a sangre completa. Al hacer scroll, un timeline con scrub 1.5 la recorta hacia dentro hasta inset(40%) mientras la imagen contraescala a 1.3 y se desvanece — y en el espacio que deja emerge un círculo de radial-gradient verde salvia que escala de 0.6 a 3. Ese círculo corre a la vez un keyframe CSS de respiración de cuatro segundos, así que se expande con el scroll mientras inhala y exhala por su cuenta. El titular — que entró palabra por palabra — sube un 25% y se desvanece por encima, con el subtexto y el CTA escalonados detrás.

Características

• 12 páginas — Inicio, Servicios, Detalle de servicio, Equipo, Perfil de médico, Nosotros, Historias de pacientes, Blog, Post, FAQ, Contacto, 404
• Hero The Breath — la foto se recorta a inset(40%) y se disuelve mientras un círculo radial salvia escala de 0.6 a 3 con scrub
• Keyframe CSS de respiración de cuatro segundos en el círculo del hero, corriendo bajo el timeline de GSAP ligado al scroll
• Entrada del titular palabra por palabra (stagger 0.06s, power4.out) con subtexto de blur a nítido y aparición del CTA
• Contadores de confianza animados — 12.000+ pacientes, 15+ años, 98% de satisfacción, 6 médicos certificados
• Marquee de especialidades reactivo a la velocidad — ocho disciplinas cuyo timeScale acelera hasta 3x según el scroll
• Grilla bento de servicios con stagger de blur a nítido y parallax de imagen independiente en cada tile
• FAQ con 4 pestañas de categoría (General, Insurance, Procedures, Recovery) y 11 items de acordeón con ARIA basado en useId
• 4 colecciones de contenido — 6 servicios, 6 médicos, 4 posts y 8 testimonios, todo en JSON validado con Zod
• Perfiles de médicos con credenciales, formación, idiomas, indicador de si aceptan pacientes y retrato sticky
• Contenido relacional — los testimonios filtran por doctorSlug, los servicios enlazan a su médico y servicios relacionados, y los posts resuelven su autor
• Páginas de detalle de servicio con pasos de proceso numerados, listas de features y cross-links entre tratamientos relacionados
• Página de contacto con horarios, lista de seguros aceptados y formulario de consulta con selector de servicio
• 3 skins de color vía data-skin — Linen & Sage (default), Midnight Calm oscuro y Sand & Stone neutro cálido
• GSAP y ScrollTrigger se cargan con dynamic import dentro de los 15 componentes animados, con el ciclo de vida de Lenis + ScrollTrigger centralizado en el layout
• 30 fotografías incluidas, smooth scroll con Lenis, Astro View Transitions y fallbacks de prefers-reduced-motion en cada animación

Despliegue