Sobre esta plantilla
Network Hero es la referencia de sección hero para una agencia o un estudio, y el brief que hay detrás es una especificación de construcción completa, no un moodboard. Abre con “Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!” y le da el marco a esa línea en lugar de encogerla en una tarjeta. La paleta es índigo intenso #070319 de base, blanco #FFFFFF para la tipografía y índigo #A068FF para los acentos, con la tipografía Inter. La ficha nombra el stack que produjo la página (React y Vite) en lugar de esconderlo. El movimiento se queda en transiciones de 35ms y cubic-bezier(0.22, 1, 0.36, 1). Tenlo abierto mientras escribes: el brief de 7.543 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Este diseño de sección hero sirve a equipos que tienen que justificar un marco de 640x472 ante alguien que no estaba en 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 Network Hero.
- Este diseño de sección hero está acotado para responsables de producto que necesitan que la reconstrucción reutilice #A068FF en vez de inventar una paleta.
Qué incluye
- Una barra de navegación que no estorba. Los enlaces van en una sola línea y a un único tamaño, y la acción #A068FF cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación. Los enlaces se componen a un tamaño menor que la marca, y la acción en #A068FF 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.
- Todas las medidas están escritas. La lista se mantiene corta (pasos de espaciado de 64px, transiciones de 35ms y easing cubic-bezier(0.22, 1, 0.36, 1)), y por eso todo el sistema se puede comprobar a mano. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición.
- El tamaño display lleva la voz. La tipografía es Inter, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. Cambiar de tipografía es seguro mientras los tamaños y los pesos se queden donde los puso el brief.
- La composición es el contenido. Todo lo que está por encima del pliegue se gana su sitio. El brief nombra el texto, el marco de 640x472 y los tamaños de tipo, y no deja nada decorativo compitiendo con ellos. La página es una sola composición a 640x472, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Duraciones cortas y nombradas
Cada cambio de estado de la especificación lleva una duración: las transiciones se resuelven en torno a 35ms usando cubic-bezier(0.22, 1, 0.36, 1). Nada queda en el valor por defecto del navegador, y por eso la página se siente diseñada y no animada. Nada espera a una posición de scroll, así que la página responde en cuanto la tocas.
La entrada como firma
El movimiento de entrada se concentra en un solo elemento: un barrido de máquina de escribir teclea la línea de entrada. Todo lo demás ya está en su sitio cuando la página carga. La entrada termina antes de que el ojo llegue al texto de apoyo. La captura de la referencia es de 640x472.
Qué cambiar primero en Network Hero
Casi todo el mundo empieza por el color de acento. Empieza tú por la promesa: reescribe la línea de display y vuelve a probar índigo #A068FF contra tu propio material. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue.
Qué se mueve en Network Hero
Mantener el movimiento tan pequeño hace que la página se apoye en el tipo y en el marco. Si se quitara todo el movimiento (transiciones de 35ms, un efecto máquina de escribir y titular temporizado carácter a carácter), la composición seguiría en pie. Nada se anima por gusto en este tipo de sección hero.
Qué se sostiene para Agencias y estudios
La mayoría de las páginas de agencia fallan por acumulación: más secciones, más degradados, más promesas. Network Hero va en la dirección contraria. “Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!” hace ese trabajo desde el primer fotograma. La composición se queda en índigo intenso #070319 y deja índigo #A068FF para las acciones, que es suficiente para parecer deliberada. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Network Hero?
El brief capturado ocupa 7.543 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.
¿Cuánto de Network Hero depende de React y Vite?
La referencia está construida en React y Vite, pero la maqueta no depende de esa decisión: el espaciado, la escala tipográfica y los valores de movimiento pasan a lo que ya uses.
¿Qué gobierna el movimiento en Network Hero?
Las entradas y los cambios de estado se quedan en 35ms usando cubic-bezier(0.22, 1, 0.36, 1). Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
