Image de marque

Où se trouve la marque

La marque est définie dans des fichiers, pas dans le tableau de bord admin. Le site étudiant et le tableau de bord admin ont chacun leur propre copie : modifiez donc chaque application que vous livrez.

Le nom sur le site étudiant

Les chemins sont relatifs à frontend/.

L'adresse publique du site provient de NEXT_PUBLIC_SITE_URL, pas de ces fichiers.

• Paramètres du site étudiant et du tableau de bord admin

Le nom apparaît aussi dans les textes : la ligne de copyright du pied de page, le nom accessible du logo (brand.logoLabel dans messages/layouts), les pages d'accueil et « À propos », les pages de connexion et les pages légales. Trouvez chaque occurrence dans les deux langues :

grep -rn "Learnio" messages
grep -rn "ليرنيو" messages

• Une seule chaîne est écrite dans le code : le hashtag LearnioLMS dans src/components/ui/ShareModal.tsx.
• Les conditions d'utilisation et la politique de confidentialité dans messages/legal contiennent des coordonnées d'exemple (legal@learnio.com, privacy@learnio.com, une adresse à Dubaï). Remplacez-les par les vôtres avant la mise en production.

Le nom dans le tableau de bord admin

Tout se trouve dans BRAND_CONFIG, dans admin-dashboard/src/config/brand.config.ts. Les champs texte ont une valeur en et une valeur ar.

Chaque endroit qui nomme le produit lit BRAND_CONFIG : le renommer là renomme ensemble la barre latérale, la carte de connexion, les deux pieds de page et les titres des pages. Les fichiers de messages du tableau de bord admin ne contiennent pas le nom du produit : la phrase de la ligne de copyright est une traduction (layouts.footer.copyright) dans laquelle le nom est inséré depuis la configuration.

Fichiers du logo

Le plus simple est de remplacer chaque fichier par le vôtre, au même chemin et sous le même nom. Utilisez un PNG à fond transparent.

• Le site étudiant affiche un seul logotype sur les pages claires et sombres : choisissez donc un visuel lisible sur les deux.
• Dans le tableau de bord admin, les deux fichiers de thème sont choisis par --logo-bg-image dans src/styles/theme-variables.css. Ils sont livrés avec la même image.
• La copie de learnio-wordmark.png propre au tableau de bord admin n'est utilisée par aucune page.

Pour utiliser un fichier d'un autre nom dans le tableau de bord admin, faites pointer logo.icon de BRAND_CONFIG vers lui. Si votre visuel a une autre forme, mettez à jour la taille déclarée pour qu'il ne soit pas étiré : le width et le height de ASSETS dans src/components/ui/BrandLogo.tsx du site étudiant, et width={512} et height={474} dans src/layouts/dashboard/sidebar/components/SidebarBrand.tsx (dans les deux applications) et dans src/layouts/auth/components/FormPanel.tsx du tableau de bord admin.

Favicon, icônes d'application et images de partage

Next.js trouve les fichiers de src/app/ par leur nom et écrit les balises de page correspondantes : remplacez donc les fichiers en conservant leurs noms.

Le tableau de bord admin a un seul manifest d'application web, servi à /manifest.webmanifest depuis src/app/manifest.ts, qui lit manifest dans BRAND_CONFIG :

• manifest.icons liste les icônes de l'application installée : /icon.png (512 × 512) et /apple-icon.png (180 × 180), les deux fichiers de src/app/. Remplacer ces fichiers change ensemble l'icône du navigateur et celle de l'application installée. Si vous faites pointer une entrée vers un autre fichier, indiquez sa taille réelle.
• meta.ogImage et meta.twitterImage sont les aperçus des liens, /assets/brand/learnio-mark.png par défaut. Les métadonnées déclarent l'image en 512 × 474 et utilisent la petite carte summary : une image de remplacement d'une autre taille demande de changer aussi le width et le height dans src/app/layout.tsx.
• Le tableau de bord admin demande aux moteurs de recherche de ne pas l'indexer, dans les métadonnées des pages et dans public/robots.txt : c'est un outil pour le personnel, pas une page publique.

