Image de marque

Où se trouve la marque

Chaque couleur est un token défini une fois pour le thème clair (:root) et une fois pour le thème sombre (:root[data-theme="dark"]). Les composants ne lisent que les tokens : un token modifié atteint donc chaque page. Changez une couleur de marque dans les deux blocs, sinon un thème garde l'ancienne.

Le nom, l'e-mail de contact et le marché du site

Dans storefront/src/config/brand.config.ts :

name: "Ticketory",                    // the manifest and search engines' structured data
description: "...",                   // the installable app's description
mark: "/brand/mark.svg",              // structured data for search engines
lockups: { en: {...}, ar: {...} },    // the header and footer logo, with each file's size
themeColor: { light: "#FFFBF0", dark: "#111111" }, // the browser bar
contactEmail: "support@example.test", // until the API's settings answer
market: {
  currency: "USD",           // money with no currency of its own
  timeZone: "Europe/London", // dates with no time zone of their own
},
keywords: ["events", "tickets", ...],

Le nom tel que chaque langue l'écrit, utilisé dans les titres d'onglet et les cartes de partage, est meta.siteName dans messages/layouts/en.json et ar.json. Le nom du produit apparaît aussi dans des phrases, dans les deux langues : cherchez dans messages/ Ticketory et son orthographe arabe, تيكيتوري, et réécrivez ces lignes.

Les logos, icônes et décorations du site

Chaque logo est une image finie avec un fond transparent, rognée à son contenu. Remplacez-les par les vôtres à n'importe quelle taille et écrivez la largeur et la hauteur de chaque fichier dans lockups dans la configuration de marque, pour que l'en-tête garde ses proportions.

Les étoiles, vagues, triangles, cercles, points et zigzags autour des sections sont les fichiers SVG de public/decor/. Chaque section liste l'emplacement de ses formes dans le dossier constants/ de sa fonctionnalité (celui du pied de page est dans src/layouts/app/SiteFooter/constants/) : supprimez une ligne pour retirer une forme, ou placez votre propre SVG dans public/decor/ et ajoutez son nom de fichier à DecorAsset dans src/components/Decorations/types.ts.

Les couleurs et la typographie du site

Le texte sur les fonds rose, jaune et turquoise est noir (--on-accent), sur le bleu et l'encre il est crème. Vérifiez que le texte sur vos couleurs reste lisible à 4,5 pour 1 dans les deux thèmes. Chaque événement porte aussi sa propre couleur de billet, choisie dans l'éditeur d'événement.

Les fichiers de police sont livrés dans src/fonts/ de chaque application : un build ne les télécharge donc jamais. Archivo Black pour les titres (Lalezar en arabe) et DM Sans pour le texte (Noto Sans Arabic), tous sous licence SIL Open Font License dans src/fonts/OFL.txt. Pour en changer une, placez le fichier .woff2 dans src/fonts/, faites pointer l'appel localFont vers lui et ajoutez sa licence à OFL.txt.

Résultats de recherche, partage et domaine

• NEXT_PUBLIC_SITE_URL est la base de chaque adresse canonique, des alternatives de langue, des cartes de partage, de robots.txt et du sitemap. Définissez-la avec votre vraie adresse avant le build.
• Le titre, la description et le texte de partage par défaut sont sous meta dans messages/layouts ; ceux de chaque page sont sous meta dans son namespace de messages/. Une page d'événement utilise le titre et le résumé de l'événement.
• Le sitemap liste les pages d'accueil, des événements, des lieux, des organisateurs, des tarifs, de la FAQ, du contact et les pages légales, ainsi que chaque événement, lieu et organisateur public, chacun dans les deux langues avec sa variante. robots.txt exclut les pages de compte, de paiement, de commande et de connexion.
• L'argent s'écrit de la même façon dans les deux langues, le symbole en premier et en chiffres latins ($41.20), grâce à src/lib/format/formatMoney.ts.

Clair, sombre et système

Les deux applications proposent Système, Clair et Sombre. Système suit le système d'exploitation et change avec lui. Le choix est conservé dans le localStorage du navigateur (ticketory-theme sur le site, ticketory-admin-theme dans le tableau de bord), rien n'est envoyé à l'API, et un court script dans l'en-tête de la page l'applique avant le premier affichage : un rechargement ne fait donc jamais clignoter l'autre thème. Les couleurs de la barre du navigateur sont themeColor sur le site et theme dans la configuration de marque du tableau de bord.

Le nom, les logos et les couleurs du tableau de bord

• Nom : name dans src/config/brand.config.ts, en anglais et en arabe (Ticketory et تيكيتوري, aussi dans company, shortName, le texte alternatif du logo et manifest), est la moitié « marque » de chaque titre de page (Events | Ticketory) et le texte alternatif du logo ; meta contient le titre, la description et les mots-clés par défaut et l'image de partage (public/og-image.jpg, 1200 par 630), domain.url la base des URL absolues des métadonnées (NEXT_PUBLIC_DASHBOARD_URL l'emporte sur elle), manifest l'application installable. Le titre propre à chaque page est sous meta.titles dans les namespaces dashboard et auth de messages/.
• Logos et icônes : remplacez les quatre fichiers lockup-*.webp et mark.svg dans public/brand/, en gardant les noms, ou changez les chemins et les tailles dans BRAND_LOCKUPS. L'icône de l'onglet du navigateur est src/app/icon0.svg, l'icône iPhone src/app/apple-icon.png, et les icônes de l'application installable les deux fichiers web-app-manifest dans public/.
• Couleurs : --background, --surface et --surface-elevated, --surface-hover, --surface-sunken, --text, --text-muted, --border, --primaryColor, les accents, --ink-button et --on-ink, --errorColor, --shadow-ink, et les paires --tone-* pour les pastilles d'état, dans src/styles/theme-variables.css, une fois par thème. Quel état prend quelle teinte se trouve dans src/config/statusTones.ts.
• Polices : DM Sans, Noto Sans Arabic, Archivo Black et Lalezar, chargées depuis src/fonts/ dans src/app/layout.tsx et attribuées dans src/styles/base.css.

Les informations propres à l'organisateur

Le nom de chaque espace de travail, l'e-mail de support, la devise (USD, EUR, GBP, SAR ou AED), le fuseau horaire et les frais de réservation, que le participant paie toujours au paiement, sont des paramètres, modifiés dans le tableau de bord sous Paramètres, Général. Le site les lit via GET /api/public/settings, avec la durée de réservation des places (dix minutes dans les données d'exemple) et les moyens de paiement proposés. Chaque événement porte aussi son propre fuseau horaire.

Les logos de la marque ne se téléversent pas dans le tableau de bord : ils viennent des fichiers ci-dessus.

Textes et pages 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é, les conditions et la politique d'annulation de messages/legal sont des textes d'exemple : réécrivez-les pour votre activité et votre pays avant de vendre de vrais billets.

• Langues