🌿 LIPO BEAUTY - Cahier des charges complet

📋 INFORMATIONS GÉNÉRALES

🎯 OBJECTIFS DU PROJET

• Design naturel et chaleureux mettant en valeur les produits aloe vera
• Système de réservation intégré avec Google Agenda
• E-commerce avec redirection boutique partenaire
• Panel d'administration complet
• Newsletter automatisée avec promotions

💻 ENVIRONNEMENT DE DÉVELOPPEMENT

Setup Visual Studio Code + Claude Code

📁 lipo-beauty-project/
├── 📄 CLAUDE.md                    # Ce cahier des charges
├── 📁 documents_site/               # Ressources existantes
│   ├── 📄 adv-forever-therm2.pdf
│   ├── 📄 BIEN VIVRE S...NATUREL.pdf  
│   ├── 🖼️ logo_lipobeauty.png
│   └── 📄 Programme C...7 05 2025.pdf
├── 📁 Sites inspiration/            # Références design
├── 📁 mon site a migrer/            # Site actuel lipo-beauty.fr
└── 📁 src/                         # Code à développer

Commandes de démarrage

🏗️ ARCHITECTURE TECHNIQUE

Stack Technologique

• Frontend : Next.js 14 + React 18 + TypeScript
• Backend : Node.js + Express.js + TypeScript
• Base de données : MySQL + Prisma ORM
• Authentification : NextAuth.js avec 2FA
• Paiement : Stripe + PayPal
• Email : Resend ou SendGrid
• Hébergement : VPS OVH.net
• Storage : Cloudinary (recommandé) pour optimisation images automatique

Intégrations API

• Google Calendar API (réservations)
• Google Maps API (localisation)
• Stripe API (paiements)
• Resend/SendGrid API (emails)
• API Forever Living (produits partenaires)
• Cloudinary API (gestion médias optimisée)

🎨 DESIGN SYSTEM

Palette de couleurs

Typographie

• Titres : Inter ou Poppins (moderne, clean)
• Corps : Source Sans Pro (lisible, professionnel)
• Accents : Dancing Script (élégant pour citations)

Style visuel

• Textures naturelles subtiles
• Animations fluides au scroll (AOS ou Framer Motion)
• Cards avec ombres douces et coins arrondis
• Effets hover élégants
• Iconographie ligne claire (Lucide React)

📱 FONCTIONNALITÉS PRINCIPALES

1. INTERFACE PUBLIQUE

Page d'accueil

• Hero section avec video/slider d'ambiance spa
• Présentation des services principaux
• Témoignages clients avec photos
• Section produits naturels (aloe vera focus)
• Call-to-action réservation prominente
• Newsletter signup avec incentive
• Certification et labels qualité

Pages services

• Catalogue complet des soins avec tarifs
• Photos avant/après (avec consentement)
• Durée et description détaillée
• Bouton réservation direct
• Produits recommandés post-soin

E-commerce

• Catalogue services : 5 soins avec tarifs et descriptions
• Produits propres : ~10 articles soins/nutrition
• Produits Forever Living : ~50 références avec redirection
• Fiches produits détaillées avec ingrédients
• Système de panier mixte (site + externe)
• Checkout intelligent : paiement direct ou redirection
• Gestion stock produits propres uniquement
• API synchronisation Forever Living (si disponible)
• Cartes cadeaux pour services uniquement

Outils interactifs & Lead Generation

• Calculateur IMC complet avec interprétation personnalisée
  • Interface intuitive (slider ou saisie)
  • Résultats avec conseils adaptés
  • Suggestions de soins selon IMC/objectifs
  • Call-to-action vers consultation personnalisée
• Quiz diagnostic peau/silhouette
  • Questions sur mode de vie, objectifs, zones à traiter
  • Recommandations soins personnalisées
  • Collecte email en échange des résultats
