Image de marque
Où se trouvent le nom, le logo, les icônes, les couleurs et les polices de la boutique dans chaque application, et ce qu'il faut changer pour en faire votre propre marque.
Pour le pack Full Stack
Où se trouve la marque
La marque se définit dans des fichiers, pas dans le tableau de bord admin. La boutique et le tableau de bord admin ont chacun leurs propres copies : modifiez donc chaque application que vous livrez.
| Élément | Boutique (storefront/) | Tableau de bord admin (admin-dashboard/) |
|---|---|---|
| Nom, description, contact, liens | src/config/brand.config.ts | src/config/brand.config.ts |
| Logo | Le nom, écrit en texte par src/layouts/app/NavBar/components/Logo.tsx | public/assets/images/logo-for-lightmode.png et logo-for-darkmode.png |
| Favicon et icônes de l'application | src/app/ (favicon.ico, icon0.svg, icon1.png, apple-icon.png) ainsi que public/web-app-manifest-192x192.png et -512x512.png | Les mêmes fichiers dans ses propres src/app/ et public/ |
| Couleurs | src/styles/theme-variables.css | src/styles/theme-variables.css |
| Polices | src/app/layout.tsx et src/styles/base.css | Aucune : la pile de polices du système |
| Textes | messages/<namespace>/<locale>.json | messages/ et les libellés de la barre latérale dans navigationData.ts |
yarn dev affiche une modification immédiatement. Un build de production compile la marque dans l'application : relancez donc yarn build, ou docker compose up --build pour le pack Full Stack.
Le nom sur la boutique
La boutique est livrée sous le nom STORE (ستور en arabe). Tout se trouve dans BRAND_CONFIG, dans storefront/src/config/brand.config.ts ; les champs texte ont une valeur en et une valeur ar.
| Champ | Où il apparaît |
|---|---|
storeName | Le logo : un logotype en texte dans la barre de navigation et le pied de page, et le copyright du pied de page. |
name | L'onglet du navigateur (Page | Name), le nom du site dans l'aperçu de partage et les informations du site lues par les moteurs de recherche. |
company | Le nom de l'organisation lu par les moteurs de recherche. |
meta.title, meta.description, meta.keywords, meta.author | Le titre de la page d'accueil, ainsi que la description et les mots-clés par défaut. |
meta.ogImage, meta.twitterImage | L'image affichée quand une page est partagée, un chemin sous public/. Elle est livrée avec la photo d'en-tête de la page d'accueil. |
logo.icon | Le logo de l'organisation lu par les moteurs de recherche. |
theme.light, theme.dark | La couleur de la barre d'outils du navigateur sur téléphone. |
manifest | Le nom, les couleurs et les icônes de l'application installée. |
contact.email, contact.phone, contact.address | La colonne contact du pied de page et la page de contact. Elles sont livrées avec des valeurs fictives : remplacez-les. |
links.instagram, links.twitter, links.facebook, links.linkedin | Les icônes de réseaux sociaux du pied de page, sous forme d'URL complètes (twitter s'affiche comme X). Chaque champ rempli obtient une icône ; les champs vides sont masqués. Ils sont livrés vides : une nouvelle boutique n'affiche donc aucune ligne de réseaux sociaux. Les mêmes URL sont déclarées comme profils de l'organisation pour les moteurs de recherche. |
L'adresse publique du site vient de NEXT_PUBLIC_SITE_URL, pas de ce fichier. Les textes livrés décrivent une boutique de mode masculine : les descriptions dans brand.config.ts, la page d'accueil dans messages/home/ et les titres des pages dans messages/seo/ sont les endroits à réécrire.
Le nom dans le tableau de bord admin
Le tableau de bord est livré sous le nom Aniq Dashboard. 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.
| Champ | Où il apparaît |
|---|---|
name | Le titre de l'onglet du navigateur sur chaque page, le nom dans l'en-tête, le nom du site dans l'aperçu de partage et le pied de page. |
company | La ligne « by » du pied de page, et l'organisation lue par les moteurs de recherche. |
version | Le pied de page. |
logo.alt | Le libellé pour lecteur d'écran du logo sur la page de connexion. |
logo.icon | Le logo de l'organisation lu par les moteurs de recherche. Il n'est pas affiché à l'écran. |
meta | Le titre, la description, les mots-clés et l'auteur par défaut, et l'image affichée quand un lien vers le tableau de bord est partagé. |
domain.url | La base des liens absolus dans les métadonnées. Elle est livrée avec la valeur https://yourdomain.com : remplacez-la par l'adresse du tableau de bord admin. |
theme, manifest | La couleur de la barre d'outils du navigateur, ainsi que le nom, les couleurs et les icônes de l'application installée. |
contact, links | L'e-mail, le téléphone et les profils de l'organisation, pour les moteurs de recherche uniquement. |
Le tableau de bord est livré sous le nom Aniq Dashboard, avec son icône d'application (/web-app-manifest-512x512.png) comme image de partage. Faites pointer meta.ogImage et meta.twitterImage vers votre propre fichier sous public/ ; une image de 1200 sur 630 remplit au mieux les grandes cartes d'aperçu.
Logo et icônes
- Le logo de la boutique est son nom en texte, issu de
storeName, dans la barre de navigation (src/layouts/app/NavBar/components/Logo.tsx) et le pied de page (src/layouts/app/footer/components/FooterBrandIntro.tsx). Pour utiliser une image à la place, placez votre propre image dansLogo.tsx. Les fichierslogo-for-lightmode.pngetlogo-for-darkmode.pngde la boutique ne sont pas utilisés. - Le logo du tableau de bord admin, dans l'en-tête et sur la page de connexion, se compose de deux images, une par thème : remplacez
public/assets/images/logo-for-lightmode.pngetlogo-for-darkmode.pngen gardant leurs noms.src/styles/theme-variables.csspointe vers elles via--logo-bg-image. - Remplacez le favicon et les icônes d'application dans
src/app/etpublic/de chaque application, en gardant les noms de fichiers, pour que les manifests et le navigateur continuent de les trouver.
Couleurs et thèmes
Chaque application définit ses couleurs comme variables CSS dans src/styles/theme-variables.css : un jeu sous :root pour le thème clair et un sous .dark pour le thème sombre. La couleur d'accent est --primaryColor, #ee8038 dans les deux applications.
| Variable | Ce qu'elle colore |
|---|---|
--primaryColor, --primaryColorHover | Boutons, liens et mises en évidence |
--accent-text | Texte de couleur d'accent sur les surfaces claires (boutique uniquement) |
--background | La page |
--surface, --surface-hover | Cartes, panneaux et leur survol (la boutique ajoute --surface-elevated) |
--text, --text-muted | Texte principal et texte secondaire |
--border | Séparateurs et contours des champs |
- Changez une couleur dans les deux jeux, pour que les deux thèmes restent alignés.
- Le thème suit celui du système du visiteur jusqu'à ce qu'il en choisisse un avec le bouton de bascule, choix qui est alors mémorisé dans le navigateur.
themedansbrand.config.tsn'est que la couleur de la barre d'outils du navigateur, pas celle de l'interface.
Polices
La boutique charge trois Google Fonts avec un seul lien dans src/app/layout.tsx : Plus Jakarta Sans pour tout le texte latin, appliquée sur body dans src/styles/base.css ; Zain pour le texte arabe, dans le même fichier ; et IBM Plex Sans Arabic pour les titres arabes, via la classe .font-display-ar dans src/styles/utilities.css.
Pour en changer une, remplacez sa famille dans le lien Google Fonts de layout.tsx, puis le font-family correspondant dans ces fichiers CSS. Choisissez une police arabe qui dispose des graisses utilisées par les pages.
Le tableau de bord admin ne charge aucune police web et utilise la pile de polices du système. Ajoutez-en une de la même façon si vous le souhaitez.
Trouver chaque mention du nom
Les messages de la boutique ne répètent pas le nom : le copyright du pied de page le reprend de storeName. Le nom du tableau de bord apparaît dans ses propres textes. Vérifiez les deux applications :
storefrontgrep -rn "STORE\|ستور" src messagesadmin-dashboardgrep -rn "Aniq\|أنيق" src messagesL'API
L'API ne porte aucune marque propre et n'envoie aucun e-mail. Ses messages de connexion et d'erreur sont du texte brut dans back-end/src/i18n/translations/<locale>/.