Sobre esta plantilla
Lee Aurex Finance como especificación de landing page: los valores se escribieron antes de construir la página. La paleta se queda en negro #000000 de base, blanco #FFFFFF para la tipografía y azul apagado #AFDDFF para los acentos, y el tipo es Manrope. Se entrega como React y Tailwind CSS, y la captura se fija a 1920x1410 antes de escribir código. El movimiento se queda en transiciones de 900ms, cubic-bezier(0.16, 1, 0.3, 1) y un vídeo en bucle de fondo. Cuando prepares el brief de cada landing page de fintech, parte de esta composición y sustituye el tema.
Pensado para
- Este diseño de landing page responde a quien construye y quiere saber qué controlan realmente tipografía de 12px a 68px y pasos de espaciado de 20px en la maquetación.
- Profesionales del marketing de producto que necesitan que cada landing page siga leyéndose con 6,5s de vídeo en bucle detrás del texto.
- Quien le pase el brief de landing page a un modelo usará el prompt de 29.337 caracteres como punto de partida.
Qué incluye
- Una barra de navegación que no estorba. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #AFDDFF, todo en la capa superior de landing page y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #AFDDFF es el único elemento de la barra con peso.
- Aquí nada se hereda. En la maquetación nada queda a la intuición: el brief cita tipografía de 12px a 68px, pasos de espaciado de 20px, transiciones de 900ms y easing cubic-bezier(0.16, 1, 0.3, 1) y el montaje tiene que dar esos valores. El brief declara valores y no proporciones, así la composición conserva sus relaciones cuando el texto cambia de longitud. Mide antes de ajustar.
- Medios detrás del texto. El clip dura 6,5s a 1920x1410 y se repite sin corte visible, por eso se lee como superficie y no como metraje. El bucle es lo bastante corto (6,5s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Aquí se escanea, no se lee. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en Manrope, dispuestos para que el ojo avance en horizontal y no en vertical. El espaciado entre paneles es un único valor, y eso es lo que evita que una cuadrícula densa parezca apretada.
Movimiento e interacción
Un bucle, no una secuencia
Un clip de 6,5s es toda la capa ambiente: se reproduce detrás del texto, da la vuelta sin corte visible y nunca reacciona al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco.
Rápido, pero deliberado
Los controles se resuelven en 900ms, lo bastante rápido para que la página responda al tocarla y no después. Los estados de foco usan el mismo tiempo que el hover, así que la respuesta de teclado y de puntero coincide. Una duración por comportamiento.
Hacer tuyo este tipo de landing page
Casi todo el mundo empieza por el color de acento. Empieza tú por la promesa: reescribe la línea de display y vuelve a probar azul apagado #AFDDFF contra tu propio material. Conserva el marco y la escala; el tema es la parte que debe cambiar.
Qué gana un producto fintech aquí
Si tu primera pantalla explica hoy tres cosas, esta es la versión que explica una. Aquí navegación, la insignia de anuncio, la fila de cifras, la cuadrícula de tarjetas y la lista de funciones se colocan en orden de lectura, con tipografía de 12px a 68px y pasos de espaciado de 20px marcando el ritmo. Da a quien lee páginas de fintech el camino más corto y honesto hasta la oferta.
El reflujo de landing page
La composición de escritorio se resuelve contra 1920x1410, y la maquetación estrecha está diseñada y no heredada: la navegación se pliega en un menú móvil. 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. La versión de móvil es una decisión, no un recurso de emergencia.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de Aurex Finance?
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 1920x1410. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de Aurex Finance depende de React y Tailwind CSS?
Aurex Finance 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.
¿Cómo trato los medios de Aurex Finance 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 1920x1410.
