Patrons

Patrons de page

Les assemblages qui composent les pages : header, menus déroulants, hauts de page, cartes de tarifs, FAQ, pied de page et coquille de l’application.

Header

Monté par HomePublicLayout sur environ 30 pages : barre collante blanche, logo à gauche, navigation, langue, connexion et un CTA.

Header du site

Site

Aperçu vivant (reproduction fidèle)

Ember.

Solutions
Ressources
Tarifs
À propos

FRSe connecterCommencer gratuitement

Anatomie et cotes

hauteur 64 px, 72 px dès lgsymbole 32 pxliens gap-6 (24 px)CTA h-11 lg:h-10burger h-11 w-11 (44 px)

Anatomie du header
Élément	Valeur
Barre	sticky top-0 z-40 bg-white ; bordure basse transparente, puis neutral-200 après 24 px de défilement, transition 150 ms ; pas de flou ; conteneur SITE_CONTAINER
Logo	symbole 32 px + « Ember. » en font-satoshi text-xl font-bold text-neutral-900
Navigation bureau (≥ 1 024 px)	gap-6 ; lien h-10 rounded-lg px-1 text-[15px] font-medium text-neutral-700, actif ou ouvert text-neutral-900 ; chevron ChevronDown h-4 w-4 text-neutral-500, rotate-180 ouvert
Soulignement	unique et glissant : h-0.5 rounded-full bg-ember-500 en 280 ms ; suit le survol, puis le menu ouvert, puis la page active (aria-current="page")
Droite	langue, « Se connecter » (h-10 px-1 text-sm font-medium text-neutral-700), CTA, burger h-11 w-11 rounded-lg + Menu ou X 20 px
Menu mobile	fixed inset-0 z-50 bg-white (role="dialog" aria-modal="true"), barre 64 px ; liens min-h-12 rounded-r-lg border-l-2 px-3 text-lg font-medium, page courante border-ember-500 ; accordéons grid-rows 280 ms ; secondaires min-h-11 text-[15px] text-neutral-600 ; pied : langues min-h-12, « Se connecter » min-h-12 rounded-xl border, CTA min-h-12
Accessibilité du menu mobile	piège à focus, Échap, défilement bloqué (html.mobile-menu-open, globals.css:31-43)

Menus déroulants

Le méga-menu du header : un panneau de 880 px, des colonnes d’entrées, une colonne de droite en neutral-50. Il fournit le style de panneau, d’entrée et la gestion clavier à réutiliser.

Méga-menu

Site

Aperçu vivant (reproduction fidèle)

Anatomie du méga-menu
Élément	Valeur
Panneau	absolute top-full z-50 w-[880px] max-w-[calc(100vw-2rem)] rounded-3xl border border-neutral-200 bg-white shadow-menu ; hauteur mesurée et animée 280 ms
Ouverture	au survol après 120 ms, fermeture après 200 ms ; clavier : Entrée, Espace, flèches, Début, Fin ; Échap ferme et rend le focus
Colonnes	surtitre text-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-500 ; entrée rounded-xl px-3 py-2.5 hover:bg-neutral-50, titre Satoshi 15 px 500 (survol text-ember-800), description 13 px text-neutral-600
Colonne de droite	300 px rounded-r-3xl bg-neutral-50 p-6 ; liens min-h-9 text-[14px] font-medium ; carte « dernière ressource » aspect-[16/10] rounded-2xl border
Menu de langue	bouton h-10 rounded-lg px-2 text-sm + Globe h-4 w-4 trait 2 ; menu w-44 rounded-xl border border-neutral-200, éléments menuitemradio min-h-9, coche text-ember-800

Hauts de page

L’accueil occupe la hauteur de l’écran ; les pages internes commencent par un titre, un chapeau et une action.

Hauts de page

Site

Aperçu vivant (page interne)

Un titre court et précis.

Le chapeau explique la page en deux lignes, sans jargon.

Commencer gratuitementDécouvrir

