Personnaliser le template

Lancez le site avec yarn dev pendant vos modifications : la page se recharge à chaque enregistrement. Tous les chemins ci-dessous sont relatifs au dossier landing-page-template-2.

Les deux paramètres

Sans Docker, placez-les dans .env.local (copiez .env.example). Avec Docker, passez-les en arguments de build : le build de l'image ne lit pas les fichiers .env ni .env.local.

NEXT_PUBLIC_SITE_URL=https://www.your-domain.com

docker build -t saas-landing --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com .

Le nom et le logo de la marque

name dans src/config/site.ts est la marque. Le logo de l'en-tête et du pied de page est sa première lettre dans un carré coloré, suivie du nom, dessiné par src/components/Logo.tsx. Les textes qui contiennent {brand} dans les fichiers de messages l'utilisent aussi.

name: "SaasPro",

La même valeur remplit le titre de la page, la carte de partage sur les réseaux sociaux, le menu Resources et le manifeste de l'application web, que src/app/manifest.ts génère dans les couleurs sombres de la page. Vous changez le nom à un seul endroit.

creator, dans le même fichier, est l'auteur indiqué dans les métadonnées de la page. Changez-le aussi.

Texte

Chaque mot visible, chaque description d'image et le titre de la page se trouvent dans messages/en.json et messages/ar.json. Chaque section a son propre bloc, qui porte son nom : Header, Hero, SocialProof, Features, HowItWorks, Testimonials, Pricing, Comparison, Integrations, Faq, Blog, Cta, Newsletter et Footer.

• Modifiez la valeur, gardez la clé, et faites la modification dans les deux fichiers. Une clé absente d'un fichier s'affiche comme une erreur de message manquant sur la page de cette langue.
• Les mots entre accolades, comme {brand} et {year}, sont remplis par l'application. Gardez-les tels quels.
• Dans HowItWorks.title, les mots entre <highlight> et </highlight> sont affichés dans la couleur en dégradé. Gardez les deux balises.

• Langues

Images

Le plus simple est de remplacer un fichier par le vôtre sous le même nom. Pour un nouveau fichier, placez-le dans public/ et utilisez son chemin depuis la racine du site, comme /images/your-photo.jpg.

Une image d'un autre site web ne se charge que si son hôte figure sous images.remotePatterns dans next.config.js. Seul images.unsplash.com y figure. Ajoutez-y votre hôte, ou copiez les fichiers dans public/.

remotePatterns: [
  { protocol: "https", hostname: "images.unsplash.com" },
  { protocol: "https", hostname: "cdn.your-domain.com" },
],

Prix et formules

Les prix se trouvent à deux endroits, un par section. Modifiez les deux pour qu'ils concordent :

Les fonctionnalités d'une formule sont listées par identifiant dans featureIds, et chaque identifiant a besoin de son texte sous la formule dans les deux fichiers de messages. popular: true marque la formule avec le badge Most Popular.

Les prix sont mensuels, en dollars américains, et formatés selon la langue de la page par src/hooks/usePriceFormatter.ts. Pour afficher une autre devise, remplacez sa valeur par défaut currency = "USD" par votre code de devise, comme "EUR".

Couleurs

• Les couleurs d'accent : les classes Tailwind violettes et roses (purple-*, pink-*) dans les composants, comme from-purple-600 to-pink-500 sur les boutons et le logo. Cherchez purple- et pink- dans le dossier src pour toutes les changer.
• Le fond de la page : bg-gray-950 sur l'élément extérieur de la page dans src/app/[locale]/page.tsx. Les sections utilisent des classes gray-* par-dessus.
• Le bouton et le champ partagés : les variables CSS de src/styles/globals.css, comme --primary et --ring. C'est le bloc .dark qui est utilisé.

La page est toujours sombre : src/app/[locale]/layout.tsx définit la classe dark et démarre le fournisseur de thème avec defaultTheme="dark". Il n'y a ni thème clair ni sélecteur de thème.

Polices

src/lib/fonts.ts charge Inter pour l'anglais et Noto Sans Arabic pour l'arabe depuis Google Fonts, via next/font. Les polices sont téléchargées au moment du build du site, puis servies par le site lui-même. src/app/[locale]/layout.tsx choisit la police selon la langue.

import { Inter, Noto_Sans_Arabic } from "next/font/google";