Couleurs du site étudiant

Les pages publiques lisent leurs couleurs dans des variables CSS de src/styles/theme-variables.css : les valeurs claires sous :root, les sombres sous .dark. L'orange de la marque est #FF6A3D.

• Le tableau de bord de l'étudiant connecté utilise la palette du tableau de bord admin, copiée dans src/styles/dashboard-theme.css et limitée à ce tableau de bord. Son orange est #FF8A00. La copie est tenue à la main : quand une couleur change dans theme-variables.css du tableau de bord admin, changez-la aussi dans ce fichier.
• Quelques illustrations écrivent l'orange directement au lieu d'utiliser une variable : le profil du formateur et les étapes « How it works » de la page d'accueil. Recherchez FF6A3D dans src/features.
• La couleur que le navigateur peint autour de la page (la barre d'adresse sur mobile) est SITE.browserChrome dans src/config/site.ts, une valeur par thème, chacune égale au fond de page de ce thème. Les couleurs de l'application installée sont SITE.themeColor et SITE.backgroundColor dans le même fichier.

Couleurs du tableau de bord admin

Toutes les couleurs sont des variables CSS dans src/styles/theme-variables.css, les claires sous :root et les sombres sous .dark. L'orange de la marque est --primaryColor, #ff8a00 dans les deux thèmes, avec --primaryColorHover pour son survol.

• Les nuances de l'orange sont écrites comme des valeurs distinctes : la famille --accent-*, la famille --chip-* et --btn-primary-fill, qui vaut #ff6a3d dans le thème clair. Pour changer la couleur de la marque, recherchez ff8a00, 255, 138, 0 et ff6a3d dans le fichier et retravaillez les nuances voisines.
• En dehors des couleurs du navigateur ci-dessous, ce fichier est le seul endroit où le tableau de bord admin écrit l'orange. Aucun composant ne la code en dur.
• Les couleurs de l'interface du navigateur sont theme.light et theme.dark dans BRAND_CONFIG. L'application installée utilise manifest.themeColor et manifest.backgroundColor.

Polices

Les deux applications chargent Inter pour l'anglais et IBM Plex Sans Arabic pour l'arabe via next/font/google dans src/app/layout.tsx, qui les sert depuis votre propre domaine. src/styles/base.css passe à la police arabe quand la langue de la page est ar.

Pour changer de police, importez-en une autre depuis next/font/google en conservant son nom de variable, afin que les feuilles de style la reprennent sans modification. Sur le site étudiant :

import { IBM_Plex_Sans_Arabic, Manrope } from "next/font/google";

const inter = Manrope({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

Une police qui n'est pas une police variable a besoin d'une liste weight, comme la police arabe. Le fichier src/styles/base.css du site étudiant cite aussi 'Inter' comme police de secours ; mettez-le à jour si vous renommez la variable.

E-mails et API

• Expéditeur : MAIL_FROM dans back-end/.env est le nom et l'adresse d'où part chaque e-mail, par exemple Learnio <noreply@example.com>.
• Nom : les e-mails nomment le produit via l'espace réservé {site} de src/i18n/translations/<locale>/mail.json, rempli à partir du paramètre site_name. Modifiez-le dans l'onglet App Settings de Settings du tableau de bord admin ; il s'applique au prochain e-mail envoyé.
• Réponses : le paramètre support_email est l'adresse de réponse de chaque e-mail, pour qu'une réponse parvienne à une personne plutôt qu'à l'expéditeur sans réponse.
• Formulation : les objets et les corps des messages sont dans src/i18n/translations/en/mail.json et src/i18n/translations/ar/mail.json.
• Apparence : les e-mails ne contiennent pas de logo. Leurs couleurs sont écrites dans src/modules/mail/templates/layout.ts (INK, MUTED, PAGE, CARD), car les clients de messagerie ignorent les feuilles de style.
• Les liens des e-mails ouvrent le site étudiant à l'adresse FRONTEND_URL.

• Paramètres des e-mails