Sobre esta plantilla
Sentinel AI es una referencia de trabajo para un producto de IA o SaaS: el desglose de sección hero, con la maquetación medida y lista para recrear. El titular de la propia página dice “We implement security correctly”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es negro #000000 de base y verde apagado #8EB992 para los acentos, y la página está compuesta en Sora. Se entrega como React y Tailwind CSS, y la captura se fija a 800x594 antes de escribir código. El movimiento se limita a transiciones de 0.7s y cubic-bezier(0.16, 1, 0.3, 1). Tenlo abierto mientras escribes: el brief de 5.940 caracteres es la parte que se traslada a tu propia página.
Pensado para
- 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 Sentinel AI.
- Los desarrolladores front-end que hereden un archivo de Figma usarán #000000 y #8EB992 para comprobar que la paleta sobrevivió al traspaso.
- Pensado para diseñadores que prefieren reajustar #8EB992 antes que rehacer el diseño de sección hero desde la cuadrícula.
Qué incluye
- Fila superior, una acción. La navegación es una tira fina y no una banda: marca a la izquierda, enlaces hacia el centro-derecha y una acción en #8EB992, todo en la capa superior de sección hero y sin fondo propio. Los enlaces se componen a un tamaño menor que la marca, y la acción en #8EB992 es el único elemento de la barra con peso.
- Medido contra el viewport. El brief nombra las cifras: pasos de espaciado de 20px, transiciones de 0.7s y easing cubic-bezier(0.16, 1, 0.3, 1). Por eso la composición se sostiene, porque no hay ningún paso de espaciado inventado entre el tipo y el marco. Un remontaje que da esos números se parece a la referencia sin más ajustes. Verifica un remontaje contra los mismos números.
- Una tipografía, usada con disciplina. Los pasos de tamaño y el interletraje del brief son los que dan el tono: Sora a un tamaño display cerrado y una caída clara hasta el texto de apoyo. Las cifras comparten la tipografía de interfaz, así estadísticas y etiquetas pertenecen al mismo sistema.
- La barra sigue la cuadrícula. La fila gasta el contraste en un solo punto: la acción #8EB992, con la marca y los enlaces retenidos sobre el color del texto. Una superposición móvil toma el relevo por debajo del breakpoint de tableta.
Movimiento e interacción
Todo el presupuesto de animación
El movimiento de los controles es corto y repetible: 0.7s en cada cambio de estado. El easing se especifica junto a la duración (0.7s), así que una reconstrucción no puede colar otra sensación sin avisar.
Hover, pero con moderación
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 interactivos no mueven la maquetación, así que nada salta bajo el puntero. Unos pocos estados fiables valen más que una lista larga de efectos.
Las cifras detrás de sección hero
La mayoría de las referencias muestra el resultado y se guarda las cifras. Esta lo invierte: publica pasos de espaciado de 20px, transiciones de 0.7s y easing cubic-bezier(0.16, 1, 0.3, 1) junto a la página, para que el resultado se pueda reproducir y no aproximar. Nada de este tipo de sección hero depende de un valor por defecto.
El orden detrás de sección hero
La atención se canaliza en lugar de dispersarse. “We implement security correctly” hace ese trabajo desde el primer fotograma. El ojo aterriza primero en la línea de display, después en el texto de apoyo y por último en la acción. La prueba social, cuando aparece, se queda en una franja o una fila y no en un muro de testimonios. Esa secuencia es el diseño. Quien busca SaaS recibe la oferta antes que las opciones.
El brief de SaaS se sostiene
Sentinel AI es la referencia de sección hero para un producto de IA o SaaS, y responde al problema que ese público tiene de verdad. La paleta se mantiene disciplinada (negro #000000 y verde apagado #8EB992) y el tipo se compone en Sora, así que nada de la composición depende de una tendencia prestada. Cuando redactas el brief de un desarrollo, esta es la parte que merece copiarse: una sola promesa a tamaño de display y el detalle de apoyo por debajo. Sentinel AI enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Preguntas frecuentes
¿Qué contiene en realidad el brief que hay detrás de Sentinel AI?
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 800x594. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿Necesito React y Tailwind CSS para recrear Sentinel AI?
Sentinel AI 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.
¿De dónde sale el diseño de Sentinel AI?
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 800x594.
