Sobre esta plantilla
Antes de rehacer cada sección hero para una agencia o un estudio, lee Digital Epoch: la composición y la especificación que hay detrás están aquí. El color se limita a blanco #F9FAFB de base, azul intenso #0A152D para la tipografía y azul intenso #0A1B33 para los acentos y la página se compone en Inter. Se entrega como React y Tailwind CSS, y la captura se fija a 800x589 antes de escribir código. Tenlo abierto mientras escribes: el brief de 4.594 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Equipos que construyen este tipo de sección hero para una agencia o un estudio y quieren el detalle medido (tipografía de 12px a 56px y pasos de espaciado de 12px) en lugar de una captura que copiar.
- 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 Digital Epoch.
- Los responsables de diseño que comparen referencias de agencia usarán blanco #F9FAFB y azul intenso #0A1B33 como desempate.
Qué incluye
- Navegación sin fondo propio. La fila superior reúne la marca, cuatro o cinco enlaces y una sola acción teñida de #0A1B33, dimensionada para no destacar frente al resto de la página. Los enlaces se componen a un tamaño menor que la marca, y la acción en #0A1B33 es el único elemento de la barra con peso. Si tu propia página tiene más secciones, agrúpalas en lugar de ensanchar la barra.
- Todas las medidas están escritas. El brief fija tipografía de 12px a 56px y pasos de espaciado de 12px y deja el resto a la disposición, que es lo contrario de una escala que crece sola. Cada valor se puede comprobar contra el prompt capturado, y eso hace que un remontaje sea verificable y no aproximado. Cambia el tema, no los pasos.
- Tarjetas sin bordes. La cuadrícula es la estructura: paneles del mismo tamaño, compuestos en Inter, dispuestos para que el ojo avance en horizontal y no en vertical. El espaciado entre paneles es un único valor, y eso es lo que evita que una cuadrícula densa parezca apretada.
- La barra sigue la cuadrícula. La barra es la parte más callada de la composición: marca, una fila corta de enlaces y una acción en #0A1B33, todo al paso de tipo más pequeño del brief.
Movimiento e interacción
Una marquesina marca el ritmo
Una marquesina recorre la composición en bucle infinito, compuesta en Inter. El elemento activo se marca con #0A1B33 y no con un cambio de tamaño.
Hover solo donde aporta
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. Los estados están nombrados en el brief, así que la página no depende de ninguna librería de efectos hover. Mantén pequeña la capa interactiva.
El acierto de sección hero
Cuando haces el brief de sección hero para un proyecto de agencia, lo difícil es decidir qué se niega a decir la primera pantalla. Digital Epoch lo responde de antemano: una línea de display y navegación, el titular, la fila de cifras, la cuadrícula de tarjetas y el clip de fondo detrás. Da a quien lee páginas de agencia el camino más corto y honesto hasta la oferta.
Qué cambiar primero en Digital Epoch
La composición es la parte reutilizable; el tema es tuyo. Cambia el titular, mantén la escala tipográfica (tipografía de 12px a 56px) y vuelve a probar el acento #0A1B33 sobre tu propio material. Si un elemento nuevo no ayuda a explicar la oferta ni el siguiente paso, su sitio está por debajo del pliegue. Tu acento tiene que superar la misma prueba de contraste que el de la referencia.
Leer Digital Epoch como especificación
Casi todas las decisiones de aquí son un valor que puedes comprobar: tipografía de 12px a 56px y pasos de espaciado de 12px. El medio es una imagen fija en 800x589. El tipo se queda en Inter, así que una sustitución tiene que mantener las mismas proporciones. 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 Digital Epoch?
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 800x589. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Por qué la ficha nombra React y Tailwind CSS?
Digital Epoch 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 Digital Epoch 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 800x589.
