Sobre esta plantilla
PROMPT es un caso de sección hero de agencia: nace de un único brief escrito y esta página lo documenta. La paleta se queda en negro #000000 de base y blanco #FFFFFF para la tipografía, y el tipo es Inter Tight. La entrega es React y Tailwind CSS: una página, sin plugins y sin herramientas de build entre tú y el diseño. Todo el movimiento cabe en transiciones de 80ms y un vídeo en bucle de fondo. Tenlo abierto mientras escribes: el brief de 13.186 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Toma prestada la estructura de sección hero entera y sustituye los textos línea a línea cotejando con un marco de 1472x1080.
- Agencias que llevan su sección hero de una agencia o un estudio a una propuesta y quieren citar secciones de 100vh y pasos de espaciado de 32px en la presentación para que el presupuesto siga en pie tras el kickoff.
- Profesionales del marketing de producto que necesitan que cada sección hero siga leyéndose con 5,7s de vídeo en bucle detrás del texto.
Qué incluye
- Una fila, sin desplegables. La barra es una fila de texto y una acción, medida en secciones de 100vh y pasos de espaciado de 32px, así que se lee como franja y no como banda. La marca se trata como tipografía y no como un logotipo compuesto, lo que mantiene la fila superior en una sola línea base.
- Un clip, no una ilustración. El brief especifica el vídeo a 1472x1080 con un bucle de 5,7s, y cada elemento de texto se coloca contra ese marco. El bucle es lo bastante corto (5,7s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Contenido dividido en paneles. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en Inter Tight, dispuestos para que el ojo avance en horizontal y no en vertical. Los encabezados dentro de los paneles están un paso por encima de su propio texto y no un paso por debajo del titular de la página.
- Un pie de página que sostiene la marca. Los enlaces se agrupan en columnas y la marca ocupa su propio bloque, lo que mantiene legible un pie de página largo en lugar de convertirlo en una lista. El acento se reutiliza en una sola acción del pie de página y no en toda la banda.
Movimiento e interacción
El movimiento se puede apagar
El brief incluye una rama de prefers-reduced-motion, así que la entrada y el bucle se puede apagar sin perder la maquetación. Copia esa rama directamente en tu build. La rama forma parte del brief y no es un añadido de última hora. La captura de la referencia es de 1472x1080.
Duraciones cortas y nombradas
Los controles se resuelven en 80ms, lo bastante rápido para que la página responda al tocarla y no después. Cada cambio de estado nombra un valor, así que el valor por defecto del navegador no se usa nunca.
Qué se sostiene para Agencias y estudios
La mayoría de las páginas de agencia añade otra sección cuando la primera pantalla es floja. Esta hace lo contrario y quita opciones: navegación, la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y la lista de funciones, en ese orden, y nada que repita la oferta. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Cómo ordena PROMPT la primera lectura
Una pantalla, una acción y navegación, la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y la lista de funciones entre medias. El brief fija ese orden en lugar de dejar la primera pantalla a una pila de secciones. Quien busca agencia recibe la oferta antes que las opciones.
El reflujo de sección hero
Aquí responsive significa que cambia la escala, no la jerarquía: la sección se mantiene a 100vh, la navegación se pliega en un menú móvil y hay una rama de movimiento reducido. El texto se queda por encima del pliegue, los controles siguen siendo lo bastante grandes para tocarlos y se respeta el movimiento reducido. La reproducción automática y el movimiento se tratan con honestidad, así que la página sigue comunicando cuando no están disponibles.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de PROMPT?
El brief capturado ocupa 13.186 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 PROMPT depende de React y Tailwind CSS?
PROMPT 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 PROMPT y cambiar los tiempos?
Las transiciones van asociadas a estados de la interfaz y no a una línea de tiempo de scroll, y se resuelven en el rango de 80ms. El brief anota los valores para que un port no tenga que adivinarlos.
