HealthCare Plus

HealthCare Plus es una plantilla web orientada a conversión para clínicas, consultorios privados y grupos médicos multiespecialidad. Seis rutas cubren inicio, quiénes somos, servicios, un blog de salud con páginas de artículo y contacto. La home apila ocho secciones: hero dividido con acciones rápidas por tipo de usuario, directorio Find a Doctor con búsqueda, servicios, premios y acreditaciones, portal del paciente, equipo, testimonios y CTA final. Los médicos se filtran en vivo por nombre o especialidad mediante un input de búsqueda y tabs de especialidad, con estado vacío y reset. Cuatro colecciones de contenido tipadas con Zod, servicios, blog, equipo, testimonios, mantienen todos los textos en Markdown. GSAP ScrollTrigger impulsa el parallax scrub del hero, las cards hacen tilt 3D en hover y los contadores se animan. Teal #0891b2 con naranja cálido #f97316 sobre blanco roto, smooth scroll con Lenis y Astro View Transitions en todo el sitio.

Qué incluye

• 6 rutas, Inicio, Quiénes Somos, Servicios, Índice de Blog, Artículo de Blog, Contacto
• Directorio Find a Doctor, búsqueda en vivo por nombre o especialidad más tabs de filtro por especialidad, estado vacío y botón de reset
• Parallax scrub del hero con GSAP ScrollTrigger, titular, foto y stat cards flotantes se mueven en tres profundidades distintas (solo desktop, >768px)
• Contadores animados, 5.000 pacientes, 98% de satisfacción, 15 años, con conteo de 2s vía requestAnimationFrame
• Botón sticky Book Appointment que aparece después de 600px de scroll
• Tilt 3D en hover sobre cards de servicios, médicos, equipo y blog, perspective(800px), rotación ±12° con scale3d, listeners limpiados con AbortController

La firma

Al hacer scroll en la home, el hero se descompone en capas. Un único ScrollTrigger con scrub desplaza el bloque del titular 120px hacia abajo mientras lo baja a 0.85 de opacidad, lleva la foto 180px y la escala a 0.95, y hace flotar las tres stat cards hacia arriba a ritmos crecientes (-100px, -200px, -300px) para lograr profundidad de parallax real. A la vez los números cuentan hasta 5.000 pacientes, 98% de satisfacción y 15 años, y un botón sticky Book Appointment entra al pasar los 600px. El parallax está limitado a desktop a propósito, así que en móvil todo se mantiene rápido y estable.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/medical-template-premium/. 6 páginas, hecha con Astro 5, TypeScript, Scoped CSS, GSAP, Lenis.