À propos de ce modèle
Sentinel AI résout le problème de section hero pour un produit IA ou SaaS à partir d’un seul brief capturé. La page affiche son propre titre, « We implement security correctly », et la composition est construite autour de ces mots exacts. La couleur se réduit à noir #000000 en fond et vert sourd #8EB992 pour les accents, composée en Sora. La livraison est en React et Tailwind CSS, capturée en 800x594 pour que le cadre soit fixé avant la première ligne de code. La page s’en tient à 0.7s de transitions et cubic-bezier(0.16, 1, 0.3, 1). Gardez-la ouverte pendant la rédaction, car le brief de 5 940 caractères est la partie qui se transfère à votre page.
Conçu pour
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de Sentinel AI.
- Cette page est pensée pour les fondateurs qui ont choisi #8EB992 et rien décidé d’autre sur le design de section hero.
- Si votre équipe fait déjà tourner un design system, ce design de section hero est le cas d’usage pour dépenser sa seule couleur saturée sur #8EB992.
Ce qui est inclus
- Rangée du haut, une action. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #8EB992, dimensionnée pour rester discrète face au reste de la page. Une surcouche mobile prend le relais sous le breakpoint tablette. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #8EB992 est le seul élément de la barre à porter du gras.
- Des tailles fixées par le brief. Chaque mesure du brief est un nombre que vous pouvez remesurer, des pas d’espacement de 20px, des transitions de 0.7s et un easing cubic-bezier(0.16, 1, 0.3, 1). Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu. Gardez les valeurs nommées quand vous portez la page.
- La typographie fait le style. La ligne display est composée en Sora à une taille fixée par le brief, le titre devient donc un élément de composition et non un paragraphe. Les chiffres partagent la fonte d’interface, statistiques et libellés appartiennent donc au même système.
- Une barre sans superflu. La barre se pose sur la composition 800x594 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Rythme court, timings cohérents
Les contrôles répondent en 0.7s, assez vite pour que la page réagisse dès qu’on la touche, et non après. L’easing est spécifié avec la durée (0.7s), donc une reconstruction ne peut pas substituer discrètement une autre sensation.
Le pointeur là où il aide
Les états sont gérés composant par composant (des états de survol sur les boutons et les liens plutôt que sur chaque carte) plutôt que par une couche d’animation globale. Les états viennent de la palette de la page et non d’un défaut de composant. Quelques états fiables valent mieux qu’une longue liste d’effets.
Lire Sentinel AI comme une spécification
Chaque relation de cette page est une valeur vérifiable, des pas d’espacement de 20px, des transitions de 0.7s et un easing cubic-bezier(0.16, 1, 0.3, 1). C’est ce qui rend Sentinel AI reconstructible et pas seulement reproductible. Rien dans le design de section hero ne dépend d’une valeur par défaut.
L’ordre de section hero
Comparez le haut de cette page avec un premier écran SaaS classique. Les deux portent un titre et une action, mais ici l’ordre de la navigation, la ligne de statistiques et la liste de fonctionnalités est fixe au lieu d’un affrontement au même poids. Un lecteur SaaS reçoit l’offre avant les options.
Ce qui fonctionne dans section hero
Quand vous briefez pour section hero SaaS, le plus difficile est de décider ce que le premier écran refuse de dire. Sentinel AI y répond d’avance, une ligne d’affichage et la navigation, la ligne de statistiques et la liste de fonctionnalités derrière elle. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Questions fréquentes
Que recevez-vous en copiant le brief de Sentinel AI?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 800x594, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de Sentinel AI dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Sentinel AI a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Puis-je publier une page reconstruite d’après Sentinel AI sans mentionner la source?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 800x594.
