Sobre esta plantilla
Antes de rehacer cada sección hero para un producto de salud o bienestar, lee Wellness Hero: la composición y la especificación que hay detrás están aquí. La tipografía es Inter, y el brief fija los tamaños en lugar de dejarlos a una escala. Se entrega como React y Tailwind CSS, y la captura se fija a 640x468 antes de escribir código. Esta referencia es para un producto de salud o bienestar que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Pensado para responsables de producto que necesitan acotar el diseño de sección hero a un sprint y no añadir material nuevo.
- Pensado para responsables de contenidos que reescriben un diseño de sección hero cuyo titular tiene que seguir siendo tan largo como el de Wellness Hero.
- Equipos de producto que escriben los textos de Hero y necesitan que cada línea respete la longitud para la que se dimensionó la tipografía de display.
Qué incluye
- Navegación sin fondo propio. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Inter, de modo que la composición se lee antes como contenido que como interfaz. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
- Primero el texto, después el adorno. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 640x468 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 640x468, y por eso se sostiene cuando cambia el texto.
- La navegación es fina a propósito. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- El tipo lleva el tono. Aquí el tipo es el sistema de estilo: Inter al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. El interletraje se fija por tamaño, así la línea display y el pie de foto no comparten un mismo valor.
Movimiento e interacción
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 640x468 se queda quieta y solo se mueven los elementos que responden a ti. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
Casi nada de movimiento
El brief deja fuera la animación y deja que la maquetación de 640x468 sostenga la página, con el hover y la pulsación como únicos cambios.
Leer Wellness Hero como especificación
Compara esto con una plantilla que llama preferencia a su espaciado. Aquí los mismos valores tienen nombre (un marco de 640x468), así que un cambio o los respeta o rompe la composición a la vista. Nada de este tipo de sección hero depende de un valor por defecto.
El orden detrás de sección hero
La atención se dirige, no se deja al azar. La secuencia pasa por navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo, y cada parada se mide contra un marco de 640x468 para que nada llegue desordenado. Quien busca salud recibe la oferta antes que las opciones.
Hacer tuyo este tipo de sección hero
El brief nombra Inter y la escala que la acompaña. Sustituye por una fuente con las mismas proporciones y la composición aguanta. Compón el texto nuevo al mismo tamaño de display y vuelve a comprobar el contraste antes de añadir nada.
Preguntas frecuentes
¿Por qué no se imprime aquí el prompt de Wellness Hero?
Todo lo que se cita en la página procede del brief capturado de 4.719 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿El prompt de Wellness Hero es una especificación cerrada o un punto de partida?
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 640x468. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
No. El brief es una especificación, no una lista de dependencias. Se escribió para React y Tailwind CSS, pero la misma composición se puede recrear en lo que ya uses. El stack se nombra para que sepas cómo se hizo la referencia.
