HealthCare Plus

Sobre Este Template

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.

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.

Características

• 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
• 4 colecciones de contenido tipadas con Zod — servicios (6), blog (5), equipo (3), testimonios (3), todo en Markdown
• Blog de salud con un enum Zod de cuatro categorías (Health Tips, Medical News, Patient Stories, Wellness), autor, fecha e imagen destacada
• Sección Patient Portal — 6 cards: reserva de cita, historial médico, recetas, pago de facturas online, mensajería segura con tu médico y visitas virtuales
• Bloque de señales de confianza — 6 cards de premios y acreditaciones más 4 estadísticas de credibilidad animadas
• Testimonios renderizados desde el frontmatter con valoración de 1 a 5 estrellas
• Página de contacto con formulario de cita que incluye un select de motivo de consulta — handler de envío demo listo para cambiar por tu endpoint
• Reveals con IntersectionObserver que se re-disparan en ambas direcciones de scroll vía data-reveal y data-reveal-stagger
• Smooth scroll con Lenis (duration 1.0, wheelMultiplier 1.8) sincronizado al ticker de GSAP con lagSmoothing desactivado
• Astro View Transitions con morph de elemento compartido en título y categoría del post, más teardown completo de GSAP/Lenis entre páginas
• Todas las imágenes optimizadas a WebP vía getImage(), nav que reacciona al scroll con menú hamburguesa accesible, soporte de prefers-reduced-motion y TypeScript strict

Despliegue