export const inter = Inter({ subsets: ["latin"] });
export const notoSansArabic = Noto_Sans_Arabic({ subsets: ["arabic"] });

Pour utiliser une autre police Google, importez-la depuis next/font/google à la place de l'une de celles-ci et gardez le nom exporté, ou changez le nom là où layout.tsx l'utilise.

Sections

src/app/[locale]/page.tsx liste les sections dans leur ordre d'affichage. Supprimez une ligne pour masquer une section, ou déplacez-la pour changer l'ordre. Chaque section se trouve dans son propre dossier sous src/features/home/.

<Header />
<Hero />
<SocialProof />
<Features />
<HowItWorks />
<Testimonials />
<Pricing />
<ComparisonTable />
<Integrations />
<Faq />
<BlogPreview />
<Cta />
<Footer />

L'en-tête pointe vers les sections par leur id, comme #pricing et #testimonials. Si vous supprimez une section, supprimez aussi son lien.

Pour ajouter une section :

1. Créez src/features/home/<Section>/ avec un index.tsx, et des dossiers components/ et constants/ comme les autres sections.
2. Ajoutez ses textes sous une nouvelle clé dans les deux fichiers de messages et lisez-les avec useTranslations.
3. Exportez-la depuis src/features/home/index.ts et placez-la dans src/app/[locale]/page.tsx.

La section newsletter

Une section newsletter avec un formulaire d'e-mail est livrée dans src/features/home/Newsletter/, mais elle n'est pas sur la page. Pour l'afficher, importez-la avec les autres et placez-la, par exemple avant l'appel à l'action :

import {
  …
  BlogPreview,
  Newsletter,
  Cta,
} from "@/features/home";

<BlogPreview />
<Newsletter />
<Cta />

Le formulaire a besoin de votre propre API. Réglez NEXT_PUBLIC_API_BASE_URL sur son adresse ; le formulaire envoie { "email": "…" } en JSON dans un POST vers <NEXT_PUBLIC_API_BASE_URL>/newsletter/subscribe, directement depuis le navigateur du visiteur.

• Une réponse 2xx affiche le message de succès et vide le formulaire.
• Toute autre réponse, une erreur réseau ou un NEXT_PUBLIC_API_BASE_URL vide affiche le message d'erreur. Rien n'est envoyé tant que la variable est vide.
• Comme c'est le navigateur qui envoie la requête, votre API doit autoriser l'adresse de votre site dans ses paramètres CORS.

Les textes se trouvent sous Newsletter dans les fichiers de messages.

Liens et boutons

La plupart des liens du template pointent vers # tant que vous ne leur donnez pas de destination :

Les boutons Get Started, Start Free Trial et Book a Demo, ainsi que les boutons des cartes de tarifs, sont de simples boutons sans destination. Pour transformer l'un d'eux en lien, donnez au Button la prop asChild et placez un Link à l'intérieur, comme le fait src/components/LocaleSwitcher.tsx :

import { Link } from "@/i18n/navigation";

<Button asChild className="…">
  <Link href="/signup">{common("getStarted")}</Link>
</Button>

Le Link de @/i18n/navigation conserve la langue du visiteur dans l'adresse. Pour un autre site web, utilisez plutôt un simple <a href="https://…">.

Dates et année du copyright

• L'année du copyright dans le pied de page est l'année du build du site, tirée de COPYRIGHT_YEAR dans src/layouts/Footer/constants/footer.ts. Relancez un build dans la nouvelle année pour la mettre à jour.
• La date et le temps de lecture de chaque carte du blog sont publishedAt et readMinutes dans src/features/home/BlogPreview/constants/articles.ts ; son titre et son résumé se trouvent sous Blog dans les fichiers de messages.

Moteurs de recherche et partage

• Le titre et la description de la page sont Metadata.title et Metadata.description dans chaque fichier de messages : chaque langue a donc les siens.
• NEXT_PUBLIC_SITE_URL donne à chaque page son adresse canonical (/en ou /ar) et les liens entre les deux langues. Réglez-la sur votre domaine avant le build de production, sinon les moteurs de recherche et les cartes sociales pointent vers localhost.
• La carte de partage social utilise public/image.png (1200 par 630) avec le même titre et la même description.
• Le template ne fournit ni sitemap.xml ni robots.txt.