Sobre esta plantilla
Lee DesignPro Academy como especificación de sección hero: los valores se escribieron antes de construir la página. La paleta es negro #000000 de base, blanco #FFFFFF para la tipografía y turquesa #64CEFB para los acentos, con la tipografía Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 800x569 antes de escribir código. Esta referencia es para una marca de educación o comunidad que quiere la primera pantalla resuelta antes de empezar a construir.
Pensado para
- Pensado para un fundador en solitario que saca un único diseño de sección hero para una marca de educación o comunidad y no tiene ningún sistema de diseño detrás.
- Quien le pase el brief de sección hero a un modelo usará el prompt de 3.038 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 DesignPro Academy.
Qué incluye
- La navegación es fina a propósito. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #64CEFB, todo al paso de tipo más pequeño del brief. Los enlaces se componen a un tamaño menor que la marca, y la acción en #64CEFB es el único elemento de la barra con peso.
- Dos tipografías, papeles claros. La tipografía es Inter, y el brief asigna un papel a la fuente en lugar de mezclar por variedad. El peso, el interletraje y los pasos de tamaño están especificados, así que la jerarquía sobrevive a una sustitución. El paso de pie de foto es lo bastante pequeño para situarse bajo una cifra sin alterar el ritmo de la página. No añadas un tamaño sin función.
- Una barra de navegación que no estorba. Los estados de foco y hover están definidos para cada enlace, no heredados del navegador. Prueba la barra sobre tus propios medios antes de darle un fondo.
- La escala es el estilo. El texto de interfaz se queda en una sola tipografía, por lo que la página nunca mezcla dos voces al mismo tamaño.
Movimiento e interacción
Respuesta en los controles
Solo los controles responden al puntero (estados hover en los botones y los enlaces y no en todas las tarjetas), así que la página se siente viva sin convertir cada elemento en un objetivo. Como los estados son simples, se portan a cualquier sistema de componentes. Mantén pequeña la capa interactiva.
Movimiento que no estorba
Aquí no hay librería de scroll: la composición de 800x569 se queda quieta y solo se mueven los elementos que responden a ti. La composición se queda quieta, así que la jerarquía tiene que sostener la página, y lo hace.
Por qué esta composición funciona para educación
Donde una plantilla llena la primera pantalla de módulos, este tipo de sección hero usa navegación, la insignia de anuncio y el clip de fondo y se detiene. La diferencia se ve en un marco de 800x569: nada se rellena para ocupar espacio. DesignPro Academy enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Cómo ordena DesignPro Academy la primera lectura
Lee la primera pantalla de una pasada y la oferta ya está clara: navegación, la insignia de anuncio y el clip de fondo llegan en secuencia, con un marco de 800x569 de por medio en lugar de separadores decorativos. Quien busca educación recibe la oferta antes que las opciones.
Las cifras detrás de sección hero
Una captura te dice cómo se ve la página; el brief te dice por qué. Con un marco de 800x569 se cierra la distancia entre las dos. Nada de este tipo de sección hero depende de un valor por defecto.
Preguntas frecuentes
¿Cuánto ocupa el prompt que hay detrás de DesignPro Academy?
El brief capturado ocupa 3.038 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.
¿Necesito React y Tailwind CSS para recrear DesignPro Academy?
DesignPro Academy 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 DesignPro Academy 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 800x569.