Hauts de page
Haut de page	Valeurs
Accueil	min-h-[calc(100svh-64px)] md:min-h-[calc(100svh-72px)] ; H1 centré dès md ; sous-titre mt-5 md:mt-7 ; composeur mt-8 md:mt-10
Page interne	SITE_H1_LARGE ; chapeau 17 puis 20 px ; pt-14 md:pt-20 ; la section suivante porte py-16 md:py-28
Rythme des sections	`SITE_SECTION_Y = py-16 md:py-28` (64 puis 112 px)
Bouton principal	pleine largeur sous 640 px : `SITE_CTA_WIDTH = w-full sm:w-auto`

Cartes de tarifs

Quatre plans en grille : Free, Starter, Pro, Max. Pro seul est mis en avant, par une bordure de 2 px et un fond ember-100. Il n’y a pas de badge « Recommandé ».

Cartes de tarifs

Site

Aperçu vivant (reproduction fidèle, sans prix ni ombre : aucune ombre derrière un bouton)

Free

Prix : Satoshi 56 px

Choisir

Fonctionnalités : icônes 18 px, trait 1,6.

Starter

Prix : Satoshi 56 px

Choisir

Fonctionnalités : icônes 18 px, trait 1,6.

Pro

Prix : Satoshi 56 px

Choisir

Fonctionnalités : icônes 18 px, trait 1,6.

Max

Prix : Satoshi 56 px

Choisir

Fonctionnalités : icônes 18 px, trait 1,6.

Anatomie d’une carte de tarif
Élément	Valeur
Grille	`md:grid-cols-2 xl:grid-cols-4`
Carte	rounded-3xl border hover:-translate-y-1 (280 ms) ; standard border-neutral-200 bg-neutral-200/60 xl:h-[770px] ; mise en avant border-2 border-ember-500 bg-ember-100 xl:-mt-6 xl:h-[794px]
Haut de carte	rounded-[calc(1.5rem-1px)] bg-white p-5 sm:p-6, sans ombre
Nom	`font-satoshi text-2xl font-bold`
Prix	Satoshi 56 px, tracking-[-0.045em], animation de défilement des chiffres ; « HT / mois » text-xs
Fonctionnalités	`icônes lucide size-[18px] stroke-[1.6] text-neutral-700`
Badge	seul badge : « N mois offerts »
CTA	Pro et Équipe avec surbrillance ; Free en text-sm avec anneau ember-700 ; secondaire border-neutral-300 bg-white hover:bg-neutral-50

FAQ

Un accordéon à ouverture exclusive, ouvrable par ancre, sans details ni summary.

FAQ

Site

Aperçu vivant (le vrai composant Faq)

1h. On va à l’essentiel, pas de slides interminables, pas de théorie. On travaille ensemble.

Anatomie de la FAQ
Élément	Valeur
Comportement	button aria-expanded + région inert ; une réponse à la fois ; ouvrable par ancre #…
Titre	`font-satoshi text-[32px] font-bold sm:text-4xl, centré`
Liste	`max-w-2xl border-t border-neutral-200`
Élément	`border-b border-neutral-200 scroll-mt-28`
Question	min-h-14 gap-5 py-5 font-satoshi text-[18px] font-medium leading-7, focus ring-inset ring-ember-700
Réponse	`pb-6 pr-10 text-[16px] leading-[1.65] text-neutral-600`
Chevron	`size-5, pivote`

Pied de page

Le pied de page habituel du site : une carte blanche posée sur le dégradé de fin de page. Le lien « Design system » est dans la colonne Ressources.

Pied de page

Site

Aperçu vivant (reproduction schématique)

