Sobre esta plantilla
Antes de rehacer cada sección hero para una marca de lifestyle, lee Portal: la composición y la especificación que hay detrás están aquí. Abre con “A voyage through forgotten realms, where past and future intertwine” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El esquema de color es negro #292926 de base, naranja apagado #F3BC9E para la tipografía y rojo #E1836B para los acentos, y la página está compuesta en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 800x609 antes de escribir código. El brief gasta su presupuesto de movimiento en transiciones de 300ms. Sirve de referencia cuando construyas este tipo de sección hero para una marca de lifestyle y quieras una composición terminada en lugar de un punto de partida.
Pensado para
- Pensado para un fundador en solitario que saca un único diseño de sección hero para una marca de lifestyle y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 6.663 caracteres como punto de partida.
- 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 Portal.
Qué incluye
- Navegación sin fondo propio. Marca, enlaces y la acción #E1836B comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Los enlaces se componen a un tamaño menor que la marca, y la acción en #E1836B es el único elemento de la barra con peso. Prueba la barra sobre tus propios medios antes de darle un fondo.
- Tamaños fijados en el brief. El brief declara sus tamaños en la captura (pasos de espaciado de 20px y transiciones de 300ms), así que un remontaje se puede verificar en lugar de aproximar. No hay ningún valor intermedio inventado entre los citados; la lista de medidas es todo el sistema.
- Una barra sin nada de más. La barra reúne la marca, los enlaces de la sección y un botón en #E1836B, medida en pasos de espaciado de 20px y transiciones de 300ms, así nunca acaba convertida en una segunda cabecera.
- Números que llegan al montaje. El espaciado se cita igual (pasos de espaciado de 20px y transiciones de 300ms), no como una escala que crece sola.
Movimiento e interacción
Duraciones cortas y nombradas
El brief fija la transición en 300ms, así que una reconstrucción no puede colar un valor por defecto más lento. Los estados de foco usan el mismo tiempo que el hover, así que la respuesta de teclado y de puntero coincide.
La interacción está en los controles
Cada elemento interactivo hace una sola cosa (estados hover en los botones y los enlaces y no en todas las tarjetas), y eso mantiene los estados previsibles. Nada en la página abre un modal ni secuestra el scroll; las interacciones se quedan en su elemento.
El orden detrás de sección hero
Léelo en orden: navegación, el titular, la insignia de anuncio, la fila de cifras y el clip de fondo. Cada elemento tiene una sola función, y el acento rojo #E1836B se gasta solo en el elemento que debes pulsar. Quien busca lifestyle recibe la oferta antes que las opciones.
Hacer tuyo este tipo de sección hero
Empieza por la promesa, no por el adorno. Reescribe “A voyage through forgotten realms, where past and future intertwine” como una sola frase que diga a qué te dedicas y compónla en Inter al tamaño de display que usa el brief. Sustituye rojo #E1836B por tu acento de marca y compáralo con negro #292926 antes de tocar nada más. El marco y la escala son lo que hay que dejar en paz.
Las cifras detrás de sección hero
El tipo es la primera cifra: pasos de espaciado de 20px y transiciones de 300ms. El espaciado se deriva de ahí, y todo lo demás en la página se coloca en relación con esos dos valores. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿El prompt de Portal es una especificación cerrada o un punto de partida?
El brief capturado ocupa 6.663 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.
¿Puedo reconstruir este diseño de sección hero de Portal con otro stack?
Portal 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 publicar una página reconstruida a partir de Portal sin acreditar nada?
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 800x609.
