Sobre esta plantilla
Cybersecurity Hero resuelve el problema de cada sección hero de un producto de IA o SaaS con un solo brief capturado. La paleta es #0A0A0F de base y tono claro #B04090 para los acentos, con la tipografía Inter. La ficha nombra el stack que produjo la página (React y Tailwind CSS) en lugar de esconderlo. El presupuesto de movimiento se agota en transiciones de 300ms y cubic-bezier(0.4, 0, 0.2, 1). Tenlo abierto mientras escribes: el brief de 11.920 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos de growth que retintan su sección hero de un producto de IA o SaaS y quieren conservar el marco de 640x472 mientras cambia el texto de la oferta.
- Si hay que renunciar al movimiento, el diseño de sección hero sigue leyéndose porque esquinas de 20px y pasos de espaciado de 12px se encargan de la jerarquía.
- 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 Cybersecurity Hero.
Qué incluye
- Navegación contenida en una fila. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #B04090, todo al paso de tipo más pequeño del brief. Las etiquetas son lo bastante cortas para caber en una línea a 440px, y el elemento activo se marca con peso y no con una píldora.
- Dos tipografías, papeles claros. 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. La interlínea sigue los pasos de tamaño y no un valor global único.
- Logotipos en la línea base. Las marcas de clientes recorren el borde inferior con poco contraste y en el paso más pequeño del brief, así la prueba se lee como textura de sección hero y nunca compite con el titular. Los logotipos se muestran a un solo tamaño, lo que evita que la tira compita con el titular. Deja la fila sin etiquetas. La captura de la referencia es de 640x472.
- Fila superior: marca, enlaces y acción. Por debajo de 440px los enlaces colapsan en lugar de saltar a una segunda línea.
Movimiento e interacción
Duraciones cortas y nombradas
Los cambios de estado están fijados en 300ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. Los tiempos cortos son la razón de que la página se lea como diseñada; un valor por defecto lento desharía la composición.
Puntero solo donde ayuda
La capa interactiva es pequeña y predecible: estados hover en los botones y los enlaces y no en todas las tarjetas. Todo lo demás se queda quieto, lo que mantiene el énfasis en la composición. Como los estados son simples, se portan a cualquier sistema de componentes. Si un estado no confirma una acción, quítalo.
Por qué esta composición funciona para SaaS
Supón que tu material grita más que tu texto. Es el caso para el que está construida esta composición. El medio es una imagen fija en 640x472. El marco se queda callado y esquinas de 20px y pasos de espaciado de 12px mantienen a quien lee sobre el texto. Cybersecurity Hero enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
El orden detrás de sección hero
La página tiene un orden deliberado. La navegación presenta el producto y le da al visitante que vuelve una forma de moverse que ya reconoce. El titular ocupa el tamaño de display, la línea de apoyo explica la oferta y el acento tono claro #B04090 marca la acción principal, así que el siguiente paso nunca está en duda. Nada más compite: no hay una cuadrícula de tarjetas antes de la primera decisión, y eso es lo que evita que este tipo de sección hero resulte pesado en un trabajo de SaaS. Quien busca SaaS recibe la oferta antes que las opciones.
Qué se mueve en Cybersecurity Hero
Aquí el movimiento es un conjunto de decisiones, no una librería: transiciones de 300ms y estados hover y pulsados, y nada se anima al hacer scroll. El resultado es una página que se siente escrita: duraciones cortas, una sola entrada y cambios de estado que confirman una acción en lugar de adornarla. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Cybersecurity Hero?
El brief capturado ocupa 11.920 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 Cybersecurity Hero depende de React y Tailwind CSS?
Cybersecurity Hero 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 quedarme con las transiciones de Cybersecurity Hero y cambiar los tiempos?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 300ms usando cubic-bezier(0.4, 0, 0.2, 1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
