À propos de ce modèle
Mind-Body Healing est un exemple de landing page santé, construit à partir d’un seul brief écrit, et cette page documente ce brief. « Holistic wellness. Transformative results » est la ligne que la mise en page doit porter. La palette est indigo sourd #D1C4E9 en fond et magenta #AD4A80 pour les accents, composée en Inter. 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 limite à 500ms de transitions et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. C’est la référence qu’il faut pour un design de landing page destiné à un produit de santé ou de bien-être, quand le premier écran doit sembler intentionnel.
Conçu pour
- Des équipes Studio qui briefent un build et cherchent un cadre 1468x1080 pour avoir une matière sur laquelle réagir.
- Ce design de landing page sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte santé peut porter 6,8s de vidéo en boucle.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 5 232 caractères comme point de départ.
Ce qui est inclus
- Une ligne, aucun tiroir. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Inter pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #AD4A80 est le seul élément de la barre à porter du gras. Dessinez l’état replié avant d’ajouter un sixième lien.
- Rien n’est hérité ici. Le brief fixe des sections de 100vh et des transitions de 500ms et laisse le reste à l’arrangement, l’inverse d’une échelle qui grandit toute seule. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition.
- Un seul média porte l’ambiance. Le clip tourne 6,8s en 1468x1080 et boucle sans coupe visible, il se lit donc comme une surface et non comme une séquence filmée. La boucle est assez courte (6,8s) pour que l’œil la lise comme une texture et non comme une timeline.
- Une barre de navigation discrète. Si votre page compte plus de sections, regroupez-les au lieu d’élargir la barre. La référence a été capturée en 1468x1080.
Animation et interaction
Une ambiance sans bibliothèque de scroll
Le mouvement d’ambiance vient de la boucle de 6,8s en 1468x1080 et non d’effets de scroll, ce qui garde la page calme et le texte lisible. Parce qu’il est en sourdine, la boucle peut tourner sous le texte sans concurrencer le son ni l’attention. Tournez ou exportez en 1468x1080 ou plus large.
Des durées en millisecondes
Une seule durée couvre les interactions (500ms), et c’est ce qui fait que survol et pression se lisent comme un seul système. Les états de focus utilisent la même durée que le survol, donc le retour au clavier et à la souris est identique.
Le réagencement de landing page
Il n’y a pas de design mobile séparé à maintenir, car la section est tenue à 100vh et la navigation se replie en menu mobile, et la même hiérarchie traverse les deux. L’ordre est la dernière chose à changer.
Ce qui fonctionne dans landing page
La plupart des pages santé échouent par accumulation, plus de sections, plus de dégradés, plus de promesses. Mind-Body Healing fait l’inverse. La page le dit sans détour, « Holistic wellness. Transformative results ». La composition reste sur indigo sourd #D1C4E9 avec magenta #AD4A80 pour les actions, ce qui suffit à paraître délibérée. Elle donne à un lecteur santé le chemin le plus court vers l’offre.
Lire Mind-Body Healing comme une spécification
S’engager sur des sections de 100vh et des transitions de 500ms échange de la souplesse contre de la répétabilité. C’est tout l’intérêt de la référence, la même page dans une autre marque, sans nouvelle série d’estimations. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Questions fréquentes
Le prompt de Mind-Body Healing est-il une spécification aboutie ou un simple point de départ?
Comptez 5 232 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.
Faut-il React et Tailwind CSS pour reconstruire Mind-Body Healing?
La fiche indique React et Tailwind CSS pour la provenance, parce que Mind-Body Healing 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.
Comment se comportent les transitions de 500ms dans Mind-Body Healing?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 500ms. Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