• Simulateur de résultats (photos avant/après anonymes)
• Guide des soins interactif par zone du corps
• Test "Quel soin pour moi ?" avec orientation automatique

2. SYSTÈME DE RÉSERVATION

Interface client - Réservation optimisée solo

• Calendrier avec disponibilités praticienne unique
• Mode "Sur RDV" : sélection jour puis créneaux libres
• Sélection service (5 choix) avec durées automatiques
• Formulaire client simplifié + préférences
• Options spéciales :
  • Paiement : en ligne ou sur place
  • Réservation produits à récupérer sur place
  • Demandes particulières (lieu, matériel, etc.)
• Proposition créneaux alternatifs si complet
• Confirmation immédiate + ajout Google Agenda

Intégration Google Agenda

• Synchronisation bidirectionnelle
• Création automatique des événements
• Invitations automatiques client + praticienne
• Gestion des annulations/reports

Système de rappels

• Email de confirmation immédiate
• Rappel J-2 (48h avant)
• Rappel J-1 (24h avant)
• Rappel H-2 (2h avant)
• Possibilité d'annuler/reporter via email

3. GESTION NEWSLETTER & PROMOTIONS

Newsletter

• Collecte emails avec popup non-intrusif
• Segmentation par intérêts (soins/produits)
• Templates responsive personnalisables
• Programmation envois (hebdo/mensuel/ponctuel)
• Analytics ouvertures/clics
• Désabonnement simplifié (RGPD)

Système promotionnel

• Offres flash pour les 10 premiers répondants
• Remise automatique 30% sur sélection
• Codes promo personnalisés
• Programme de fidélité avec points
• Parrainage avec récompenses

6. BLOG & CONTENT MARKETING

Blog SEO-optimisé pour attirer prospects

• Catégories principales :
  • Conseils minceur et nutrition
  • Soins naturels et aloe vera
  • Bien-être et estime de soi
  • Avant/après et témoignages clients
  • Actualités du centre
• Articles stratégiques pour SEO local :
  • "Les bienfaits de l'aloe vera pour la peau"
  • "Comment calculer son IMC et interpréter les résultats"
  • "5 conseils pour préparer sa peau avant un soin esthétique"
  • "Soins naturels vs chimiques : que choisir ?"
  • "Routine beauté post-soin : nos conseils d'experte"
• Fonctionnalités blog :
  • Éditeur WYSIWYG pour création articles
  • Tags et catégories pour organisation
  • Partage réseaux sociaux (Instagram focus)
  • Commentaires clients avec modération
  • Articles liés automatiques
  • Newsletter integration (articles récents)

Intégration réseaux sociaux

• Widget Instagram : flux @kmb.lipobeauty en homepage
• Partage automatique : nouveaux articles vers Instagram Stories
• Boutons partage : chaque article vers Instagram/Facebook
• Témoignages : import posts Instagram clients (avec permission)

Dashboard personnel

• Historique des rendez-vous avec photos
• Historique achats et factures
• Programme de fidélité et points
• Prochains rendez-vous avec actions
• Produits favoris et wishlist
• Profil modifiable (infos perso + préférences)

Fonctionnalités avancées

• Carnet de suivi personnalisé
• Rappels personnalisés (hydratation, soins, etc.)
• Chat support intégré
• Partage d'expérience (avis + photos)

4. ESPACE CLIENT

Gestion contenu & SEO

• CMS intégré pour pages/articles
• Éditeur WYSIWYG pour contenu blog
• Gestion médias Cloudinary (upload/organisation)
• SEO manager (meta, sitemap, robots.txt)
• Blog management :
  • Création/édition articles avec preview
  • Planification publication
  • Statistiques vues/engagement
  • Gestion catégories et tags
  • Modération commentaires

Analytics & Performance

• Dashboard prospects :
  • Calculs IMC effectués (source de leads)
  • Quiz complétés avec emails collectés
  • Articles les plus lus
  • Taux conversion blog → réservation
