Sobre esta plantilla
Luminex resuelve el problema de cada sección hero de un producto de IA o SaaS con un solo brief capturado. Toda la página se construye sobre azul intenso #010A12 de base, blanco #CFDDD8 para la tipografía y azul #143F62 para los acentos. La referencia está construida con React, y las decisiones de maquetación se documentan aparte. Sirve de referencia cuando construyas este tipo de sección hero 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 su sección hero de un producto de IA o SaaS y necesitan dejar constancia de un marco de 800x600 antes de que salga un presupuesto.
- 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 Luminex.
- Pensado para un fundador en solitario que saca un único diseño de sección hero para un producto de IA o SaaS y no tiene ningún sistema de diseño detrás.
Qué incluye
- Una barra de navegación que no estorba. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #143F62, dimensionada para no destacar frente al resto de la página. Los enlaces se componen a un tamaño menor que la marca, y la acción en #143F62 es el único elemento de la barra con peso. Diseña el estado colapsado antes de añadir un sexto enlace.
- 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 800x600 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 800x600, y por eso se sostiene cuando cambia el texto.
- Los enlaces colapsan a un ancho. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
- Una paleta con una sola voz. #143F62 se gasta en los controles y en ningún otro sitio, así un valor saturado puede convivir con azul intenso #010A12 sin gritar. El contraste entre #143F62 y azul intenso #010A12 es lo que hace legible el acento en tamaños pequeños.
Movimiento e interacción
Estático a propósito
El brief deja fuera la animación y deja que la maquetación de 800x600 sostenga la página, con el hover y la pulsación como únicos cambios. El movimiento se trata como respuesta y no como adorno.
Casi nada de movimiento
Aquí no hay librería de scroll: la composición de 800x600 se queda quieta y solo se mueven los elementos que responden a ti. La quietud es una opción válida.
El orden detrás de sección hero
Una página así suele enterrar la acción bajo una cuadrícula de funciones. Esta coloca navegación en una secuencia fija, con la acción dentro de la primera pantalla y no después de tres pantallas de scroll. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de sección hero
Una pantalla estrecha no se arregla encogiéndola. Este brief resuelve el cambio en el tipo y en la navegación: la escala es fluida en lugar de escalonada. El ancho cambia las medidas, no el recorrido de lectura.
Qué cambiar primero en Luminex
Una línea, una fuente y un acento: esas tres sustituciones son las que más cambian el diseño. Los valores que no deberían moverse son estos: un marco de 800x600. El tema es la parte que debería cambiar.
Preguntas frecuentes
¿Puedo usar Luminex en un proyecto de cliente?
La referencia se recogió de motionsites.ai, y los medios son suyos. Reconstruye la composición con texto, imágenes y paleta propios, y revisa las condiciones de uso del sitio de origen antes de publicar cualquier archivo tomado de él.
¿El brief de Luminex es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 162 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto ocupa el prompt que hay detrás de Luminex?
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 800x600. En ningún punto la imagen renderizada funciona como fuente de la verdad.
