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

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

Pour personnaliser, modifiez directement le contenu des pages. Les informations légales (raison sociale, adresse) sont tirées de APP_CONFIG.legal.

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 :