Personnalisation

Adapter HeartCo à votre marque : nom, couleurs, emails, sidebar, pages légales.

Branding

Fichier : src/lib/config/branding.ts

Toute la configuration de marque est centralisée dans l'objet APP_CONFIG. Chaque valeur est configurable via variable d'environnement :

Identité

Emails

Couleurs

Réseaux sociaux

Configurables via APP_CONFIG.social : twitter, linkedin, github, discord, instagram, youtube (vides par défaut).

Informations légales

Exemple de personnalisation

Pour rebaptiser l'app "MonSaaS" :

NEXT_PUBLIC_APP_NAME="MonSaaS"
NEXT_PUBLIC_APP_SHORT_NAME="MS"
NEXT_PUBLIC_APP_TAGLINE="La solution tout-en-un pour votre business"
NEXT_PUBLIC_APP_DOMAIN="monsaas.fr"
NEXT_PUBLIC_APP_EMAIL="contact@monsaas.fr"
NEXT_PUBLIC_SUPPORT_EMAIL="support@monsaas.fr"
NEXT_PUBLIC_NOREPLY_EMAIL="noreply@monsaas.fr"
NEXT_PUBLIC_COMPANY_NAME="MonSaaS SAS"

Tailwind et thème

Fichier principal

src/styles/globals.css contient les tokens CSS et la configuration Tailwind v4.

Tokens CSS sémantiques

HeartCo utilise des custom properties CSS pour le thème clair et sombre :

:root {
  --background: ...;
  --foreground: ...;
  --primary: ...;
  --primary-foreground: ...;
  --secondary: ...;
  --card: ...;
  --border: ...;
  --ring: ...;
  /* ... */
}
 
.dark {
  --background: ...;
  --foreground: ...;
  /* ... variantes sombres */
}

Couleurs personnalisées

:root {
  --color-brand: #6366f1;
  --color-deep-navy: #0d1b2a;
  --color-ai-blue: ...;
  --color-ai-cyan: ...;
}

Dark mode

Le dark mode est géré par next-themes. Utiliser toujours les tokens CSS sémantiques, jamais de couleurs hardcodées :

// ✅ Correct — utilise les tokens
<div className="bg-background text-foreground border-border">
 
// ❌ INTERDIT — couleurs hardcodées
<div className="bg-white text-gray-900 border-gray-200">

Fusion de classes

Utiliser cn() (clsx + tailwind-merge) pour merger les classes :

import { cn } from "~/lib/utils";
 
<button className={cn(
  "px-4 py-2 rounded-md",
  variant === "primary" && "bg-primary text-primary-foreground",
  variant === "outline" && "border border-input",
  className
)} />

Navigation (Sidebar)

Fichier : src/lib/navigation/nav-config.ts

Structure

La sidebar est organisée en 8 sections avec des couleurs sémantiques :

Modifier un item

Pour changer le label, l'icône ou le chemin d'un module :

// src/lib/navigation/nav-config.ts
{
  id: "crm",
  label: "Mon CRM",        // ← Modifier le label
  path: "/dashboard/crm",
  icon: Target,             // ← Changer l'icône (Lucide)
  badge: "core",
  moduleId: "MODULE_CRM",
}

Items du footer

3 items fixes en bas de la sidebar :

• Marketplace — /dashboard/marketplace
• Aide — /help
• Paramètres — /dashboard/parametres

Badges

Pages légales

Important : les 5 pages légales fournies sont des templates génériques. Vous devez remplacer leur contenu par vos propres textes avant toute mise en production. Un bandeau d'avertissement (showBoilerplateDisclaimer) s'affiche tant que vous n'avez pas personnalisé le contenu.

Les pages légales sont dans le route group src/app/(legal)/ :

Personnalisation

1. Ouvrez chaque fichier et remplacez le contenu textuel par vos mentions légales réelles
2. Les informations légales dynamiques (raison sociale, adresse, SIRET) sont tirées de APP_CONFIG.legal — configurez-les via les variables d'environnement NEXT_PUBLIC_LEGAL_*
3. Pour supprimer le bandeau d'avertissement, retirez la prop showBoilerplateDisclaimer du composant
4. Faites relire vos textes par un juriste avant la mise en production

Templates d'emails

Dossier : src/lib/emails/templates/

6 templates lifecycle prêts à l'emploi :

Personnaliser un template

Les templates utilisent Resend avec du HTML inline. Pour modifier :

1. Ouvrir le fichier template dans src/lib/emails/templates/
2. Modifier le HTML, les textes, les couleurs
3. Les variables dynamiques (nom, lien, etc.) sont passées en paramètre

Templates de relance

Les relances (src/lib/emails/relances.ts) utilisent des variables de substitution :

Recettes (recipes)

Quatre opérations classiques de personnalisation, prêtes à coller.

1. Renommer la marque "HeartCo" en "MonSaaS"

La marque est centralisée dans apps/web/src/lib/config/branding.ts et exposée via les variables d'environnement NEXT_PUBLIC_APP_*. Règle d'or : toujours utiliser APP_CONFIG.name côté code, jamais "HeartCo" en dur.

1. Mettre à jour le .env (ou les variables Vercel en prod) :

NEXT_PUBLIC_APP_NAME="MonSaaS"
NEXT_PUBLIC_APP_DOMAIN="monsaas.fr"
NEXT_PUBLIC_APP_URL="https://app.monsaas.fr"

2. Rechercher les références hardcodées résiduelles (rares — à corriger si trouvées) :

# Avec ripgrep
rg -i "heartco" apps/web/src --type ts --type tsx

3. Fichiers à inspecter manuellement (peuvent contenir le nom hors APP_CONFIG) :
   • apps/web/src/lib/config/branding.ts (centralise la marque)
   • Pages légales apps/web/src/app/(legal)/*.tsx (à personnaliser de toute façon)
   • Templates emails apps/web/src/lib/emails/templates/ (HTML inline, signature, footer)

2. Remplacer le logo

Le logo est servi via apps/web/public/ (3 fichiers SVG : logo.svg, logo-dark.svg, logo-mark.svg).

1. Remplacer les 3 fichiers SVG par les vôtres (mêmes noms, mêmes dimensions cibles)
2. Si format différent (PNG/JPG), modifier apps/web/src/components/layout/logo.tsx pour pointer vers le nouveau chemin
3. En production Vercel, redéployer pour invalider le cache CDN

3. Changer la couleur primary

La couleur de marque est un token CSS dans apps/web/src/styles/globals.css. Tous les composants utilisant bg-primary, text-primary, border-primary héritent automatiquement.

/* apps/web/src/styles/globals.css */
:root {
  --color-brand: #VOTRE_COULEUR;  /* Remplacer #6366f1 */
}

Hot reload immédiat en dev (pnpm dev), pnpm build requis en prod.

4. Désactiver un module de la sidebar sans le supprimer

Voir la procédure complète dans 05-modules.md — résumé :

1. Ouvrir apps/web/src/lib/navigation/nav-config.ts
2. Commenter l'item dans le tableau children de la section concernée
3. Le router tRPC peut rester en place — il devient simplement inaccessible via la sidebar

◀ Paiements · Sommaire · Sécurité ▶