À propos de ce modèle
Lisez AI Trip Planner comme une spécification de section tarifs, dont les valeurs ont été écrites avant la construction de la page. Elle ouvre sur « Where will you go next? » et donne à cette ligne tout le cadre au lieu de la réduire à une carte. La couleur se réduit à blanc #FAFAFA en fond et noir #0A0A0A pour le texte, composée en Geist. La référence est construite avec React et Tailwind CSS, et les décisions de mise en page sont énoncées indépendamment de cette stack. L’animation se cantonne à un fond vidéo en boucle. Prenez-la lorsque l’ordre de section tarifs doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Reprenez le cadre 1470x1080 et une typographie de 15px à 40px et des pas d’espacement de 15px de ce design de section tarifs avant tout le reste.
- Cette composition est prévue pour les studios qui doivent expliquer à un client le comportement à 760px sans construire de prototype.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de section tarifs comme le motif que toutes les autres pages recopient.
Ce qui est inclus
- Rangée du haut, une action. La barre tient sur une rangée de texte et une action, mesurée à une typographie de 15px à 40px et des pas d’espacement de 15px pour se lire comme un filet et non comme un bandeau. Sous 760px, les liens se replient au lieu de passer sur une seconde ligne.
- Un seul clip fait le travail. La vidéo occupe le calque inférieur de la composition 1470x1080, la typographie est disposée au-dessus, sans rien entre les deux. La boucle est assez courte (6s) pour que l’œil la lise comme une texture et non comme une timeline. Exportez en 1470x1080 ou plus large pour garder un cadrage honnête.
- Une pastille pour la seule nouveauté. Un badge, un message. La pastille se place au-dessus du titre en Geist au plus petit palier, et rien d’autre ne vient concurrencer cette position. Il n’y a qu’une annonce, c’est ce qui donne au badge sa valeur d’information.
- Les chiffres au corps display. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer section tarifs en liste de fonctionnalités. Aucun séparateur à l’intérieur de la rangée, seul l’espacement sépare les chiffres.
Animation et interaction
Le survol là où il sert
Seuls les contrôles réagissent au pointeur (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc la page paraît réactive sans transformer chaque élément en cible. Les états sont nommés dans le brief, donc la page ne dépend pas d’une bibliothèque d’effets de survol.
Une boucle, pas une timeline
Le mouvement d’ambiance est un clip de 6s en 1470x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention.
Comment AI Trip Planner ordonne la première lecture
Ici, l’ordre est le design, car la séquence de la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes met l’offre avant la preuve, et l’écart entre eux tient à une typographie de 15px à 40px et des pas d’espacement de 15px. Un lecteur voyage reçoit l’offre avant les options.
Ce qui fonctionne dans section tarifs
Comparé à un hero de template, la différence tient à ce qui manque. Pas de grille de cartes, pas de carrousel, pas de second appel à l’action, seulement la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes, avec une typographie de 15px à 40px et des pas d’espacement de 15px comme référence de taille. Elle donne à un lecteur voyage le chemin le plus court vers l’offre.
Par où commencer dans AI Trip Planner
Quand vous intégrez vos propres médias, gardez le cadrage et l’ordre des calques. Le média est une boucle de 6s en 1470x1080. C’est ce placement qui garde le texte lisible. Le sujet est la partie qui doit changer.
Questions fréquentes
Que contient réellement le brief derrière AI Trip Planner?
Comptez 6 398 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Comment cette fiche de AI Trip Planner est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 6 398 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Faut-il React et Tailwind CSS pour reconstruire AI Trip Planner?
La fiche indique React et Tailwind CSS pour la provenance, parce que AI Trip Planner 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.
