Personnalisation
Personnalisez le contenu, la marque, les prix, les sections, le référencement et les actifs NA-AI en utilisant sa structure axée sur les données.
Personnaliser sans réécrire chaque composantLien vers la section
NA-AI Landing est basée sur les données.
La plupart du contenu de la copie et de la section du produit se trouve dans :
src/@dataCela rend le modèle plus facile à adapter car vous pouvez :
- Mettre à jour l'histoire du produit en premier
- Valider le positionnement rapidement
- Modifier les prix et la messagerie de manière centralisée
- éviter de réécrire tous les composants tôt
Changez l'histoire avant de changer l'interface utilisateur.
Paiement unique — Accès instantané après achat
Idée de base
Commencez par changer les données, pas les composants. Réécrivez l'histoire du produit avant de réécrire l'interface utilisateur.
Ordre de personnalisation recommandéLien vers la section
Mettre à jour les paramètres du siteLien vers la section
EDIT :
src/config/site.tsMise à jour :
- Nom du produit
- tagline
- URL du site
- Titre SEO
- social preview configuration
Mettre à jour le contenu principalLien vers la section
Éditez les fichiers sous :
src/@dataDébuter avec :
- héros
- caractéristiques
- tarification
- témoignages
- FAQ
- CTA
- contact
Remplacer les actifsLien vers la section
Mise à jour :
- logo
- icônes
- Ouvrir les images du graphique
- Twitter preview images
- actifs manifestes
Ajuster la marqueLien vers la section
Mise à jour :
- fontes
- token d'utilisation
- paramètres du thème
- visuels du produit
Ne faites cela qu'une fois que la direction du contenu devient claire.
Tester et déployerLien vers la section
Exécutez la construction de production, inspectez les deux thèmes et validez les mises en page réactives avant le déploiement.
Fondations de personnalisationLien vers la section
Contenu centralisé
Structure SEO-ready
fondations design PyColors
Flux de lancement rapide
Fichiers de donnéesLien vers la section
| Chapitre | Fichier |
|---|---|
| Hero | src/@data/hero.ts |
| Caractéristiques | src/@data/features.ts |
| Intégrations | src/@data/integrations.ts |
| Tarifs | src/@data/pricing.ts |
| Tableau des prix | src/@data/pricing-table.ts |
| Témoignages | src/@data/customers.ts |
| FAQ | src/@data/faq.ts |
| CTA | src/@data/cta.ts |
| Contact | src/@data/contact.ts |
| Footer | src/@data/footer.ts |
| Navbar | src/@data/navbar.ts |
Configuration du siteLien vers la section
EDIT :
src/config/site.tsUtilisez-le pour mettre à jour :
- Nom du produit
- tagline
- URL du site
- Titre SEO
- Description SEO
- Ouvrir l'image graphique
- Twitter image
Règle SEO
Mettez à jour l'URL du site et les ressources de prévisualisation sociale avant de les déployer publiquement.
Branding et tokensLien vers la section
NA-AI Landing utilise:
@pycolors/ui
@pycolors/tokensLes tokens partagés fournissent une base visuelle stable pour:
- couleurs
- surfaces
- frontières
- rayon
- ombres
- focus states
- mode sombre et clair
Règle de conception
Préférez les tokens sémantiques aux valeurs de couleur brutes. Cela permet de garder la page visuellement cohérente entre les thèmes.
Stratégie de contenuLien vers la section
Préférez
- Promesse de produit claire
- Cas d'utilisation spécifique AI ou SaaS
- Étiquettes courtes
- Sections orientées vers les preuves
- prix aligné avec votre offre
Éviter
- générique AI buzzwords
- Changer chaque composant en premier
- Trop de CTA concurrents
- Supprimer les sections de confiance
- Publication avec des actifs SEO par défaut
Prévisualiser l'identité et les destinationsLien vers la section
src/config/template.ts centralise l'avis de prévisualisation et les liens vers la page produit, la documentation et le support PyColors. Remplacez ces liens et adaptez la bannière à components/layout/navbar.tsx lors du lancement de votre propre produit. Les sections de navigation et de pied de page restent configurées dans src/@data.
Remplacer le contenu de l'échantillon
NA-AI Analytics est une fiction. Des mesures, des témoignages, des intégrations, des plans SaaS et des descriptions de capacités illustrent la mise en page. Remplacez-les par un contenu précis pour votre produit avant de le publier. Les plans d'échantillonnage sont distincts du prix d'achat de NA-AI Landing.
Apparence et mouvementLien vers la section
La palette claire et sombre, les rayons et les aides à la mise en page sont définis dans src/app/globals.css. Utilisez les tokens sémantiques existants dans vos sections pour que les deux apparences restent cohérentes.
Les animations d'entrée s'exécutent une fois et respectent la préférence de mouvement réduit du visiteur. components/motion/reveal.tsx garde le contenu visible dans le HTML rendu par le serveur et ajoute un mouvement après que la section entre dans la fenêtre d'affichage. La FAQ utilise des divulgations natives afin que les réponses puissent être ouvertes avec un clavier, y compris sans JavaScript.
Connectez le formulaire de contactLien vers la section
La forme en components/sections/contact.tsx est une démonstration locale : elle valide les champs obligatoires, puis confirme qu'aucun message n'a été envoyé. Les entrées ne sont ni envoyées ni enregistrées. La soumission est désactivée sans JavaScript.
Ajoutez votre propre gestionnaire de soumissionLien vers la section
Connectez votre backend, validez l'entrée sur le serveur et gérez les erreurs avant d'afficher une confirmation de livraison. Aucun service de messagerie n'est inclus.
Adapter la copieLien vers la section
Mise à jour src/@data/contact.ts, l'avis de démonstration et le message de confirmation pour décrire ce que votre gestionnaire fait réellement. Les paramètres de contact de vente hérités ne sont pas utilisés par la démo locale.
Vérifiez l'interaction complèteLien vers la section
Testez les états d'entrée non valides, de focus clavier, de succès et d'échec sur mobile et bureau. Vérifiez le service de réception avant de déclarer qu'un message a été livré.
Personnaliser les prixLien vers la section
Le contenu des prix est réparti entre :
src/@data/pricing.ts
src/@data/pricing-table.tsUtilisez-le pour mettre à jour :
- Noms des régimes
- Tarifs mensuels et annuels
- Lignes de comparaison
- Disponibilité des fonctionnalités
- Étiquettes CTA
- Positionnement copie
Règle de tarification
Les prix devraient clarifier la décision d'achat, pas seulement les caractéristiques de la liste.
Personnaliser le SEO et les actifsLien vers la section
Mettre à jour les images de prévisualisation sociale :
public/seo/og-main.jpg
public/seo/twitter-main.jpgIcônes de mise à jour :
public/iconsMettre à jour le manifeste Web :
public/manifest.webmanifestFlux de travail recommandéLien vers la section
Un chemin de personnalisation à fort effet de levier ressemble généralement à ceci:
- Définir le positionnement
- mise à jour héros et prix
- remplacer les actifs de marque
- ajuster les preuves et les témoignages
- Valider les métadonnées SEO
- affiner la mise en page et les visuels
- Déployer publiquement
Cela maintient le processus de lancement axé sur la clarté et la conversion avant la suringénierie visuelle.
Principe de positionnement
Une page de destination devient précieuse lorsque l’offre est claire, crédible et facile à comprendre rapidement.