> ## Documentation Index > Fetch the complete documentation index at: https://supastack.dev/llms.txt > Use this file to discover all available pages before exploring further. > For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt # Pages marketing Sections d'accueil, pages légales, FAQ, changelog et configuration du site. ## Parcours pas à pas pour débuter Prérequis : Lisez les deux guides pour débutants ci-dessous, terminez la configuration locale du Web et ouvrez ce monorepo à sa racine dans votre éditeur. Les paramètres Web appartiennent à `apps/web/.env.local` ; Next.js ne lit pas la racine `.env`. `/dashboard` dans le mode faux par défaut est une démo sans base de données ; `/auth` nécessite une base de données migrée. Termes rapides : un espace de travail est constitué des utilisateurs, des données et des paramètres distincts d'une équipe. Le serveur est le backend de confiance ; gardez les clés du fournisseur hors du code du navigateur et du téléphone. Une migration est une modification de base de données versionnée qui crée ou met à jour des tables. Un modèle d'IA est le moteur qui répond ; le catalogue de modèles est la liste du serveur des identifiants de modèles et des prix disponibles. Un fournisseur est un service externe tel qu'un service d'IA, de messagerie ou de facturation. Un droit est une subvention qui permet à un espace de travail d'utiliser une fonctionnalité. Un webhook est un message qu'un service envoie au URL d'un autre service. 1. Ouvrez `apps/web/src/marketing/site-config.ts` et modifiez le nom du produit, le slogan, les étiquettes/URL de navigation et l'adresse d'assistance par les valeurs que vous possédez. 2. Remplacez `apps/web/public/og.png` et mettez à jour son texte alternatif et ses dimensions dans `apps/web/src/marketing/seo.tsx` en une seule modification. 3. Actualisez l'accueil, le FAQ, le pied de page et l'aperçu social. Si l'ancien texte reste, recherchez l'ancien nom dans ce référentiel avant de le publier. Pour le code personnalisé, commencez par le `prompts/README.md` fourni et copiez l'invite la plus proche : `prompts/new-app-screen.md` pour un écran d'application ou `prompts/new-landing-page.md` pour une page publique. Pour le travail sur un serveur, une base de données ou un fournisseur, confiez à votre agent de codage la tâche de ce guide et demandez-lui de lire les miroirs `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` et `.ai/` correspondants ; inspectez les fichiers sources exacts nommés ici ; lister les fichiers et les vérifications avant de les modifier ; préserver la propriété de l'espace de travail et les secrets du serveur ; et je vous montre la différence. Indiquez-lui le comportement souhaité, les champs d'entrée et de sortie, les rôles autorisés, les succès et erreurs attendus, ainsi que le compte, le fournisseur ou l'appareil de test. Utilisez des exemples de valeurs ; ne collez jamais un vrai secret. [Avant de commencer](https://supastack.dev/fr/docs/web/before-you-start.md) [Bases du terminal](https://supastack.dev/fr/docs/web/terminal-basics.md) [Configuration locale Web](https://supastack.dev/fr/docs/web/ship-in-5-minutes.md) [Invites de l'agent et mémoire du projet](https://supastack.dev/fr/docs/web/agents.md) ## Mettre à jour la configuration du site `apps/web/src/marketing/site-config.ts` définit les textes de marque, les liens de navigation et de pied de page, la FAQ ainsi que les destinations facultatives vers le dépôt et la documentation. Modifiez cette configuration avant de disséminer le nom du produit dans les composants. Le chrome du kit l’utilise ; les blocs de chrome copiables reçoivent des propriétés produit. ## Remplacer ensemble la famille d’icônes La marque partagée à quatre tuiles utilise du blanc en haut à gauche et en bas à droite, du gris en haut à droite et en bas à gauche, avec de fins contours. Les marques d’en-tête restent transparentes ; les icônes de l’application et le favicon utilisent un fond noir arrondi. Les produits dérivés peuvent remplacer la marque et les ressources associées de l’application et du bureau ensemble. La carte sociale publique partagée est `/og.png` ; actualisez sa description dans `marketing/seo.tsx` avec ses dimensions et son texte alternatif. Les cartes des articles de blog utilisent leur propre route d’image Next. ## Vérifier chaque surface publique Vérifiez l’en-tête et le pied de page, les contacts, la FAQ, les pages légales, le texte localisé de l’accueil, les titres et les cartes sociales. Choisissez le mode de thème marketing du produit et ne publiez que des liens d’assistance et de contact fonctionnels. [Styles de produits](https://supastack.dev/fr/docs/web/theming.md) [Échafaudage de page juridique](https://supastack.dev/fr/docs/web/project-structure.md) [Métadonnées et cartes sociales](https://supastack.dev/fr/docs/web/project-structure.md) ## Configuration et paramètres La surface marketing est câblée sur des données typées plutôt que du JSX en dur — hero, sections de fonctionnalités, pricing, FAQ, changelog, showcase, contact et pages légales lisent leur copy et leur structure depuis la configuration du site et les fichiers de contenu. MARKETING_THEME_MODE (src/theme/marketing-theme.ts) décide si le marketing reste sur la marque sombre verrouillée du kit, hérite du pack de thème du visiteur ou épingle un pack précis. Les produits dérivés choisissent leur propre mode. ``` src/marketing/ branded chrome and sections src/kit/blocks/ copyable token-only section patterns marketing/ hero, features, product grid, pricing, FAQ, CTA app/ stat grid, data table, empty state, choice pills chrome/ site header, footer, prose page MARKETING_THEME_MODE = "locked" | "inherit" | "" ``` ## Processus d’implémentation Composez les pages d'abord depuis la bibliothèque de blocks ; quand un motif manque, écrivez un nouveau block dans le même style token-only et enregistrez-le dans src/kit/blocks.ts. Gardez les composants marketing hors des surfaces produit — les deux systèmes de chrome restent séparés. La copy localisée passe par les overlays de dictionnaire et de site-content ; ajoutez-y les clés plutôt que de forker des composants par langue. ## Vérification et dépannage Vérifiez une page marketing à 320px et desktop, avec un focus clavier visible, sous au moins un pack clair et un sombre, et avec reduced motion. Si une affirmation marketing cite une capacité, assurez-vous que la page de doc liée existe. ## Suivant [SEO et partage](https://supastack.dev/fr/docs/web/seo.md)