Aux couleurs de votre marque

Lancez le site avec yarn dev pendant vos modifications : la page se recharge à chaque enregistrement.

Le nom du site

Le nom est Publino par défaut, بوبلينو en arabe. Il apparaît dans plusieurs textes, chacun dans les deux fichiers de messages :

• metadata.siteName, metadata.title et metadata.description dans messages/common/<locale>.json : le nom que montrent les moteurs de recherche et les cartes sociales, ainsi que le titre et la description de la page d'accueil.
• navigation.logo dans les mêmes fichiers : le nom à côté du logo dans l'en-tête et dans la barre latérale de la maquette de tableau de bord.
• footer.copyright dans les mêmes fichiers : la ligne en bas de chaque page. {year} est rempli par le site ; conservez-le.
• whyChooseUs.title et footer.description dans messages/home/<locale>.json : deux phrases de la page d'accueil.
• PricingPage.meta dans messages/pricing/<locale>.json et ContactPage.meta dans messages/contact/<locale>.json : les titres Publino | Pricing et Publino | Contact us, et leurs descriptions.

Deux autres endroits le contiennent en texte brut : le logotype dans src/features/home/Footer/index.tsx, et name et short_name dans public/site.webmanifest, le nom qu'un téléphone affiche quand le site est ajouté à son écran d'accueil.

Le logo

Le logo est une icône de fusée de Tabler Icons suivie du nom du site. L'en-tête le dessine dans src/layouts/Navbar/index.tsx, et la maquette de tableau de bord reprend l'icône dans src/features/home/DashboardMockup/components/Sidebar/components/BrandHeader.tsx.

Remplacez l'icône par une autre icône Tabler, ou par votre propre image, par exemple un fichier que vous placez dans public/ :

import Image from "next/image";

const logo = {
  icon: <Image src="/your-logo.svg" alt="" width={20} height={20} priority />,
  text: t("logo"),
};

Thèmes clair et sombre

Le site a un thème clair et un thème sombre, et s'ouvre en sombre. Le bouton soleil et lune de l'en-tête permet de passer de l'un à l'autre, et le navigateur retient le choix du visiteur.

Les deux thèmes sont des jeux de couleurs dans src/styles/theme.css : les couleurs claires sous :root, les sombres sous [data-theme="dark"]. La palette est faite de noir, de blanc et de gris, avec le bleu comme accent pour les anneaux de focus, les tendances à la hausse et les points de la carte. Changez une valeur à cet endroit et chaque page suit, par exemple --interactive-primary pour les boutons principaux ou --background pour la page.

[data-theme="dark"] {
    --background: #000000;
    --interactive-primary: #ffffff;
}

Pour qu'une première visite s'ouvre en clair, remplacez "dark" par "light" dans src/providers/ThemeProvider.tsx et dans le script de src/app/[locale]/layout.tsx, à chaque endroit où il apparaît dans les deux fichiers.

• Le site reste sombre

Polices

Le site utilise les polices système du visiteur dans les deux langues : --font-sans et --font-mono dans src/styles/theme.css. Rien n'est téléchargé, donc le texte apparaît tout de suite.

Pour utiliser plutôt une police Google, chargez-la avec next/font/google dans src/app/[locale]/layout.tsx, mettez sa classe sur <html>, et nommez sa variable CSS en premier dans --font-sans. Pour l'arabe, choisissez une police qui couvre les lettres arabes, comme Noto Sans Arabic.

Le favicon et les icônes d'application

Chaque page lie public/favicon.svg comme icône, public/apple-touch-icon.png pour les iPhone, et public/site.webmanifest, qui nomme web-app-manifest-192x192.png et web-app-manifest-512x512.png. Remplacez chaque fichier par le vôtre sous le même nom. public/favicon.ico est la solution de repli que les navigateurs demandent d'eux-mêmes.

L'icône de 512 pixels est aussi le logo que les moteurs de recherche voient pour votre organisation.

L'image affichée quand une page est partagée

Les réseaux sociaux et les applications de messagerie affichent public/image.png, de 1200 par 630 pixels, quand quelqu'un partage une page. Remplacez-la par votre propre image de même taille. Si vous changez la taille, changez aussi width et height dans ogImage dans src/config/site.config.ts.

Sa description pour les lecteurs d'écran est metadata.imageAlt dans messages/common/<locale>.json. La carte de fonctionnalité Performance Metrics de la page d'accueil montre la même image que le site qu'elle analyse, donc votre image y apparaît aussi.

Comment fonctionnent les thèmes