Sobre esta plantilla
RIVR muestra una forma de construir este tipo de sección hero para un producto fintech y publica las instrucciones que lo generaron. “Fluid Asset Streams” es la línea que la maquetación está pensada para sostener. La paleta es gris #969BA2 de base, con la tipografía Helvetica. Se entrega como React y Tailwind CSS, y la captura se fija a 800x599 antes de escribir código. Tómalo como el brief de sección hero para un producto fintech que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Equipos internos que amplían su sección hero y necesitan que tipografía de 12px a 80px y pasos de espaciado de 14px pasen a los bloques nuevos sin tocar los valores.
- Pensado para un fundador en solitario que saca un único diseño de sección hero para un producto fintech 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 8.089 caracteres como punto de partida.
Qué incluye
- Una fila, sin desplegables. La marca ocupa el borde izquierdo y los enlaces corren a su derecha, todo compuesto en Helvetica, para que la barra pertenezca a la página de abajo y no a un sistema aparte. Las etiquetas son lo bastante cortas para caber en una línea en cualquier ancho que cubra el brief. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes.
- Una escala para tipo y marco. Toda medida del brief es un número que puedes volver a medir: tipografía de 12px a 80px y pasos de espaciado de 14px. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud.
- La composición es el contenido. La composición está completa en 800x599: el texto, los medios y los controles están nombrados en el brief. La página es una sola composición a 800x599, y por eso se sostiene cuando cambia el texto. El brief es la especificación.
- Fila superior: marca, enlaces y acción. Una serie corta de enlaces y una única acción se sitúan sobre sección hero, sostenidas en tipografía de 12px a 80px y pasos de espaciado de 14px, de manera que la barra nunca compite con la composición que tiene detrás.
Movimiento e interacció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. Los estados interactivos no mueven la maquetación, así que nada salta bajo el puntero. Unos pocos estados fiables valen más que una lista larga de efectos.
Casi nada de movimiento
Esta se entrega como composición estática en 800x599, así que la jerarquía tiene que funcionar sin movimiento, y funciona. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
El argumento de sección hero
Donde una plantilla llena la primera pantalla de módulos, este tipo de sección hero usa navegación, la fila de cifras, la lista de funciones y el clip de fondo y se detiene. La diferencia se ve en tipografía de 12px a 80px y pasos de espaciado de 14px: nada se rellena para ocupar espacio. RIVR enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Cómo ordena RIVR la primera lectura
Compara la parte alta de esta página con una primera pantalla típica de fintech. Las dos llevan titular y acción; aquí navegación, la fila de cifras, la lista de funciones y el clip de fondo ocupan un orden fijo en vez de competir con el mismo peso. Quien busca fintech recibe la oferta antes que las opciones.
Qué se mueve en RIVR
Cuando una página se siente inquieta, casi siempre sobran entradas. Esta mantiene la lista corta: estados hover y pulsados. Nada se anima por gusto en este tipo de sección hero.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de RIVR?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 800x599. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
RIVR 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 RIVR 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 800x599.
