Sobre esta plantilla
VEX Ventures es un caso de sección hero de fintech: nace de un único brief escrito y esta página lo documenta. El titular de la propia página dice “We back visionaries and craft ventures that define what comes next”, y la composición se construye alrededor de esas palabras exactas. La página está compuesta en Inter, con los tamaños fijados en el brief. Se entrega como React y Tailwind CSS, y la captura se fija a 800x603 antes de escribir código. El brief gasta su presupuesto de movimiento en transiciones de 1000ms. Cuando prepares el brief de cada sección hero de fintech, parte de esta composición y sustituye el tema.
Pensado para
- 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 VEX Ventures.
- Fundadores que lanzan su sección hero de un producto fintech y necesitan decidir Inter y cerrar la escala tipográfica antes de que un desarrollador empiece.
- Pensado para un equipo que ya tiene Inter en el proyecto, una exportación de 800x603 esperando y hueco de implementación esta semana.
Qué incluye
- La navegación es fina a propósito. Una barra fina ocupa la parte superior de sección hero, con la marca a la izquierda y los enlaces compuestos en Inter, de modo que la composición se lee antes como contenido que como interfaz. La acción lleva el acento mientras los enlaces se quedan en el color del texto, así la jerarquía de la barra coincide con la de la página que tiene debajo.
- El brief nombra los pasos. La lista se mantiene corta (pasos de espaciado de 18px y transiciones de 1000ms), y por eso todo el sistema se puede comprobar a mano. El espaciado se cita en las mismas unidades que el tipo, de modo que ambos se comparan directamente.
- Prueba por encima del pliegue. Una franja compacta de cifras sostiene las afirmaciones que de otro modo pedirían un párrafo, lo que evita que la composición de sección hero se convierta en una lista de funciones. Como las cifras son tipo, heredan el comportamiento responsive de la página en lugar de escalar por su cuenta.
- Primero el texto, después el adorno. Toda la composición cabe en una pantalla y se entrega como React y Tailwind CSS, con el texto, los medios y los controles nombrados en el brief. La página es una sola composición a 800x603, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Respuesta en los controles
La página solo responde donde se puede actuar: estados hover en los botones y los enlaces y no en todas las tarjetas. Los objetivos interactivos son lo bastante grandes para tocarlos y el tratamiento del puntero es coherente entre ellos. Mantén los efectos de puntero en los controles.
Todo el presupuesto de animación
Los cambios de estado están fijados en 1000ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. Cada cambio de estado nombra un valor, así que el valor por defecto del navegador no se usa nunca.
El reflujo de sección hero
La composición de escritorio se resuelve contra 800x603, y la maquetación estrecha está diseñada y no heredada: la escala es fluida en lugar de escalonada. El movimiento incluye una rama de movimiento reducido, y el medio lleva un fotograma de portada para que la página siga comunicando cuando no hay reproducción automática. Los controles siguen siendo lo bastante grandes para tocarlos y el texto mantiene su orden de lectura en cualquier ancho.
Las cifras detrás de sección hero
La página tiene más cifras de las que parece. Las que una reconstrucción debe conservar son estas: pasos de espaciado de 18px y transiciones de 1000ms; el resto puede moverse. Nada de este tipo de sección hero depende de un valor por defecto.
Qué cambiar primero en VEX Ventures
Empieza por el texto, no por el color. Reescribe “We back visionaries and craft ventures that define what comes next” como una sola frase sobre tu producto y colócala en Inter al tamaño que usa el brief. Sustituir es más barato que componer, y de eso se trata.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de VEX Ventures?
El brief capturado ocupa 5.051 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 VEX Ventures depende de React y Tailwind CSS?
VEX 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.
¿Puedo usar VEX Ventures en un proyecto de cliente?
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 800x603.
