donnees_copiees_20260314_165935

📋 Fiche Descriptive : GradientLeads AI Dashboard

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template donnees_copiees_20260314_165935.html

Version 1.0.0

Date de création 16/03/2026

Auteur / Designer Refoia Jeremy Tech (Analyse par Gemini AI)

Type de page Dashboard / Interface de Prospection IA (SDR Mode)

Objectif principal Centraliser les leads prioritaires et les insights de vente générés par IA

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une interface de Sales Development Representative (SDR) haut de gamme. Il permet à l’utilisateur de :

Visualiser ses performances (Conversion, Temps gagné, Objectifs).

Gérer un pipeline de leads scorés par intelligence artificielle.

Accéder à des suggestions stratégiques (Insights) pour optimiser le timing d’envoi des emails.

Surveiller l’état des intégrations avec les outils tiers (HubSpot, Salesforce, Slack).

📌 Public cible (Persona)

👤 Sales & SDR : Pour automatiser la rédaction de scripts de prospection.

👤 Managers Commerciaux : Pour suivre l’atteinte des objectifs mensuels.

👤 Growth Hackers : Pour exploiter les tendances multi-canales détectées par l’IA.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 (Sémantique respectée : nav, section, h1-h3).

Framework CSS : Tailwind CSS (via CDN).

Framework JS : Aucun (Statique pour le moment).

Typographie : Plus Jakarta Sans (Google Fonts).

Responsive : ✅ Oui (Système de grille 12 colonnes adaptatif lg:col-span).

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 user_first_name str ✅ Oui Prénom affiché dans le message de bienvenue (ex: Alex).

2 new_scripts_count int ✅ Oui Nombre de scripts générés par l’IA.

3 conversion_rate str ❌ Non Pourcentage d’augmentation de la conversion.

4 leads_list array ✅ Oui Liste des prospects (Nom, Société, Score IA).

5 ai_insight_text str ✅ Oui Conseil contextuel généré par l’algorithme.

🧱 STRUCTURE DU FICHIER — DOM

index.html

nav (Glassmorphism) : Logo « GradientLeads AI », badge de statut (SDR Mode), avatar utilisateur.

main (Grid 12 cols) :

Section Hero (Col-8) : Accueil personnalisé + 3 Cards de KPIs (Conversion, Temps, Objectif).

Section Pipeline (Col-8) : Liste des leads avec badges de couleur et bouton « Générer Script ».

Sidebar Insights (Col-4) : Bloc de recommandation IA (Gradient BG) + Liste des intégrations.

🎨 CHARTE GRAPHIQUE

🎨 Palette de Couleurs (Design System)

Primaire (Indigo) : #6366f1 (Boutons, textes clés).

Accent (Purple/Pink) : #a855f7 à #ec4899 (Gradients vibrants).

Background : #f8fafc (Slate 50).

Surfaces (Glass-card) : Blanc avec 80% d’opacité et backdrop-filter: blur(12px).

📐 Mise en Page

Bordures : ultra-round (32px) pour un look moderne et logiciel (SaaS).

Ombres : Ombres portées colorées (shadow-indigo-100/50) pour donner de la profondeur.

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Gradients Vérifier le rendu Le texte et le fond doivent afficher le dégradé linéaire.

2 Responsive Réduire la fenêtre Les colonnes lg:col-span-8/4 doivent passer en pile verticale (100% width).

3 Interactivité Hover sur les cards Une légère mise à l’échelle (scale-[1.01]) doit se produire.

📌 INSTRUCTIONS SPÉCIALES POUR L’IA

Optimisation des images : Si des avatars sont ajoutés, utiliser le format .webp.

Accessibilité : Ajouter des aria-label sur les boutons « Générer Script ».

Performance : En cas de passage en production, extraire le CSS personnalisé dans un fichier .css minifié.