Sobre esta plantilla
Impact Ventures resuelve el problema de cada sección hero de un producto fintech con un solo brief capturado. El titular de la propia página dice “We shape digital products that define brands”, y la composición se construye alrededor de esas palabras exactas. El color se limita a azul #2D64B0 de base y blanco #C5D5DE para la tipografía y la página se compone en Instrument Serif. La ficha nombra el stack que produjo la página (React y Tailwind CSS) en lugar de esconderlo. La página reduce el movimiento a transiciones de 700ms y cubic-bezier(0.76,0,0.24,1). Es más útil cuando cada sección hero de Fintech tiene que sobrevivir a un cambio de texto sin rediseño.
Pensado para
- Equipos externos que se hacen cargo de su sección hero y necesitan fijar un marco de 640x472 en el repositorio antes del primer commit.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 4.400 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 Impact Ventures.
Qué incluye
- Fila superior, una acción. La barra se superpone sobre sección hero en lugar de empujarla hacia abajo, así la composición conserva toda la altura de la primera pantalla. Nada de la barra se anima al hacer scroll; está presente desde el primer fotograma y después se queda al margen. La captura de la referencia es de 640x472.
- Los pasos de espaciado van cifrados. El brief declara sus tamaños en la captura (transiciones de 700ms y easing cubic-bezier(0.76,0,0.24,1)), así que un remontaje se puede verificar en lugar de aproximar. El valor más pequeño y el más grande de esa lista marcan el rango en el que trabaja la composición.
- Pesos nombrados por papel. Las fuentes tienen papeles asignados y no se mezclan: Instrument Serif sostiene a la vez la línea display y la interfaz. La tipografía display se usa a un solo tamaño, por eso nunca compite consigo misma. Comprueba la escala en gris.
- 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. Los tamaños bajan de los encabezados de columna a los enlaces, así la jerarquía sobrevive a un pie de página denso.
Movimiento e interacción
Una superficie interactiva pequeña
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 objetivos interactivos son lo bastante grandes para tocarlos y el tratamiento del puntero es coherente entre ellos.
Duraciones del brief
Aquí el movimiento se mide en milisegundos: 700ms con la curva cubic-bezier(0.76,0,0.24,1). 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. Cada cambio de estado nombra un valor, así que el valor por defecto del navegador no se usa nunca. Pasa las duraciones a tu implementación.
Por qué esta composición funciona para fintech
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 transiciones de 700ms y easing cubic-bezier(0.76,0,0.24,1) mantienen a quien lee sobre el texto. Impact Ventures 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
Una página así suele enterrar la acción bajo una cuadrícula de funciones. Esta coloca navegación, la fila de cifras, la lista de funciones, el clip de fondo y el pie de página en una secuencia fija, con la acción dentro de la primera pantalla y no después de tres pantallas de scroll. Quien busca fintech recibe la oferta antes que las opciones.
El reflujo de sección hero
La maquetación estrecha está diseñada, no heredada. En cada ancho, la navegación se pliega en un menú móvil, para que la jerarquía sobreviva al reflujo. El ancho cambia las medidas, no el recorrido de lectura.
Preguntas frecuentes
¿Qué me llevo cuando copio el brief de Impact Ventures?
El brief capturado ocupa 4.400 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 Impact Ventures depende de React y Tailwind CSS?
Impact Ventures 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.
¿Cuánto de Impact Ventures está animado?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 700ms con la curva cubic-bezier(0.76,0,0.24,1). Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