• Intégration Instagram :
  • Import automatique posts @kmb.lipobeauty
  • Statistiques engagement
  • Gestion témoignages clients

Gestion planning et disponibilités

• Interface praticienne unique pour définir disponibilités
• Système flexible "sur RDV" (pas de jours fixes)
• Blocage créneaux personnels/congés
• Durées variables selon services (30min à 3h)
• Gestion pauses entre rendez-vous
• Vue planning semaine/mois avec exports

Customisation

• Modification palette couleurs en temps réel
• Upload/modification logos et médias
• Personnalisation emails automatiques
• Gestion menus et navigation
• Paramètres généraux site

5. PANEL ADMINISTRATEUR

Sécurité technique

• HTTPS obligatoire (SSL/TLS)
• Protection CSRF/XSS
• Rate limiting API
• Validation/sanitisation inputs
• Hachage sécurisé mots de passe (bcrypt)
• 2FA pour admin (TOTP)
• Logs sécurité complets
• Sauvegarde automatique DB

Conformité RGPD

• Cookie banner avec choix granulaires
• Politique de confidentialité complète
• Mentions légales
• Droit à l'effacement (client)
• Export données personnelles
• Consentements tracking marketing
• DPO contact et procédures

Paiements sécurisés

• PCI DSS compliance via Stripe
• Chiffrement données sensibles
• Tokenisation cartes bancaires
• 3D Secure activation
• Logs transactions audit

📁 GESTION MÉDIAS & STORAGE

Stockage Cloudinary (recommandé)

🖼️ Images principales

• Photos services : avant/après soins (avec consentements)
• Photos produits : catalogue ~10 produits + packshots HD
• Photos ambiance : cabinet, matériel, praticienne en action
• Témoignages visuels : clients satisfaites (anonymisées)
• Logos : versions HD, favicon, formats multiples (PNG, SVG, WebP)

📱 Médias dynamiques

• Videos courtes : présentation cabinet, démonstrations soins
• Bannières saisonnières : promotions, annonces spéciales
• Images newsletter : templates et visuels marketing

📄 Documents générés

• Factures PDF automatiques avec branding
• Bons cadeaux personnalisés avec QR codes
• Fiches conseils post-soin téléchargeables
• Certificats et labels qualité

Configuration Cloudinary

Avantages techniques

• Performance : CDN ultra-rapide vs stockage VPS
• Optimisation : Compression intelligente automatique
• Backup : Redondance mondiale, zéro risque perte
• Coût : ~10€/mois vs surcharge VPS + bande passante

Optimisation SEO

• Structure HTML sémantique
• Meta tags dynamiques
• Données structurées Schema.org
• Sitemap XML automatique
• Optimisation images (WebP, lazy loading)
• URLs friendly et breadcrumbs
• Maillage interne optimisé

Performance optimisée

• Score Lighthouse > 90
• Images Cloudinary : WebP/AVIF automatique + lazy loading
• Compression Gzip/Brotli
• CDN Cloudinary pour ressources statiques
• Cache intelligent (Redis)
• Bundle JavaScript optimisé
• Optimisation Core Web Vitals (LCP, FID, CLS)

📱 RESPONSIVE & ACCESSIBILITÉ

Design responsive

• Mobile-first approach
• Breakpoints : 320px, 768px, 1024px, 1440px
• Touch-friendly (boutons min 44px)
• Menu hamburger mobile
• Swipe gestures produits/témoignages

Accessibilité

• Contraste WCAG AA (4.5:1)
• Navigation clavier complète
• Alt-text images descriptif
• ARIA labels appropriés
• Focus indicators visibles
• Texte redimensionnable 200%

🚀 CHECKLIST DE DÉVELOPPEMENT

Phase 1 : Setup & Analysis (Semaines 1-2)

