Sobre esta plantilla
Nexora Automation muestra una forma de construir este tipo de sección hero para un producto de IA o SaaS y publica las instrucciones que lo generaron. Abre con “Now with GPT-5 support ✨” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El color se limita a blanco #FFFFFF de base y turquesa intenso #092128 para la tipografía y la página se compone en Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 800x552 antes de escribir código. La página reduce el movimiento a transiciones de 0.6s. Tenlo abierto mientras escribes: el brief de 5.344 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Agencias que llevan su sección hero de un producto de IA o SaaS a una propuesta y quieren citar secciones de 100vh y pasos de espaciado de 25px en la presentación para que el presupuesto siga en pie tras el kickoff.
- 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 Nexora Automation.
- Conserva Instrument Serif y rehace el diseño de sección hero en torno a esa tipografía en vez de abrir una escala tipográfica nueva para tu marca.
Qué incluye
- Una barra sin nada de más. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Instrument Serif, de modo que la composición se lee antes como contenido que como interfaz. El menú móvil forma parte del brief, de modo que el estado colapsado está diseñado y no improvisado.
- Los tamaños están en el brief, no en una escala. En la maquetación nada queda a la intuición: el brief cita secciones de 100vh, pasos de espaciado de 25px y transiciones de 0.6s y el montaje tiene que dar esos valores. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- La composición es el contenido. La composición está completa en 800x552: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 800x552, y por eso se sostiene cuando cambia el texto. Conserva el marco; cambia el tema.
- Fila superior, una acción. 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. El espaciado entre enlaces viene del relleno y no de divisores, así la fila se lee como un solo objeto. Copia este patrón cuando necesites una navegación que aguante una primera pantalla ruidosa.
Movimiento e interacción
Duraciones cortas y nombradas
El hover, la pulsación y el foco se resuelven en 0.6s, que es lo que hace que la interfaz se sienta inmediata. El easing se especifica junto a la duración (0.6s), así que una reconstrucción no puede colar otra sensación sin avisar.
Una superficie interactiva pequeña
La respuesta se limita a estados hover en los botones y los enlaces y no en todas las tarjetas, y eso es lo que evita que una primera pantalla densa se sienta cargada. Los estados están nombrados en el brief, así que la página no depende de ninguna librería de efectos hover. Mantén pequeña la capa interactiva.
Cómo ordena Nexora Automation la primera lectura
Comprometerse con un solo recorrido de lectura cierra los demás. El brief lo acepta, fija navegación, el titular, la insignia de anuncio, la fila de cifras y la cuadrícula de tarjetas en su sitio y gasta secciones de 100vh y pasos de espaciado de 25px en hacer obvio el camino. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de sección hero
Aquí responsive significa que cambia la escala y no la secuencia: la sección se mantiene a 100vh, y el orden de lectura se queda donde lo puso el brief. Los controles siguen siendo lo bastante grandes para tocarlos y el texto mantiene su orden de lectura en cualquier ancho.
Los tiempos detrás de sección hero
Donde una plantilla anima cada sección al entrar, esta anima transiciones de 0.6s y estados hover y pulsados y después se queda quieta. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Nexora Automation?
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 800x552. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Nexora Automation?
Nexora Automation 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.
¿De dónde sale el diseño de Nexora Automation?
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 800x552.
