Sobre esta plantilla
Antes de rehacer cada sección de preguntas frecuentes para un producto de IA o SaaS, lee Cortexa FAQ: la composición y la especificación que hay detrás están aquí. “How do I start the process of buying a home?” es la línea que la maquetación está pensada para sostener. Se entrega como React y Tailwind CSS, así que el conjunto de sección de preguntas frecuentes se puede trasladar a un proyecto sin traspaso de diseño. El presupuesto de movimiento se agota en transiciones de 400ms y un vídeo en bucle de fondo. Úsalo cuando tu sección de preguntas frecuentes necesite un orden decidido antes de añadir secciones nuevas.
Pensado para
- Este diseño de sección de preguntas frecuentes sirve a equipos que tienen que justificar un marco de 1826x1302 ante alguien que no estaba en el kickoff.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de sección de preguntas frecuentes como patrón que copian las demás páginas.
- Pensado para responsables de producto que necesitan acotar el diseño de sección de preguntas frecuentes a un sprint y no añadir material nuevo.
Qué incluye
- Una escala para tipo y marco. Los tamaños se citan, no se heredan: pasos de espaciado de 15px y transiciones de 400ms. Cambia la tipografía o el texto y esas relaciones se mantienen. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo.
- Medios sin superposición. La primera pantalla es un único clip a 1826x1302, y todo lo demás se dispone encima. Un fotograma de póster a 1826x1302 sostiene la composición cuando no hay reproducción automática, así que la maquetación nunca se desmorona.
- Un campo, una acción. Aquí solo hay una decisión: rellenar el formulario o marcharse. Todo lo demás de la pantalla sostiene esa decisión. Los estados de error y de foco están especificados y no se dejan al navegador. Especifica el estado de foco.
- Todas las medidas están escritas. El espaciado se cita igual (pasos de espaciado de 15px y transiciones de 400ms), no como una escala que crece sola.
Movimiento e interacción
Una superficie interactiva pequeña
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. El hover y el foco están especificados juntos, así que el puntero y el teclado reciben la misma información. No animes la maquetación en el hover.
Duraciones cortas y nombradas
El hover, la pulsación y el foco se resuelven en 400ms, que es lo que hace que la interfaz se sienta inmediata. El tiempo citado cubre los cambios de estado, así que la respuesta es la parte especificada del movimiento.
El brief de SaaS se sostiene
Un hero genérico y este tipo de sección de preguntas frecuentes usan las mismas piezas. Aquí el orden lo dan el formulario y todo se mide con pasos de espaciado de 15px y transiciones de 400ms, así que la pantalla se lee como una secuencia y no como un contenedor. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
El orden detrás de sección de preguntas frecuentes
Aquí el orden es el diseño: el formulario se colocan para que la oferta llegue antes que la prueba, y la distancia entre ambas la marcan pasos de espaciado de 15px y transiciones de 400ms. Quien busca SaaS recibe la oferta antes que las opciones.
El reflujo de sección de preguntas frecuentes
Prueba este tipo de sección de preguntas frecuentes a 1826x1302 y luego a ancho de móvil: el mismo orden aguanta, con la escala es fluida en lugar de escalonada. La reproducción automática y el movimiento se tratan con honestidad, así que la página sigue comunicando cuando no están disponibles.
Preguntas frecuentes
¿Cómo está organizada esta ficha de Cortexa FAQ?
Todo lo que se cita en la página procede del brief capturado de 4.955 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Qué me llevo cuando copio el brief de Cortexa FAQ?
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 1826x1302. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Puedo reconstruir este diseño de sección de preguntas frecuentes de Cortexa FAQ con otro stack?
La referencia está construida en React y Tailwind CSS, pero la maqueta no depende de esa decisión: el espaciado, la escala tipográfica y los valores de movimiento pasan a lo que ya uses.
