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: { en: "Velra", ar: "فيلرا" },          // tab titles, sharing cards, the wordmark, the manifest
contactEmail: "hello@velra.example",          // until the dashboard's settings answer
market: {
  currency: "AED",        // prices without a currency of their own, budget ranges, the footer
  timeZone: "Asia/Dubai", // viewing slots and dates
  utcOffset: "+04:00",    // the offset a viewing's preferred time is sent in
  areaServed: "Dubai",    // the agency's structured data for search engines
},

Le logotype à côté du logo est du texte vivant : il suit donc name. Le nom et la ville apparaissent aussi dans des phrases, dans les deux langues : cherchez Velra et فيلرا, ainsi que Dubai et دبي, dans messages/, et réécrivez ces lignes. L'indication de fuseau horaire dans messages/viewing indique UTC+4.

Le logo, les icônes et les photos du site

Remplacez les fichiers en gardant leurs noms, ou changez mark.color et mark.white dans la configuration de la marque. Les photos propres à l'agence (le studio, l'accueil, les panneaux d'achat et de location, les tuiles de type de bien) sont servies par l'API depuis public/media/velra/site/ dans le dossier de l'API : remplacez-les sous les mêmes noms. agency-studio.webp est aussi l'image de partage de chaque page qui n'a pas de bien propre.

Les couleurs et la typographie du site

storefront/BRANDING.md liste chaque token. Vérifiez que le texte reste lisible sur vos couleurs à 4,5 pour 1 dans les deux thèmes. Les polices se chargent avec next/font/google, donc elles sont servies avec le build : Manrope pour le texte latin, Noto Sans Arabic pour le texte arabe, et Cormorant Garamond et Noto Naskh Arabic pour les titres. Les couleurs de la barre du navigateur sont themeColor.light et themeColor.dark dans la configuration de la marque.

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.
• Les titres et descriptions de page sont sous meta dans chaque namespace de messages/ (celui de la page d'accueil dans messages/home, celui par défaut dans messages/layouts). Une page de bien utilise le titre et la description SEO propres au bien, écrits dans l'éditeur, et sa photo de couverture.
• Les prix sont formatés dans src/lib/utils/formatPrice.ts sous la forme du code de la devise suivi du montant en chiffres latins (AED 4,850,000) ; les locations ajoutent la période issue des traductions. Les tranches de budget de la recherche sont dans src/constants/search/priceRanges.ts.

Clair, sombre et système

Les deux applications ont un menu de thème avec Système, Clair et Sombre. Système suit le système d'exploitation et change quand lui change. Le choix est conservé dans le localStorage du navigateur (velra-theme sur le site, velra-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 n'affiche donc jamais l'autre thème.

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

• Nom : name dans src/config/brand.config.ts est le logotype et la moitié « marque » de chaque titre de page (Properties | Velra) ; meta contient le titre, la description et les mots-clés par défaut, domain.url la base des URL de métadonnées absolues, manifest l'application installable. Le titre propre à chaque page est sous meta.titles dans les namespaces dashboard et auth de messages/.
• Logo : remplacez public/brand/velra-mark.svg et velra-mark-white.svg en gardant les noms. L'icône d'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 sont les deux fichiers web-app-manifest dans public/.
• Couleurs : --primaryColor, --primaryColorHover, --primary-foreground et --primary-tint, --background, --surface, --text, --text-muted, --border et --errorColor, plus les paires --tone-* pour les pastilles de statut, dans src/styles/theme-variables.css, une fois par thème. Quel statut prend quelle teinte se trouve dans src/config/statusTones.ts.
• Polices : Manrope, Noto Sans Arabic, Cormorant Garamond et Noto Naskh Arabic, chargées dans src/app/layout.tsx et attribuées dans src/styles/base.css.

Les informations propres à l'agence

Le nom, le slogan, la description, l'e-mail de contact et la ville de l'agence sont des paramètres, modifiés dans le tableau de bord sous Paramètres, Agence, et lus par le site depuis GET /api/settings/public. Le seed les stocke sous agency_name, agency_tagline_en, agency_tagline_ar, agency_description_en, agency_description_ar, contact_email et agency_city. Les biens que la page d'accueil met en avant, et le bien dont elle montre la pièce mise en scène, se définissent sous Paramètres, Page d'accueil.

Le logo de la marque lui-même ne se téléverse pas dans le tableau de bord : il vient des fichiers ci-dessus.

Textes et politique de confidentialité

Chaque phrase visible est dans messages/, un dossier par domaine avec en.json et ar.json ; les noms des équipements sont dans messages/amenities. Réécrivez le texte dans les deux fichiers. La politique de confidentialité dans messages/privacy est un texte de template écrit pour une agence fictive et le dit sur la page : réécrivez-la pour votre agence et votre pays avant la mise en ligne, puis retirez cette note (le dernier paragraphe de src/features/privacy/components/PrivacyHeader.tsx et sa clé templateNote dans les deux fichiers).

• Langues