Sobre esta plantilla
Antes de rehacer cada sección hero para una marca de educación o comunidad, lee CodeNest Coding Platform: la composición y la especificación que hay detrás están aquí. La paleta es negro #000000 de base y verde #5ED29C para los acentos, con la tipografía Instrument Serif. Se entrega como React y Tailwind CSS, y la captura se fija a 800x576 antes de escribir código. Tómalo como el brief de sección hero para una marca de educación o comunidad que tiene que aguantar una reconstrucción, no solo un primer vistazo.
Pensado para
- Empieza por pasos de espaciado de 50px y deja que la paleta venga después, porque el espaciado es lo que hace legible este diseño de sección hero.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 2.581 caracteres como punto de partida.
- 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 CodeNest Coding Platform.
Qué incluye
- Una barra sin nada de más. Marca, enlaces y la acción #5ED29C comparten una línea base, y eso es lo que evita que una fila fina parezca accidental. Los enlaces se componen a un tamaño menor que la marca, y la acción en #5ED29C es el único elemento de la barra con peso. Mantén la fila en una sola línea.
- Números que llegan al montaje. El brief nombra las cifras: pasos de espaciado de 50px. Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. El tipo y la maquetación comparten los mismos pasos, así que nada se desvía cuando se sustituye uno de los dos.
- Aquí se escanea, no se lee. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en Instrument Serif, dispuestos para que el ojo avance en horizontal y no en vertical. El orden de los paneles es el orden de lectura, así que nada depende de señales de posición.
- Primero el texto, después el adorno. La composición de sección hero está construida para que el texto llegue antes que nada: el tipo lleva la jerarquía, el marco de 800x576 sujeta la composición y los valores de apoyo se mantienen callados. La página es una sola composición a 800x576, y por eso se sostiene cuando cambia el texto.
Movimiento e interacción
Interacción contenida y local
Cada elemento interactivo hace una sola cosa (estados hover en los botones y los enlaces y no en todas las tarjetas), y eso mantiene los estados previsibles. Los estados interactivos no mueven la maquetación, así que nada salta bajo el puntero.
Estático a propósito
Esta se entrega como composición estática en 800x576, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El brief no incluye ninguna librería de animación, lo que mantiene pequeña la reconstrucción. No hacen falta líneas de tiempo de scroll.
Qué se sostiene para Educación y comunidad
La afirmación se hace una sola vez, en tamaño de display. En esta clase de sección hero todo lo demás se ordena alrededor de esa línea: navegación, el titular, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo, y ninguna segunda promesa compite por la primera lectura. CodeNest Coding Platform enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
El orden detrás de sección hero
Si pones tu propio texto en este tipo de sección hero, la secuencia se mantiene, porque los elementos no son intercambiables: navegación, el titular, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo cumplen una función propia. Quien busca educación recibe la oferta antes que las opciones.
El reflujo de sección hero
Este tipo de sección hero se compone a 800x576 y luego se recompone para anchos estrechos: la navegación se pliega en un menú móvil, así que la versión de móvil es una decisión y no un apretujón. No se elimina nada importante en anchos estrechos.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de CodeNest Coding Platform?
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 800x576. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Cuánto de CodeNest Coding Platform depende de React y Tailwind CSS?
CodeNest Coding Platform 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 publicar una página reconstruida a partir de CodeNest Coding Platform sin acreditar nada?
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 800x576.
