Sobre esta plantilla
Church Community se capturó a 1448x1080 y se conserva como especificación, no como imagen de galería. El titular de la propia página dice “Take a step toward the light”, y la composición se construye alrededor de esas palabras exactas. El color se limita a naranja apagado #5A4C41 de base, blanco #FFFFFF para la tipografía y naranja apagado #F1E5C6 para los acentos y la página se compone en Manrope. La ficha nombra el stack que produjo la página (React y Framer Motion) en lugar de esconderlo. El brief gasta su presupuesto de movimiento en un vídeo en bucle de fondo. Cuando prepares el brief de cada landing page de educación, parte de esta composición y sustituye el tema.
Pensado para
- Diseñadores que necesitan los números antes que nada: pasos de espaciado de 36px, todo citado del brief.
- Los responsables de estudio que llevan varios proyectos a la vez usarán este diseño de landing page como patrón que copian las demás páginas.
- Pensado para responsables de producto que necesitan acotar el diseño de landing page a un sprint y no añadir material nuevo.
Qué incluye
- Una barra de navegación que no estorba. Los enlaces van en una sola línea y a un único tamaño, y la acción #F1E5C6 cierra la fila por la derecha, de modo que el ojo termina donde acaba la navegación. Los enlaces se componen a un tamaño menor que la marca, y la acción en #F1E5C6 es el único elemento de la barra con peso.
- Una escala para tipo y marco. La maquetación trabaja con valores absolutos y no con proporciones: pasos de espaciado de 36px. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos.
- Vídeo a marco completo, sin panel. El brief especifica el vídeo a 1448x1080 con un bucle de 5,5s, y cada elemento de texto se coloca contra ese marco. El bucle es lo bastante corto (5,5s) para que el ojo lo lea como textura y no como una línea de tiempo.
- El tipo fija la jerarquía. Aquí el tipo es el sistema de estilo: Manrope al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. La tipografía display se usa a un solo tamaño, por eso nunca compite consigo misma. Una tipografía, papeles claros.
Movimiento e interacción
El bucle hace el trabajo ambiente
El movimiento ambiente es un clip de 5,5s en 1448x1080, en bucle discreto detrás del texto y sin reaccionar al puntero. Como está silenciado, el bucle puede correr bajo el texto sin competir por el sonido ni por el foco. Graba o exporta a 1448x1080 o más ancho.
Estático a propósito
Aquí no hay librería de scroll: la composición de 1448x1080 se queda quieta y solo se mueven los elementos que responden a ti. Solo se mueven los elementos que responden al puntero. Deja el movimiento en los controles.
Leer Church Community como especificación
Esto es lo que hace reutilizable la referencia: pasos de espaciado de 36px. Nada queda en un valor por defecto, así que una sustitución que conserve esos números conserva la composición. Nada de este tipo de landing page depende de un valor por defecto.
Qué cambiar primero en Church Community
Compara esto con empezar de una página en blanco. Aquí el marco (1448x1080) y las cifras (pasos de espaciado de 36px) ya están decididos, así que el trabajo es sustituir y no componer. Sustituir es más barato que componer, y de eso se trata.
Los tiempos detrás de landing page
Cuenta los elementos animados y la lista es corta: un efecto máquina de escribir y un bucle de 5,5s. Nada se anima por gusto en este tipo de landing page.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Church Community?
El brief capturado ocupa 5.380 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.
¿Cómo está organizada esta ficha de Church Community?
Todo lo que se cita en la página procede del brief capturado de 5.380 caracteres y no de un texto redactado a posteriori. Por eso los números y la prosa concuerdan.
¿Cuánto de Church Community depende de React y Framer Motion?
La referencia está construida en React y Framer Motion, 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.
