Personnalisez-le

Où se trouve chaque élément

Avec yarn dev en cours d'exécution, chaque enregistrement s'affiche aussitôt sur la page. Avec Docker, reconstruisez l'image pour voir une modification.

Textes

Chaque mot de la page se trouve dans messages/en.json et messages/ar.json, regroupé par section : hero, socialProof, howItWorks, features, integrations, testimonials, blog, pricing, faq et cta, plus header, footer et metadata. Modifiez la valeur, gardez la clé, et faites-le dans les deux fichiers.

Les mots entre accolades, comme {brand}, {year} ou {count}, sont remplis par le code : laissez-les tels quels. Dans la ligne trustedBy de la section d'accueil, gardez aussi les balises autour de {count}.

Certains chiffres se trouvent dans le code, et non dans les fichiers de messages :

Chaque identifiant de la FAQ a besoin de sa question et de sa answer sous faq.items dans les deux fichiers de messages. Les prix sont affichés en dollars, via pricing.price dans les fichiers de messages.

Nom de marque et logo

brand.name dans les deux fichiers de messages est le seul endroit où renommer la marque. C'est le nom affiché à côté du logo, dans l'en-tête et le pied de page, et le symbole du logo en affiche la première lettre. Chaque texte qui nomme la marque contient {brand} et prend cette valeur : le titre de la page, la description de l'image de partage, le badge de la section d'accueil, deux témoignages, le message de conclusion et la ligne de copyright.

Le nom de l'application installée suit aussi : src/app/manifest.ts lit brand.name dans les messages anglais.

Le symbole du logo est dessiné dans src/components/Logo.tsx : un carré pivoté au dégradé du rouge à l'ambre. Remplacez-le par votre propre SVG, ou par une image de public/, pour utiliser votre logo.

Les icônes du navigateur et du téléphone sont public/favicon.svg, public/favicon.ico, public/favicon-96x96.png, public/apple-touch-icon.png et les deux fichiers public/web-app-manifest-*.png. Remplacez-les par des fichiers de mêmes noms et dimensions. Le manifeste lui-même est src/app/manifest.ts.

Images et logos

Pour utiliser votre propre image, placez-la dans public/images/ et écrivez son chemin, commençant par /images/, dans le fichier de constantes de la section. Une image provenant d'un autre site doit avoir son hôte listé dans images.remotePatterns de next.config.mjs ; sinon, Next.js refuse de la charger. images.unsplash.com et cdn.simpleicons.org y figurent déjà.

Les photos Unsplash et les logos Simple Icons sont des exemples. Remplacez-les par vos propres fichiers dans public/images/ avant la mise en ligne.

Couleurs

La couleur d'accent est un dégradé du rouge à l'ambre, écrit avec les classes Tailwind from-red-500 et to-amber-500, avec d'autres nuances red-* et amber-* pour les bordures, les halos et les icônes. Pour la changer, cherchez red- et amber- dans src/ et remplacez-les par vos couleurs. Commencez par src/components/GradientButton.tsx, qu'utilisent tous les boutons en dégradé.

La page est conçue en sombre : le fond est noir (bg-black dans src/app/[locale]/layout.tsx et src/app/[locale]/page.tsx), et next-themes démarre en mode sombre. Les tokens du thème dans src/app/globals.css et tailwind.config.ts colorent les éléments partagés de src/components/ui/.

Polices

src/app/[locale]/layout.tsx charge Inter pour l'anglais et Noto Sans Arabic pour l'arabe via next/font/google, qui les télécharge au moment du build et les sert depuis votre propre site. Pour en changer une, importez une autre police depuis next/font/google et utilisez-la à la place de Inter ou de Noto_Sans_Arabic.

Les sections et leur ordre

src/app/[locale]/page.tsx liste les sections dans l'ordre où elles apparaissent : Hero, SocialProof, HowItWorks, Features, Integrations, Testimonials, BlogPreview, Pricing, Faq et Cta. Déplacez une ligne pour déplacer une section, ou supprimez-la pour retirer la section.

Chaque section est un dossier de src/features/home/, contenant components/, constants/, hooks/ et types/. Pour en ajouter une, reprenez cette organisation, ajoutez ses textes aux deux fichiers de messages et placez-la dans page.tsx.

Les liens Pricing et Testimonials de l'en-tête mènent aux sections d'identifiants pricing et testimonials, et les liens de contact à l'appel à l'action final, dont l'identifiant est contact. Gardez ces identifiants tant que les liens pointent vers eux.

Liens et boutons

Les liens d'exemple ne mènent encore nulle part. Définissez-les avant de publier :

Les liens de contact sous la FAQ et les intégrations fonctionnent déjà : ils mènent à l'appel à l'action final.

Les boutons (Log in, Get Started, Start Free Trial, Watch Demo, les boutons des offres, Read More et View All Articles) sont de simples boutons sans destination. Pour transformer l'un d'eux en lien, donnez-lui asChild et placez un lien à l'intérieur, avec son texte et son icône :

<GradientButton asChild className="h-10 sm:h-12 px-6 sm:px-8">
  <a href="https://app.your-domain.com/signup">{t("primaryCta")}</a>
</GradientButton>

Référencement et partage

• Titre et description de la page : metadata.title et metadata.description dans les deux fichiers de messages. metadata.imageAlt décrit l'image de partage.
• Image de partage : public/image.png, 1200 x 630 pixels.
• Lien canonique et alternatives de langue : construits à partir de NEXT_PUBLIC_SITE_URL, que vous définissez au déploiement.
• src/app/[locale]/layout.tsx définit aussi une balise generator qui nomme l'auteur du template. Modifiez-la ou supprimez-la à cet endroit.
• 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 votre adresse

Étapes suivantes

• Langues et écriture de droite à gauche
• Mettre en ligne