Sobre esta plantilla
Aquí no hay una captura sino un caso de sección hero de Wellness Balance, con el brief original al lado. Abre con “Discover our new plant-based supplements for daily balance and clean energy” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es blanco #ECEDEC de base y blanco #FEFDF9 para la tipografía, con la tipografía DM Sans. La ficha nombra el stack que produjo la página (React y Tailwind CSS) en lugar de esconderlo. El movimiento se limita a transiciones de 0.8s y cubic-bezier(0.16, 1, 0.3, 1). Tómalo como el brief de sección hero para un producto de salud o bienestar que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Equipos de growth que retintan su sección hero de un producto de salud o bienestar y quieren conservar el marco de 640x472 mientras cambia el texto de la oferta.
- Los responsables de marketing que hereden un diseño de sección hero usarán tipografía de 28px a 35px y pasos de espaciado de 110px para comprobar que una reescritura mantuvo la escala.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 7.840 caracteres como punto de partida.
Qué incluye
- Una barra sin nada de más. La barra es una fila de texto y una acción, medida en tipografía de 28px a 35px y pasos de espaciado de 110px, así que se lee como franja y no como banda. La fila se dimensiona a partir de su propia tipografía, no de una altura de cabecera fija. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso.
- Las tarjetas estructuran. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en DM Sans, dispuestos para que el ojo avance en horizontal y no en vertical. El acento dentro de la cuadrícula marca un elemento como máximo, así los paneles no compiten entre sí. Ajusta los encabezados de panel a la escala de la página.
- Etiquetas bajo las cifras. La fila se sitúa arriba en sección hero como prueba y no como adorno. El acento se gasta en las cifras que afirman algo, no en la fila entera. La captura de la referencia es de 640x472.
- Una barra de navegación que no estorba. La barra se superpone sobre sección hero en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
Hover solo donde aporta
La capa interactiva es pequeña a propósito: un carrusel que pasa páginas de contenido a demanda. El hover y el foco están especificados juntos, así que el puntero y el teclado reciben la misma información.
Una duración para los controles
Aquí el movimiento se mide en milisegundos: 0.8s usando 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. El easing se especifica junto a la duración (0.8s), así que una reconstrucción no puede colar otra sensación sin avisar. Los tiempos forman parte del diseño, no son un repaso final.
El brief de salud se sostiene
Cuenta las decisiones de este tipo de sección hero y todas remiten a un único documento: 7.840 caracteres que nombran el marco en 640x472, el tipo y el ritmo. Wellness Balance enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Hacer tuyo este tipo de sección hero
No hace falta rehacer este tipo de sección hero para que sea tuyo. Sustituye el titular y el material, conserva la escala (tipografía de 28px a 35px y pasos de espaciado de 110px) y la maquetación seguirá leyéndose como fue diseñada. Reescribe la línea de display antes de tocar el color.
Cómo ordena Wellness Balance la primera lectura
Si tu página abre hoy con funciones, este es el orden que hay que copiar: navegación, el titular, la fila de cifras, la cuadrícula de tarjetas y el pie de página delante, el detalle de apoyo después y tipografía de 28px a 35px y pasos de espaciado de 110px marcando la distancia. Quien busca salud recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de Wellness Balance es una especificación cerrada o un punto de partida?
El brief capturado ocupa 7.840 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.
¿Por qué la ficha nombra React y Tailwind CSS?
Wellness Balance 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.
¿Cuánto de Wellness Balance está animado?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 0.8s usando cubic-bezier(0.16, 1, 0.3, 1). El brief anota los valores para que un port no tenga que adivinarlos.
