Sobre esta plantilla
Mind-Body Healing es la referencia de landing page para un producto de salud o bienestar, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. El titular dice “Holistic wellness. Transformative results”, y el orden de landing page gira alrededor de esa línea. La paleta es índigo apagado #D1C4E9 de base y magenta #AD4A80 para los acentos, con la tipografía Inter. 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 500ms y un vídeo en bucle de fondo. Toma prestada la estructura, no el tema: las cifras y el orden de landing page pasan a tu marca sin cambios.
Pensado para
- Este diseño de landing page está pensado para agencias que necesitan que el marco de 1468x1080 sobreviva a tres rondas de cambios del cliente.
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 6,8s de vídeo en bucle detrás del texto.
- Pensado para un fundador en solitario que saca un único diseño de landing page para un producto de salud o bienestar y no tiene ningún sistema de diseño detrás.
Qué incluye
- Navegación contenida en una fila. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #AD4A80, dimensionada para no destacar frente al resto de la página. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #AD4A80 es el único elemento de la barra con peso. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso.
- Aquí nada se hereda. En la maquetación nada queda a la intuición: el brief cita secciones de 100vh y transiciones de 500ms y el montaje tiene que dar esos valores. Las proporciones del marco se registran junto a los tamaños, así un remontaje también acierta con el formato.
- El vídeo es el fondo, no un panel. El vídeo de 1468x1080 se reproduce en bucle durante 6,8s detrás del texto, silenciado y en línea, sin ninguna capa de tinte entre ambos. El bucle es lo bastante corto (6,8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- El tamaño display lleva la voz. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Inter a un tamaño display cerrado y una caída clara hasta el texto de apoyo. La fuente va con tamaños fijos, y eso es lo que mantiene relacionadas la línea display y el texto de interfaz.
Movimiento e interacción
Movimiento ambiente sin librería de scroll
El clip de fondo se reproduce 6,8s en 1468x1080 en bucle infinito, silenciado y en línea, así que la página sigue moviéndose mientras la atención del lector está en el texto. No hace falta ninguna librería de scroll, porque el único movimiento ambiente es el propio medio. Un fotograma de portada hace de suplente cuando la reproducción automática está bloqueada, así que el movimiento suma y no es obligatorio. Graba o exporta a 1468x1080 o más ancho.
Tiempos en milisegundos
Los controles se resuelven en 500ms, lo bastante rápido para que la página responda al tocarla y no después. Cada cambio de estado nombra un valor, así que el valor por defecto del navegador no se usa nunca.
El reflujo de landing page
No hay un diseño de móvil aparte que mantener: la sección se mantiene a 100vh y la navegación se pliega en un menú móvil, y la misma jerarquía se mantiene en ambos. Un apretujón habría sido más barato y no aguantaría.
El brief de salud se sostiene
La razón de que esto funcione para un producto de salud o bienestar es que nunca pide al lector que arme el mensaje. “Holistic wellness. Transformative results” hace ese trabajo desde el primer fotograma. La maquetación, el tipo y el color están decididos (índigo apagado #D1C4E9 y magenta #AD4A80, compuestos en Inter), así que la primera pantalla se lee como un argumento cerrado y no como un montón de piezas. Da a quien lee páginas de salud el camino más corto y honesto hasta la oferta.
Las cifras detrás de landing page
Si esto se lo vas a pasar a quien programa, el brief es la pieza útil. Enuncia secciones de 100vh y transiciones de 500ms y no deja nada a la interpretación. Nada de este tipo de landing page depende de un valor por defecto.
Preguntas frecuentes
¿Por qué no se imprime aquí el prompt de Mind-Body Healing?
Todo lo que se cita en la página procede del brief capturado de 5.232 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué me llevo cuando copio el brief de Mind-Body Healing?
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 1468x1080. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Mind-Body Healing?
Mind-Body Healing 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.
