Sobre esta plantilla

Healcure es una referencia de trabajo para un producto de salud o bienestar: el desglose de sección hero, con la maquetación medida y lista para recrear. El titular de la propia página dice “Healthcare for Good. Today. Tomorrow. Always.”, y la composición se construye alrededor de esas palabras exactas. Toda la página se construye sobre azul apagado #374251 de base. La ficha nombra el stack que produjo la página (Tailwind CSS) en lugar de esconderlo. Todo el movimiento cabe en un vídeo en bucle de fondo. Toma prestada la estructura, no el tema: las cifras y el orden de sección hero pasan a tu marca sin cambios.

Pensado para

  • Diseñadores que necesitan los números antes que nada: pasos de espaciado de 14px, todo citado del brief.
  • Los fundadores que le pasen el brief a una agencia usarán el marco de 1466x1080 como prueba de aceptación de la primera ronda.
  • Empieza por pasos de espaciado de 14px y deja que la paleta venga después, porque el espaciado es lo que hace legible este diseño de sección hero.

Qué incluye

  • Una barra sin nada de más. La navegación es una sola fila, sin un segundo nivel debajo. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Una acción por barra.
  • Medido contra el viewport. Los tamaños se leyeron del render en 1466x1080: pasos de espaciado de 14px. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo.
  • La barra sigue la cuadrícula. La sección activa se marca con peso, no con una píldora ni con un subrayado. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
  • Tamaños fijados en el brief. El espaciado se cita igual (pasos de espaciado de 14px), no como una escala que crece sola.

Movimiento e interacción

Movimiento ambiente sin librería de scroll

El movimiento ambiente viene del bucle de 5,4s en 1466x1080 y no de efectos de scroll, lo que mantiene la página tranquila y el texto legible. El clip está silenciado y en línea, así que el primer fotograma está disponible sin ninguna interacción. Graba o exporta a 1466x1080 o más ancho.

Estático a propósito

Aquí no hay librería de scroll: la composición de 1466x1080 se queda quieta y solo se mueven los elementos que responden a ti. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.

Hacer tuyo este tipo de sección hero

Compara esto con empezar de una página en blanco. Aquí el marco (1466x1080) y las cifras (pasos de espaciado de 14px) ya están decididos, así que el trabajo es sustituir y no componer. El marco y la escala son lo que hay que dejar en paz.

El orden detrás de sección hero

Un orden estricto te cuesta flexibilidad después. Añade una sección por encima y habrá que recortar de nuevo las cifras (pasos de espaciado de 14px), porque la secuencia sostiene la página y no es decorativa. Quien busca salud recibe la oferta antes que las opciones.

Leer Healcure como especificación

El brief es una especificación, no un moodboard. Fija pasos de espaciado de 14px y concreta el medio en 1466x1080 y un bucle de 5,4s. Ese nivel de detalle es lo que hace que el diseño sobreviva a una reconstrucción: cambia el texto y las relaciones se mantienen. Nada de este tipo de sección hero depende de un valor por defecto.

Preguntas frecuentes

¿Cómo trato los medios de Healcure en un proyecto de cliente?

La referencia se recogió de sceneai.art, y los medios son suyos. Reconstruye la composición con texto, imágenes y paleta propios, y revisa las condiciones de uso del sitio de origen antes de publicar cualquier archivo tomado de él.

¿Cómo está organizada esta ficha de Healcure?

Todo lo que se cita en la página procede del brief capturado de 3.021 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.

¿Qué contiene en realidad el brief que hay detrás de Healcure?

Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1466x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.

Créalo en Studio

Empieza por la referencia y adapta el contenido y los detalles visuales en Studio.