Sobre esta plantilla
Health Portal muestra una forma de construir este tipo de landing page para un producto de salud o bienestar y publica las instrucciones que lo generaron. El titular dice “Trusted Dentist in West New York”, y el orden de landing page gira alrededor de esa línea. Toda la página se construye sobre blanco #F9F8F9 de base, naranja intenso #1D110C para la tipografía y rojo #990A09 para los acentos. La referencia está construida con React y Tailwind CSS, y las decisiones de maquetación se documentan aparte. El brief gasta su presupuesto de movimiento en transiciones de 2000ms y cubic-bezier(0.16,1,0.3,1). Cuando prepares el brief de cada landing page de salud, parte de esta composición y sustituye el tema.
Pensado para
- Los desarrolladores que necesiten que el diseño de landing page aguante una conexión lenta usarán 640x472 y la escala tipográfica como presupuesto de peso.
- Pensado para estudios que tienen que explicar a un cliente el comportamiento a 767px sin construir antes un prototipo.
- Quien le pase el brief de landing page a un modelo usará el prompt de 16.908 caracteres como punto de partida.
Qué incluye
- La navegación es fina a propósito. Los enlaces van en una sola línea y a un único tamaño, y la acción #990A09 cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación. Las etiquetas son lo bastante cortas para caber en una línea a 767px, y el elemento activo se marca con peso y no con una píldora.
- Fluido donde hace falta. Lo alto de la escala es fluido (un clamp entre 180px y 200px) y el resto es fijo, así el marco se mantiene compuesto a medida que se estrecha el viewport. El tipo cambia de tamaño, no de papel, a medida que se estrecha el viewport. Conserva la jerarquía; cambia la escala.
- Estructura en una sola pantalla. La composición de landing page está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 640x472 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 640x472, y por eso se sostiene cuando cambia el texto.
- Una barra de navegación que no estorba. Por debajo de 767px los enlaces colapsan en lugar de saltar a una segunda línea.
Movimiento e interacción
Cambios de estado medidos
Aquí el movimiento se mide en milisegundos: 2000ms con la curva cubic-bezier(0.16,1,0.3,1). Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. Como los valores son cortos, una reconstrucción que los alargue se nota de inmediato. Los tiempos forman parte del diseño, no son un repaso final.
La interacción está en los controles
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, así que el resto de la maquetación es una composición fija. Los estados interactivos no mueven la maquetación, así que nada salta bajo el puntero. Unos pocos estados fiables valen más que una lista larga de efectos.
Leer Health Portal como especificación
En este tipo de landing page no se mide a ojo. Las cifras vienen del brief (pasos de espaciado de 200px y transiciones de 2000ms) y la maquetación se ordena según esos pasos en lugar de ajustarse a empujones. Nada de este tipo de landing page depende de un valor por defecto.
El orden detrás de landing page
Aquí el orden es el diseño: navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas se colocan para que la oferta llegue antes que la prueba, y la distancia entre ambas la marcan pasos de espaciado de 200px y transiciones de 2000ms. Quien busca salud recibe la oferta antes que las opciones.
El argumento de landing page
Donde una plantilla llena la primera pantalla de módulos, este tipo de landing page usa navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas y se detiene. La diferencia se ve en pasos de espaciado de 200px y transiciones de 2000ms: nada se rellena para ocupar espacio. Health Portal enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Health Portal?
El brief capturado ocupa 16.908 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Necesito React y Tailwind CSS para recrear Health Portal?
Health Portal se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Cómo se comportan las transiciones de 2000ms en Health Portal?
Las entradas y los cambios de estado se quedan en 2000ms con la curva cubic-bezier(0.16,1,0.3,1). Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
