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 du site et ses valeurs de repli

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

// brand.config.ts
name: { en: "Hollina", ar: "Hollina" },     // tab titles, sharing cards, the wordmark, the manifest
tagline: { en: "...", ar: "..." },           // until the dashboard's settings answer
description: { en: "...", ar: "..." },       // the installable app's description
contactEmail: "hello@example.com",           // until the dashboard's settings answer
contactPhone: "+1 202 555 0147",             // until the dashboard's settings answer
keywords: ["vacation rental", ...],          // the meta keywords

// booking.config.ts
DEFAULT_TIMEZONE = "America/New_York";       // calendar days, "today", the i18n clock
DEFAULT_CURRENCY = "USD";                    // prices without a currency of their own

Le logotype à côté du logo est du texte réel composé en Outfit (src/components/BrandMark.tsx), il suit donc name. Le nom de la société apparaît aussi dans des phrases, dans les deux langues : dans messages/, cherchez Hollina et réécrivez ces lignes. Le délai de réponse de la page de contact et de la boîte de dialogue de question (« usually within a day ») est du texte dans messages/contact et messages/inquiry.

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

Remplacez les fichiers en gardant leurs noms, ou changez mark.color et mark.white dans la configuration de marque. Les photographies propres à la société sont servies par l'API depuis public/media/hollina/site/ dans le dossier de l'API : 01-hero.webp (l'image de partage de chaque page sans photographie propre), how-dates.webp, how-pay.webp et how-arrive.webp (les trois étapes de « How it works ») et host-desk.webp (la carte de l'équipe de l'hôte sur la page de contact). Remplacez-les sous les mêmes noms. Les photographies des séjours et des destinations s'envoient dans le tableau de bord.

Les couleurs et la typographie du site

storefront/BRANDING.md liste chaque token. Vérifiez que le texte sur vos couleurs reste lisible à 4,5 pour 1 dans les deux thèmes. Les fichiers de police sont livrés dans src/fonts/ et se chargent avec next/font/local, donc un build ne les télécharge jamais et le site n'envoie aucune requête à Google : Outfit pour le texte latin et le logotype, Instrument Serif pour les titres d'affichage, et Noto Sans Arabic pour le texte arabe, tous sous licence SIL Open Font License. La couleur de la zone sur la carte est STAY_AREA_COLOR dans src/lib/map/mapConfig.ts, et les couleurs de la barre du navigateur sont themeColor.light et themeColor.dark dans la configuration de marque.

Résultats de recherche, partage, prix 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). La page d'un séjour utilise le titre et la description SEO du séjour, écrits dans l'éditeur, et sa photographie de couverture.
• Les prix sont formatés à un seul endroit, src/lib/utils/formatPrice.ts, comme le code de la devise suivi du montant en chiffres latins (USD 240), et dessinés par src/components/PriceDisplay. Un tarif par nuit ajoute sa période depuis les traductions (/ night, common.stay.perNight dans messages/common).

Clair, sombre et système

Les deux applications ont un contrôle de thème avec Système, Clair et Sombre. Système suit le système d'exploitation et change quand celui-ci change. Le choix est gardé dans le localStorage du navigateur (hollina-theme sur le site, hollina-admin-theme dans le tableau de bord), rien n'est envoyé à l'API, et un court script dans le head de la page l'applique avant le premier affichage, donc un rechargement n'affiche jamais l'autre thème un instant.

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 (Bookings | Hollina) ; meta contient le titre par défaut, la description, les mots-clés et l'auteur, 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/, et le libellé à côté du logotype de l'en-tête est header.workspace dans messages/dashboard.
• Logo : remplacez public/brand/hollina-mark.svg et hollina-mark-white.svg en gardant les noms ; BrandMark les peint à partir du token --logo-bg-image dans src/styles/theme-variables.css. 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, --on-primary, --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 : Outfit et Noto Sans Arabic, livrées dans src/fonts/, chargées dans src/app/layout.tsx et assignées dans src/styles/base.css.

Les informations propres à la société

Ce que les voyageurs lisent sur la société est de la donnée, pas du code. Cela se modifie dans les paramètres du tableau de bord et le site le lit depuis GET /api/settings/public, avec la configuration de marque comme repli seulement tant qu'il ne répond pas.

La devise est USD et le fuseau horaire America/New_York, les seules options que propose le tableau de bord. Le logo de la marque lui-même ne s'envoie 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 zone avec en.json et ar.json. Réécrivez le texte dans les deux fichiers. La politique de confidentialité dans messages/privacy est un texte de template et le dit sur la page : réécrivez-la pour votre société et votre pays avant la mise en ligne, puis retirez cette note (le panneau encadré dans src/features/privacy/components/PrivacyHeader.tsx, et sa clé templateNote dans les deux fichiers). Sa ligne de contact affiche l'e-mail des paramètres du tableau de bord.

• Langues