Sobre esta plantilla
FAQ CTA es una referencia de trabajo para un producto de salud o bienestar: el desglose de bloque de CTA, con la maquetación medida y lista para recrear. Abre con “Send Money Worldwide at the Best Rates” y le da el marco a esa línea en lugar de encogerla en una tarjeta. El esquema de color es blanco #F0F0F0 de base y rojo brillante #FF4B2B para los acentos, y la página está compuesta en Inter. 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 6.5s. Parte del brief capturado y ajusta la composición de bloque de CTA en lugar de empezar de cero.
Pensado para
- Si la referencia solo es un punto de partida, los diseñadores pueden conservar un marco de 640x468 y rehacer el resto del diseño de bloque de CTA.
- Pensado para un fundador en solitario que saca un único diseño de bloque de CTA para un producto de salud o bienestar y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de bloque de CTA a un modelo usará el prompt de 9.456 caracteres como punto de partida.
Qué incluye
- La barra sigue la cuadrícula. 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 #FF4B2B, todo en la capa superior de bloque de CTA y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #FF4B2B es el único elemento de la barra con peso.
- Medido, no estimado a ojo. Los tamaños se leyeron del render en 640x468: pasos de espaciado de 10px y transiciones de 6.5s. Cada valor responde a una función: un paso de tipo, un hueco, un radio o una transición.
- Cada tipo con una función. La línea display se compone en Inter a un tamaño que fija el brief, lo que convierte el titular en un elemento de composición y no en un párrafo. Sustituir la fuente es posible, pero las proporciones tienen que sobrevivir al cambio. Comprueba la escala en gris.
- Fila superior: marca, enlaces y acción. La barra son unos pocos elementos, así que se reconstruye sin librería de componentes. La captura de la referencia es de 640x468.
Movimiento e interacción
El lienzo sostiene la primera pantalla
Un lienzo WebGL es el único espectáculo de la página, y la interfaz está colocada para no competir con él. La escena se dibuja al tamaño de su contenedor, así que no depende de una resolución de render fija.
Puntero solo donde ayuda
Solo los controles responden al puntero (estados hover en los botones y los enlaces y no en todas las tarjetas y pestañas o un acordeón que intercambia contenido en el sitio), así que la página se siente viva sin convertir cada elemento en un objetivo. Los estados de pulsación están especificados igual que el hover, así que un toque confirma lo mismo que un clic. No animes la maquetación en el hover.
Qué cambiar primero en FAQ CTA
La sustitución directa tiene un límite: si tu producto necesita otra jerarquía, pasos de espaciado de 10px y transiciones de 6.5s se resistirán. En ese caso cambia primero el orden y después los valores. Compón el texto nuevo al mismo tamaño de display y vuelve a comprobar el contraste antes de añadir nada.
El reflujo de bloque de CTA
El brief describe qué cambia en cada ancho (hay una rama de movimiento reducido), así que la versión móvil es una decisión y no un ajuste forzado. El contraste se mantiene en el acento #FF4B2B sobre el medio, y el vídeo va silenciado y en línea. El reflujo mantiene la acción al alcance en cualquier ancho.
El acierto de bloque de CTA
Una pantalla significa una decisión para quien lee, y ese es el coste de esta maquetación: todo lo demás baja por debajo de la primera pantalla. El brief enuncia pasos de espaciado de 10px y transiciones de 6.5s para que las secciones de abajo mantengan el mismo ritmo. Da a quien lee páginas de salud el camino más corto y honesto hasta la oferta.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de FAQ CTA?
El brief capturado ocupa 9.456 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.
¿Puedo reconstruir este diseño de bloque de CTA de FAQ CTA con otro stack?
FAQ CTA 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 FAQ CTA está animado?
El movimiento se especifica con el mismo detalle que la maquetación: los cambios de estado se asientan en el rango de 6.5s. Traslada primero la composición y después los tiempos, porque igualarlos es más fácil cuando la estructura ya se sostiene.
