Image de marque

Où se trouve la marque

Chaque couleur est un token défini une fois pour le thème clair et une fois pour le thème sombre. Rien dans le balisage ne contient de couleur propre, donc un token modifié atteint chaque page.

Le nom du site

Dans storefront/src/config/brand.config.ts, chaque nom a une valeur anglaise et une valeur arabe :

name:      { en: "Food Studio", ar: "فود ستوديو" },   // the restaurant
company:   { en: "Food Studio", ar: "فود ستوديو" },   // legal or trading name
shortName: { en: "Food Studio", ar: "فود ستوديو" },   // tab titles and the app icon label
storeName: "Food Studio",                    // the logo link's accessible name

Le nom apparaît dans les titres des pages, le copyright du pied de page, le manifeste de l'application installable et les données structurées lues par les moteurs de recherche.

Le logo et les icônes du site

L'en-tête affiche un fichier de logo par langue et par thème, dans storefront/public/brand/. Chacun est le logo complet, symbole et lettrage dans une seule image.

• Remplacez-les par les vôtres et indiquez la largeur de chaque fichier, pour une hauteur de 176, dans LOCKUPS de src/layouts/app/NavBar/components/Logo.tsx.
• Les icônes de l'écran d'accueil sont public/web-app-manifest-192x192.png et public/web-app-manifest-512x512.png ; les icônes du navigateur sont favicon.ico, icon0.svg, icon1.png et apple-icon.png dans src/app/.
• L'étoile de la section fidélité est public/brand/rewards-star.svg.

Les couleurs et la typographie du site

Les deux se trouvent dans storefront/src/styles/theme-variables.css, une fois par thème. Vérifiez que le texte sur votre nouvelle couleur de marque garde un contraste de 4,5 pour 1 dans les deux thèmes. La typographie est Montserrat pour les grands titres, Inter pour le texte latin et IBM Plex Sans Arabic pour l'arabe, chargées dans src/app/layout.tsx. Les couleurs de la barre du navigateur et de l'écran de démarrage sont theme et manifest dans la configuration de la marque.

Résultats de recherche, partage et domaine

• meta dans la configuration de la marque contient le titre, la description et les mots-clés de la page d'accueil dans les deux langues, ainsi que l'image de partage, public/og-image.jpg en 1200 sur 630. Remplacez cette image par la vôtre.
• Chaque autre page prend son titre et sa description dans messages/seo/en.json et messages/seo/ar.json. Une page de plat utilise le nom, la description et la première photo du plat.
• domain.url est la base de chaque adresse canonique, du sitemap et du fichier robots. Définissez-la avec votre vraie adresse avant de déployer.

Coordonnées et liens

contact dans la configuration de la marque contient l'e-mail, le téléphone et l'adresse du restaurant dans son ensemble, et links les liens du site et des réseaux sociaux. L'adresse ne s'affiche que lorsque l'API n'a aucune cuisine à montrer : les adresses, numéros de téléphone et horaires des cuisines sur les pages contact et adresses viennent des cuisines que vous modifiez dans le tableau de bord.

Le nom, le logo et les couleurs du tableau de bord

• Nom : messages/layouts/en.json et ar.json, sous brand et navbar, contiennent le nom, le titre de la page, la description et la ligne du pied de page. name et company dans src/config/brand.config.ts sont les mêmes noms, là où il faut du texte en dehors d'une traduction. Cherchez « Food Studio » dans messages/ pour trouver le reste.
• Logo : remplacez mark.svg, wordmark-white.webp, wordmark-master.webp, wordmark-ar-white.webp et wordmark-ar-master.webp dans public/brand/ en gardant les noms, ou faites pointer logo dans la configuration de la marque vers de nouveaux fichiers, avec leur largeur pour une hauteur de 176. Les icônes de l'application installable sont les deux fichiers web-app-manifest dans public/, et le favicon est src/app/icon.svg.
• Couleurs : --primaryColor et --on-primary (la couleur de la marque et le texte posé dessus), --brand-highlight et --brand-text (la couleur de la marque en texte ou en contour), --background, --surface et --border, --text et --text-muted, ainsi que --errorColor, --success et --warning, dans src/styles/theme-variables.css, une fois par thème.
• Typographie : le token --font-sans dans src/styles/base.css, Inter Variable par défaut.
• Adresse : NEXT_PUBLIC_DASHBOARD_URL dans le .env du tableau de bord.

Les informations propres au restaurant

Les données de démonstration enregistrent le nom du restaurant, son slogan, son e-mail et son téléphone d'assistance comme paramètres : site_name, site_tagline, support_email et support_phone. Le personnel les modifie dans le tableau de bord sous Settings, Restaurant, All settings by key. Les noms, adresses et coordonnées des cuisines se modifient aussi à cet endroit.

Textes et mentions légales

Chaque phrase visible se trouve dans messages/, un dossier par zone avec en.json et ar.json. Réécrivez les textes dans les deux fichiers. La politique de confidentialité et les conditions d'utilisation dans messages/legal sont écrites pour un restaurant fictif : remplacez-les par des textes adaptés à votre établissement et à votre pays avant la mise en ligne.

• Langues