Sobre esta plantilla
Lee Portal como especificación de sección hero: los valores se escribieron antes de construir la página. La paleta es neutro #F2F2EE de base, tono oscuro #192837 para la tipografía y tono oscuro #7342E2 para los acentos, con la tipografía Helvetica Now Display. El montaje es React y Tailwind CSS; todas sus medidas están anotadas, y eso es lo que lo hace reutilizable. El movimiento se limita a transiciones de 0.3s, lo bastante discreto para que el texto siga mandando. Tenlo abierto mientras escribes: el brief de 5.718 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Llévate el marco de 640x474 y secciones de 100vh y pasos de espaciado de 24px de este diseño de sección hero antes que cualquier otra cosa.
- Si solo tienes una tarde, retinta el diseño de sección hero en torno a #7342E2 y deja 640x474 y la cuadrícula donde están.
- Este diseño de sección hero sirve a responsables de marketing que tienen que defender la elección de #7342E2 ante el responsable de marca en la sala.
Qué incluye
- Los enlaces colapsan a un ancho. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #7342E2, dimensionada para no destacar frente al resto de la página. Una superposición móvil toma el relevo por debajo del breakpoint de tableta. Los enlaces se componen a un tamaño menor que la marca, y la acción en #7342E2 es el único elemento de la barra con peso. Una acción por barra.
- Los pasos de espaciado van cifrados. En la maquetación nada queda a la intuición: el brief cita secciones de 100vh, pasos de espaciado de 24px y transiciones de 0.3s y el montaje tiene que dar esos valores. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo. Verifica un remontaje contra los mismos números.
- Una familia, dos papeles. Aquí el tipo es el sistema de estilo: Helvetica Now Display al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. La tipografía display se usa a un solo tamaño, por eso nunca compite consigo misma. La escala está citada; úsala.
- Una barra de navegación que no estorba. Marca, enlaces y la acción #7342E2 comparten una línea base, y eso es lo que evita que una fila fina parezca accidental.
Movimiento e interacción
Rápido, pero deliberado
Aquí el movimiento se mide en milisegundos: 0.3s. Ese es todo el presupuesto de animación, y se gasta en cambios de estado y no en una línea de tiempo de scroll. El easing se especifica junto a la duración (0.3s), así que una reconstrucción no puede colar otra sensación sin avisar. Si cambias el easing, cámbialo en todas partes.
Estados de puntero, nada más
El trabajo de puntero es pequeño y está especificado: estados hover en los botones y los enlaces y no en todas las tarjetas, aplicado a los elementos que ya parecen interactivos. Los estados interactivos no mueven la maquetación, así que nada salta bajo el puntero.
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, la insignia de anuncio, la lista de funciones y el clip de fondo 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.
Leer Portal como especificación
Si esto se lo vas a pasar a quien programa, el brief es la pieza útil. Enuncia secciones de 100vh, pasos de espaciado de 24px y transiciones de 0.3s y no deja nada a la interpretación. Nada de este tipo de sección hero depende de un valor por defecto.
El acierto de sección hero
Podrías reconstruirlo como una pila de tarjetas sueltas y perderías solo el argumento. Esta clase de sección hero se lee como una única decisión: navegación, la insignia de anuncio, la lista de funciones y el clip de fondo en una sola secuencia. Portal enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Portal?
El brief capturado ocupa 5.718 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 Portal está animado?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 0.3s. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
¿El brief de Portal es lo mismo que el prompt que escribiría yo?
Todo lo que se cita en la página procede del brief capturado de 5.718 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
