Personnalisez-le

Où modifier le texte, les projets, les prix, les images, les couleurs, les polices, les sections, les liens, le formulaire de contact et les informations pour les moteurs de recherche.

Texte

Chaque mot visible, chaque libellé de bouton et texte alternatif, ainsi que le titre et la description de la page se trouvent dans messages/en.json et messages/ar.json. Modifiez la valeur, gardez la clé, et modifiez les deux fichiers.

Partie de la page	Clé dans les fichiers de messages
Titre de la page, description, nom du site	`metadata`
Nom de la marque dans le logo	`common.brand`
Barre de navigation et menu mobile	`navigation`
Hero	`hero`
Atouts	`features`
Réalisations	`work`
Méthode	`process`
Témoignages	`testimonials`
Tarifs	`pricing`
Contact, le formulaire et l'adresse	`contact`
Pied de page	`footer`

Les mots entre accolades, comme {year} dans footer.copyright, sont remplis par la page. Gardez-les tels quels dans les deux langues.
Les avantages de chaque formule forment une liste : ajoutez ou retirez des lignes dans pricing.plans.basic.features (et standard, premium) dans les deux fichiers.

Projets, atouts, étapes, témoignages et formules

Chacun est une liste dans le dossier constants/ de sa section. La key d'une entrée désigne son texte dans les fichiers de messages.

Liste	Fichier	En plus de la clé
Projets	`src/features/home/Work/constants/projectItems.ts`	`image`, `year`
Atouts	`src/features/home/Features/constants/featureItems.ts`	`icon`, une icône Lucide
Étapes de la méthode	`src/features/home/Process/constants/processSteps.ts`	`number`
Témoignages	`src/features/home/Testimonials/constants/testimonialItems.ts`	Rien
Formules	`src/features/home/Pricing/constants/pricingPlans.ts`	`monthlyPrice`, `annualPrice`, `popular`

Pour en ajouter une, ajoutez une entrée avec une nouvelle key, puis le texte de cette clé dans les deux fichiers de messages. Un nouveau projet avec la clé atlas demande work.projects.atlas.title et work.projects.atlas.subtitle.

Prix et devise

Les montants sont de simples nombres, monthlyPrice et annualPrice, dans pricingPlans.ts. La devise est définie une seule fois, currency: "USD", dans src/features/home/Pricing/components/PricingCard.tsx : remplacez-la par un autre code de devise comme EUR. Les prix sont formatés selon la langue de la page.

Le libellé « Save 20% » est un texte, pricing.save. Mettez-le à jour quand votre remise annuelle change.

Images

Image	Fichier
Projets, affichés dans des cadres 4:3	`public/works/1.webp` à `4.webp`, listés dans `projectItems.ts`
Carte d'aperçu pour les réseaux sociaux, 1200 sur 630	`public/image.png`
Icônes du navigateur et de l'écran d'accueil	`public/favicon.ico`, `favicon.svg`, `favicon-96x96.png`, `apple-touch-icon.png`, `web-app-manifest-192x192.png`, `web-app-manifest-512x512.png`

Gardez le nom d'un fichier pour le remplacer sans toucher au code, ou changez son chemin dans projectItems.ts. Les images des projets s'affichent en niveaux de gris jusqu'à ce que le pointeur les survole.

Couleurs

La palette est la liste des variables CSS en haut de src/styles/globals.css, comme --background, --foreground, --primary et --border, écrites en nombres HSL et utilisées par tailwind.config.ts. --radius vaut 0rem, ce qui garde tous les angles droits.

Beaucoup de sections utilisent aussi directement les classes black, white et neutral de Tailwind, comme bg-black et text-white/70. Un nouveau jeu de couleurs implique de changer aussi ces classes dans les fichiers des sections.

Le site est uniquement sombre : le layout pose la classe dark, et le thème ne suit pas le système du visiteur.

Polices

src/app/[locale]/layout.tsx charge Inter pour l'anglais et Noto Sans Arabic pour l'arabe avec next/font/google, et le texte de la page utilise celle de sa langue.

