Sobre esta plantilla
Mindloop Landing da a un producto de IA o SaaS una primera pantalla terminada y las cifras que la produjeron. La paleta es azul intenso #010713 de base, con la tipografía Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 455x800 antes de escribir código. Sirve de referencia cuando construyas este tipo de landing page para un producto de IA o SaaS y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Equipos que construyen este tipo de landing page para un producto de IA o SaaS y quieren el detalle medido (pasos de espaciado de 100px) en lugar de una captura que copiar.
- Quien le pase el brief de landing page a un modelo usará el prompt de 7.242 caracteres como punto de partida.
- Pensado para responsables de contenidos que reescriben un diseño de landing page cuyo titular tiene que seguir siendo tan largo como el de Mindloop Landing.
Qué incluye
- Fila superior, una acción. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Inter, para que la barra pertenezca a la página de abajo y no a un sistema aparte. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Los pasos de espaciado van cifrados. Los tamaños se citan, no se heredan: pasos de espaciado de 100px. Cambia la tipografía o el texto y esas relaciones se mantienen. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- Estructura en una sola pantalla. La composición está completa en 455x800: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 455x800, y por eso se sostiene cuando cambia el texto.
- Una fila, sin desplegables. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
Interacción contenida y local
La página solo responde donde se puede actuar: estados hover en los botones y los enlaces y no en todas las tarjetas y un elemento fijo que mantiene la posición mientras el contenido pasa por debajo. Nada en la página abre un modal ni secuestra el scroll; las interacciones se quedan en su elemento.
Casi nada de movimiento
El brief deja fuera la animación y deja que la maquetación de 455x800 sostenga la página, con el hover y la pulsación como únicos cambios. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción.
Qué cambiar primero en Mindloop Landing
Donde un tema te da componentes, este brief te da una composición: pasos de espaciado de 100px y un marco para el material, con el tema en tus manos. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Cómo ordena Mindloop Landing la primera lectura
La atención se dirige, no se deja al azar. La secuencia pasa por navegación, el titular, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo, y cada parada se mide contra pasos de espaciado de 100px para que nada llegue desordenado. Quien busca SaaS recibe la oferta antes que las opciones.
El brief de SaaS se sostiene
La afirmación se hace una sola vez, en tamaño de display. En esta clase de landing page todo lo demás se ordena alrededor de esa línea: navegación, el titular, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo, y ninguna segunda promesa compite por la primera lectura. Mindloop Landing enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Mindloop Landing?
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 455x800. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Mindloop Landing 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.
¿Puedo publicar una página reconstruida a partir de Mindloop Landing sin acreditar nada?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 455x800.