• Analyse ressources existantes :
  • Extraction contenu des PDFs (Forever Living, guide bien-être)
  • Optimisation logo et assets visuels
  • Analyse site actuel lipo-beauty.fr
  • Étude sites inspiration (estheclinic.fr, esthetic-center.com)
• Setup environnement Next.js + TypeScript
• Configuration base de données MySQL + Prisma
• Design system et composants UI de base
• Authentification NextAuth.js + 2FA

Phase 2 : Core Features (Semaines 3-5)

• Système de réservation complet
• Intégration Google Calendar API
• Système d'emails automatiques
• Calculateur IMC avec lead capture
• Quiz diagnostic peau/silhouette
• Catalogue produits et e-commerce
• Panel administrateur base
• Espace client avec dashboard

Phase 3 : Content Marketing & Advanced Features (Semaines 6-7)

• Blog SEO avec CMS intégré
• Intégration Instagram @kmb.lipobeauty
• Newsletter avec segmentation
• Système de fidélité et promotions
• Analytics prospects et lead scoring
• Optimisations SEO et performance
• Tests et debug approfondis

Phase 4 : Polish & Deploy (Semaine 8)

• Design final et animations
• Tests sécurité et RGPD
• Documentation complète
• Déploiement VPS OVH
• Formation client et maintenance

🎯 SPÉCIFICATIONS TECHNIQUES DÉTAILLÉES

Structure base de données optimisée

API Endpoints essentiels

Auth: /api/auth/* (NextAuth)
Appointments: /api/appointments
Products: /api/products  
Orders: /api/orders
Newsletter: /api/newsletter
Payments: /api/payments (Stripe webhook)
Calendar: /api/calendar (Google sync)

-- Nouveaux endpoints content marketing
Blog: /api/blog (CRUD articles)
IMC: /api/tools/imc (calculateur + tracking)
Quiz: /api/tools/quiz (diagnostic + lead capture)
Instagram: /api/social/instagram (sync posts)
Analytics: /api/analytics (dashboard prospects)

Admin: /api/admin/*

Variables d'environnement

🗂️ RESSOURCES DISPONIBLES

Fichiers du dossier "documents_site"

• Logo officiel : logo_lipobeauty.png (à intégrer)
• Documentation produits :
  • adv-forever-therm2.pdf (Forever Living)
  • BIEN VIVRE S...NATUREL.pdf (guide bien-être)
  • Programme C...7 05 2025.pdf (planning/tarifs)
• À analyser pour contenu : descriptions, tarifs, planning

Sites d'inspiration (à analyser)

1. www.estheclinic.fr : Structure navigation et présentation services
2. www.esthetic-center.com : Design et expérience utilisateur

Site actuel (lipo-beauty.fr)

• Contenu à migrer : textes, images, structure
• SEO existant à préserver
• Analytics à récupérer

À créer/rédiger pour content marketing

• Articles blog stratégiques (15-20 articles minimum) :
  • "Calculer et comprendre son IMC : guide complet"
  • "Aloe vera : le secret d'une peau parfaite"
  • "Préparer sa peau avant un soin esthétique"
  • "Soins naturels vs chimiques : guide comparatif"
  • "5 routines beauté post-soin efficaces"
  • "Bien-être et estime de soi : l'approche holistique"
• Contenu réseaux sociaux
  • Templates Stories Instagram
  • Posts carrousel éducatifs
  • Témoignages clients (avant/après)
• Lead magnets
  • Guide PDF "10 conseils beauté naturelle"
  • Planning soins personnalisé
  • Checklist préparation rendez-vous

🔄 MAINTENANCE & ÉVOLUTIONS

Monitoring

• Analytics Google + dashboard custom
• Monitoring uptime et performance
• Alerts erreurs et sécurité
• Backup automatique quotidien

Évolutions futures possibles

• Application mobile (React Native)
• Booking widget pour partenaires
• Programme d'affiliation
• Chatbot IA pour support
• Réalité augmentée pour simulateur