Aevum

Sobre Este Template

Aevum es una plantilla de clínica de salud de precisión y longevidad construida alrededor de la visualización de datos en vivo. Siete páginas cubren la historia de la clínica, un recorrido de evaluación en cuatro pasos, la ciencia detrás de seis sistemas de biomarcadores, tres tiers de membresía con toggle mensual/anual, el equipo clínico y un flujo de reserva completo. El hero combina un titular en Instrument Serif revelado palabra por palabra con SplitText y The Vitals: tres anillos concéntricos de biomarcadores que se dibujan solos vía stroke-dashoffset, un score compuesto de salud y un count-up de edad biológica sobre un retrato con parallax. La página de ciencia renderiza una gráfica longitudinal hecha con d3-scale y d3-shape — el trazo se dibuja con el scroll sobre bandas de zona verde, ámbar y coral, con un marcador coral en el punto de hoy — y un body map SVG interactivo revela seis sitios de medición al hover, tap o foco de teclado. Blanco hueso, tinta forest, acento coral y ni una sola grilla.

Firma

The Vitals resume toda la tesis en un solo widget: tres anillos concéntricos de biomarcadores se dibujan desde cero con stroke-dashoffset en cuanto entran en viewport, cada uno con el color de su zona de salud, mientras un score compuesto cuenta hacia arriba en el centro y la edad biológica se detiene en 38.6 frente a los 47 cronológicos. En la página de ciencia la misma idea escala a una gráfica longitudinal completa — d3-scale y d3-shape hacen las matemáticas, GSAP dibuja el trazo sobre las bandas de zona y un marcador coral fija el punto de hoy. Con reduced motion cada visualización aparece ya dibujada en su estado final.

Características

• 7 páginas — Inicio, Cómo Funciona, Ciencia, Membresía, Equipo, Reservar, 404
• Widget The Vitals en el hero — tres anillos concéntricos de biomarcadores se dibujan vía stroke-dashoffset con un score compuesto contando en el centro
• Lectura de edad biológica — 47 cronológicos frente a 38.6 biológicos, animada con count-up decimal
• Revelado del titular palabra por palabra con SplitText, que espera a document.fonts.ready antes de dividir
• Gráfica longitudinal de salud con d3-scale + d3-shape (line, area, curveMonotoneX) cuyo trazo se dibuja al entrar en viewport
• Espectro de zonas con significado detrás de la gráfica — bandas optimal / watch / act, nunca color decorativo
• Body map SVG interactivo — seis hotspots de biomarcadores que laten y se expanden al hover, tap o foco de teclado
• Flujo de reserva completo — sede, tipo de scan, fecha del calendario y franja horaria → resumen en vivo → formulario validado → confirmación (solo estado de UI, sin backend)
• Pricing de membresía — 3 tiers con toggle mensual/anual que aplica un 15% de descuento anual
• Página de ciencia con 6 sistemas de biomarcadores y 34 marcadores nombrados, de ApoB a edad epigenética
• Página del recorrido de evaluación en cuatro pasos con paneles de protocolo y stats de resultados
• Página de equipo — retratos de clínicos con credenciales en versalitas, especialidades y consejo asesor
• Cursor personalizado — punto con GSAP quickTo y anillo con lag que se expande en tags contextuales (Book / View)
• Cada island hidratada envuelta en un ErrorBoundary para que un fallo nunca deje una sección en blanco
• Smooth scroll con Lenis + Astro View Transitions; SEO con JSON-LD de MedicalClinic, Open Graph, URLs canónicas y sitemap
• TypeScript strict con noUncheckedIndexedAccess, noImplicitReturns y noFallthroughCasesInSwitch — props de componentes totalmente tipadas y seguro para reduced-motion en todo el sitio

Despliegue