Inter est aussi publiée comme variable CSS --font-inter, que les titres (h1 à h6) utilisent dans src/styles/globals.css, dans toutes les langues sauf l'arabe. Pour changer la police anglaise, importez une autre famille depuis next/font/google dans le layout et gardez-y variable: "--font-inter", pour que les titres suivent.

Sections

src/app/[locale]/page.tsx liste les sections dans l'ordre. Déplacez une ligne pour les réordonner, ou supprimez-en une pour retirer sa section. Chaque section se trouve dans src/features/home/, dans son propre dossier.

Quand vous retirez une section, retirez aussi son lien de src/layouts/constants/sectionLinks.ts, pour que la barre de navigation et le pied de page n'y renvoient plus.

Liens et boutons

Liens	Fichier
Liens des sections dans la barre de navigation et le pied de page (`#features`, `#work`, `#process`, `#pricing`)	`src/layouts/constants/sectionLinks.ts`
Icônes sociales du pied de page	`src/layouts/Footer/constants/socialLinks.ts`
Liens de confidentialité et de conditions	`src/layouts/Footer/constants/legalLinks.ts`
Liens sociaux de la section Contact	`src/features/home/Contact/constants/contactSocials.ts`
E-mail et téléphone de contact	`src/features/home/Contact/constants/contactDetails.ts`

Les liens sociaux et légaux sont livrés avec # : mettez votre propre adresse dans chaque href. Le template n'a pas de page de confidentialité ni de conditions à lui.

Des boutons sans destination

Le bouton Contact de la barre de navigation et du menu mobile, les deux boutons du hero, View All Work, les boutons des tarifs et les cartes des projets ne mènent encore nulle part. Faites de chacun un lien vers la destination voulue, comme #contact, dans src/layouts/Navbar/components/DesktopNav.tsx et MobileMenu.tsx, src/features/home/Hero/components/HeroButtons.tsx, src/features/home/Work/index.tsx et components/ProjectCard.tsx, et src/features/home/Pricing/components/PricingCard.tsx.

Le formulaire de contact

Le formulaire vérifie le nom, l'e-mail et le message dans le navigateur avant l'envoi ; les textes d'erreur se trouvent sous contact.form.validation. La destination de l'envoi dépend de NEXT_PUBLIC_API_BASE_URL :

Vide, par défaut : rien n'est envoyé. Après une courte pause, le formulaire affiche son message de réussite, pour que vous puissiez l'essayer.
Définie : le formulaire envoie un POST au chemin /contact de votre API avec le corps JSON { name, email, message }. Une réponse 2xx affiche le message de réussite, sauf si son JSON indique "success": false ; toute autre réponse affiche le message d'erreur.

C'est le navigateur du visiteur qui envoie la requête : votre API doit donc accepter les requêtes venant de l'adresse de votre site (CORS). L'appel se trouve dans src/lib/api/contact.ts. La valeur est inscrite au moment du build : refaites le build après l'avoir définie.

Moteurs de recherche et cartes sociales

Le titre de la page, la description, le nom du site et le texte alternatif de l'image d'aperçu se trouvent sous metadata dans chaque fichier de messages. NEXT_PUBLIC_SITE_URL définit le lien canonique, les liens de langue en et ar et l'adresse dans les cartes d'aperçu pour les réseaux sociaux, qui affichent public/image.png.

generator dans src/app/[locale]/layout.tsx nomme l'auteur du template dans l'en-tête de la page. Mettez-y votre propre nom, ou retirez la ligne.
public/site.webmanifest nomme le site Mono pour les téléphones qui l'ajoutent à l'écran d'accueil. Mettez-y le nom de votre site.
Le template ne fournit ni robots.txt ni sitemap. Ajoutez src/app/robots.ts et src/app/sitemap.ts si vous en voulez.

Définir l'adresse de votre site

Le curseur personnalisé

Sur les écrans de 768 pixels de large et plus, la page masque le pointeur du système et dessine son propre point et son anneau, depuis src/components/FloatingCursor/. Pour garder le pointeur normal, retirez <FloatingCursor /> de src/app/[locale]/layout.tsx et les règles cursor: none en haut de src/styles/globals.css.