Anatomie du pied de page
Élément	Valeur
Enveloppe	border-y border-neutral-200 bg-white avec HeroGradient closing et HomeFinalCta optionnel (désactivé sur /design : showFinalCta={false})
Carte	mx-3 mb-8 rounded-3xl border border-white bg-white shadow-footer md:mx-8 ; contenu max-w-[1440px] px-4 pb-6 pt-10 sm:px-6 lg:px-12 md:pt-14
Colonne marque	symbole 64 px, « Ember. Votre équipe IA pour entreprendre. » (Satoshi 24 px), « Retour en haut ↑ »
Colonnes	Produit, Solutions, Ressources, À propos de nous : md:grid grid-cols-4 gap-8, titres text-sm font-semibold, accordéons sur mobile, liens text-[15px] leading-6 text-neutral-600 hover:text-neutral-900
Réseaux	`h-11 w-11 rounded-full border border-neutral-200, icônes 20 px`
Langue	« Français / English », active `underline decoration-ember-500 underline-offset-4`
Bandeau légal	`text-xs text-neutral-500`

Lien Design system, colonne Ressources

{ label: tFooter('designSystem'), href: `/${locale}${LINKS.DESIGN_SYSTEM}` }

Coquille de l’app

Une barre du haut de 56 px, un rail à gauche qui se replie, et une zone de contenu grise.

Coquille de l’application

App

Aperçu vivant (reproduction fidèle à l’échelle)

Ember.

AccueilSecond CerveauFinance ta croissanceCréationLead intelligenceVisibilité

Barre du haut : 56 px

Contenu : bg-neutral-50

Anatomie de la coquille de l’app
Élément	Valeur
Racine	`flex h-[100dvh] overflow-hidden bg-white`
Barre du haut	`h-14 (56 px) border-b border-neutral-200 px-6`
Contenu	`bg-neutral-50`
Rail	w-[13.5rem] (216 px) déplié, w-20 (80 px) replié ; border-r border-neutral-200/70 bg-white/90 backdrop-blur-xl, transition de largeur 300 ms
Entrée de rail	min-h-11 gap-2.5 px-2.5 py-2 rounded-lg déplié, h-11 w-11 replié ; icône 18 px ; actif bg-ember-50 text-ember-800 + barre h-5 w-1 rounded-r-full bg-ember-500 ; repos text-neutral-600 hover:bg-neutral-100
Panneau des conversations	bg-neutral-50, 288 px par défaut (220 à 480, redimensionnable)
Avatar	`h-8 w-8 rounded-full bg-ember-600 text-xs font-semibold text-white`
Autres	barre de défilement de 8 px (.custom-scrollbar, .no-scrollbar) ; verre .glass bg-white/70 backdrop-blur-xl border border-neutral-200/50

Règle

bg-ember-50 text-ember-800, barre bg-ember-500.

Patrons de page

Header

Header du site

Aperçu vivant (reproduction fidèle)

Anatomie et cotes

Menus déroulants

Méga-menu

Aperçu vivant (reproduction fidèle)

Hauts de page

Hauts de page

Aperçu vivant (page interne)

Un titre court et précis.

Cartes de tarifs

Cartes de tarifs

Aperçu vivant (reproduction fidèle, sans prix ni ombre : aucune ombre derrière un bouton)

FAQ

FAQ

Aperçu vivant (le vrai composant Faq)

Pied de page

Pied de page

Aperçu vivant (reproduction schématique)

Coquille de l’app

Coquille de l’application

Aperçu vivant (reproduction fidèle à l’échelle)

Pour qui

Moments clés

Header

Aperçu vivant (reproduction fidèle)

Anatomie et cotes

Menus déroulants

Aperçu vivant (reproduction fidèle)

Hauts de page

Aperçu vivant (page interne)

Un titre court et précis.

Cartes de tarifs

Aperçu vivant (reproduction fidèle, sans prix ni ombre : aucune ombre derrière un bouton)

FAQ

Aperçu vivant (le vrai composant Faq)

Le live dure combien de temps ?

Dois⁠-⁠je déjà utiliser Ember ?

Pied de page

Aperçu vivant (reproduction schématique)

Coquille de l’app

Aperçu vivant (reproduction fidèle à l’échelle)