Le modèle de départ pour les startups d'IA. Authentification, paiement et i18n inclus. English
Concepts de base

Configuration

Réglages du site

Les valeurs par défaut se trouvent dans src/_data/site.defaults.json :

{
  "name": "Votre Startup",
  "url": "https://votrestartup.ai",
  "defaultCurrency": "usd",
  "supportEmail": "[email protected]",
  "dataMode": "demo",
  "apiBaseUrl": ""
}

Les variables d'environnement les remplacent au moment du build : un même code peut servir l'aperçu et la production. Copiez .env.example vers .env pour le travail local, ou vers .env.prod pour les déploiements. Les variables prises en charge sont SITE_NAME, SUPPORT_EMAIL, SITE_URL, DATA_MODE, API_BASE_URL, RECAPTCHA_SITE_KEY, GA4_MEASUREMENT_ID, FLUTTERWAVE_PUBLIC_KEY et PAYSTACK_PUBLIC_KEY. Tout ce qui s'y trouve se retrouve dans le navigateur : n'y mettez jamais de clé secrète.

Forfaits et prix

La page de tarifs, les cartes de la page d'accueil et le paiement lisent tous un seul catalogue, src/_data/plans.json :

{
  "taxRate": 0,
  "plans": [
    { "key": "developer", "prices": { "usd": 499, "cad": 689 }, "featureCount": 6 },
    { "key": "business", "prices": { "usd": 999, "cad": 1379 }, "featureCount": 8, "featured": true }
  ]
}

Les noms, accroches et listes de fonctionnalités sont des clés de traduction comme plan.developer.feature.1. Pour ajouter un forfait, ajoutez une entrée ici et ses textes dans i18n.js. Les boutons de tarifs mènent à /fr/paiement/?plan=<clé>, ce qui ajoute le forfait au panier.

Paiement et codes promo

  • Flutterwave : réglez FLUTTERWAVE_PUBLIC_KEY et le paiement intégré s'ouvre avec le montant et la devise de la commande.
  • Carte et PayPal : ces onglets sont des champs de démo. Branchez votre fournisseur dans placeOrder() de src/js/app.js.
  • Codes promo : les codes de démo (SAVE10, LAUNCH20) se trouvent dans src/js/dataservice.js. En mode réel, GET /v1/coupons/{code} sur votre API doit renvoyer { "pct": 20 } pour un code valide et une erreur 404 (ou 400, 410, 422) pour un code refusé. Toute autre erreur est présentée comme « réessayez ».

Analytique et protection contre les robots

Réglez GA4_MEASUREMENT_ID pour activer GA4. L'entonnoir envoie view_item_list, add_to_cart, begin_checkout et purchase, ainsi que app_error en cas d'échec. Avec GA4_API_SECRET (développement seulement), le serveur de développement valide chaque événement auprès de GA4.

Réglez RECAPTCHA_SITE_KEY pour protéger la connexion, la vérification et les codes promo avec reCAPTCHA v3. Un jeton est obtenu par action et envoyé avec chaque requête d'API.

Barre d'annonce

announcement, dans la configuration du site, affiche un message entre startTime et endTime. La vérification a lieu au build : relancez-le quand la période commence ou se termine.

Thème

Les couleurs sont des jetons dans src/scss/_tokens.scss, avec une série claire et une série sombre. --brand est la couleur d'encre et --on-brand le texte qui se pose dessus. Changez ces deux jetons et leur gamme de gris pour modifier tout le site.

Offre de lancement : 20 % de rabais sur les deux licences avec le code LAUNCH20 au paiement.