À propos de ce modèle
Church Community est un exemple de landing page éducation, construit à partir d’un seul brief écrit, et cette page documente ce brief. La page affiche son propre titre, « Take a step toward the light », et la composition est construite autour de ces mots exacts. La palette se limite à orange sourd #5A4C41 en fond, blanc #FFFFFF pour le texte et orange sourd #F1E5C6 pour les accents, et la typographie est Manrope. La livraison tient en React et Framer Motion, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se résume à un fond vidéo en boucle. Empruntez la structure et pas le sujet, car les valeurs de landing page passent à votre marque sans modification.
Conçu pour
- Si la référence n’est qu’un point de départ, les designers peuvent garder un cadre 1448x1080 et reconstruire le reste du design de landing page.
- Les responsables marketing qui héritent de ce design de landing page utiliseront des pas d’espacement de 36px pour vérifier qu’une réécriture a gardé l’échelle.
- Des responsables marketing produit qui ont besoin qu’une landing page reste lisible avec 5,5s de vidéo en boucle derrière le texte.
Ce qui est inclus
- Les liens avant l’action. La barre porte le nom de marque, les liens de la section et un bouton en #F1E5C6, mesurée à des pas d’espacement de 36px pour ne jamais devenir un second header. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #F1E5C6 est le seul élément de la barre à porter du gras.
- La vidéo est le fond, pas un panneau. Le cadre 1448x1080 est rempli par une seule boucle qui tourne derrière le texte et ne réclame aucun contrôle. La boucle est assez courte (5,5s) pour que l’œil la lise comme une texture et non comme une timeline.
- L’interlettrage se resserre. Les fontes reçoivent des rôles au lieu d’être mélangées, Manrope porte à la fois le display et l’interface. Les graisses sont spécifiées par rôle, la hiérarchie ne dépend donc pas d’une approximation au moment du build. Gardez les paliers de taille même si vous changez de fonte.
- Un bandeau de nav volontairement fin. La barre se pose sur la composition 1448x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
La boucle fait l’ambiance
Le clip de fond tourne 5,5s en 1448x1080 sur une boucle sans fin, en sourdine et en inline, donc la page reste en mouvement pendant que l’attention du lecteur est sur le texte. Aucune bibliothèque de scroll n’est nécessaire, parce que le seul mouvement d’ambiance est le média lui-même. La boucle est rognée en cover, ce qui veut dire que la composition ne dépend pas d’un format d’image précis. Tournez ou exportez en 1448x1080 ou plus large.
Presque aucune animation
Celle-ci est livrée comme une composition fixe en 1448x1080, donc la hiérarchie doit tenir sans animation, et elle tient. Le brief ne contient aucune bibliothèque d’animation, ce qui garde la reconstruction légère. L’immobilité est un choix valable.
Les chiffres derrière landing page
On ne règle pas une composition à l’œil quand deux personnes la reconstruisent. Le brief tranche en énonçant des pas d’espacement de 36px une seule fois. Rien dans le design de landing page ne dépend d’une valeur par défaut.
Adapter landing page à votre marque
Changez d’abord le texte et les médias, la couleur ensuite, la mise en page en dernier. Le cadre 1448x1080 et l’échelle Manrope tiennent la page, faites donc vos substitutions autour d’eux plutôt qu’à travers eux. Gardez le cadre et l’échelle, le sujet est la partie qui doit changer.
Les timings derrière landing page
Un pack d’animations prêtes à l’emploi aurait été plus rapide à livrer. Le brief spécifie plutôt un effet machine à écrire et une boucle média de 5,5s, et c’est pourquoi la page semble conçue plutôt que mise en scène. Rien ne s’anime pour lui-même dans le design de landing page.
Questions fréquentes
Pourquoi le prompt de Church Community n’est-il pas reproduit ici?
Tout ce qui est cité sur la page provient du brief capturé de 5 380 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Le prompt de Church Community est-il une spécification aboutie ou un simple point de départ?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1448x1080, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je reconstruire ce type de landing page de Church Community avec une autre stack?
La référence se trouve avoir été construite en React et Framer Motion, mais ce choix n’engage rien dans la mise en page. Les espacements, la typographie et les valeurs d’animation se transposent dans la stack que vous utilisez déjà.
