gradientleads_ai_business_plan

Fiche Descriptive Complète : GradientLeads AI

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template gradientleads_ai_business_plan.html

Version 1.0.0

Date de création 16/03/2026

Auteur / Designer Refoia Jeremy Tech

Type de page Landing Page Executive / Business Plan Interactif

Objectif principal Présenter une stratégie commerciale B2B avec une esthétique « Glassmorphism » moderne

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est une vitrine immersive destinée à présenter un plan d’affaires pour une solution d’IA. Il utilise des effets visuels avancés (gradients animés, flous d’arrière-plan) pour capter l’attention. La structure est segmentée en « cards » thématiques pour une lecture rapide des indicateurs clés (TAM/SAM, Projections ARR, Vision).

📌 Public cible (Persona)

👤 Investisseurs (VC/Business Angels) recherchant une présentation claire et technologique.

👤 Partenaires stratégiques souhaitant comprendre la valeur ajoutée de l’outil.

👤 Équipes internes pour aligner la vision de croissance 2026.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 Sémantique.

Framework CSS : CSS Pur (Custom Properties / Variables).

Responsive : ✅ Oui (Grid Layout adaptatif).

Browsers ciblés : Chrome, Firefox, Safari, Edge (Support Webkit requis pour les dégradés de texte).

📦 Dépendances / Assets

Google Fonts : Inter (400, 600, 800) pour une typographie premium.

Icônes : Emojis natifs intégrés dans des icon-box stylisés.

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 projet-titre str ✅ Oui Nom du projet (ex: GradientLeads AI)

2 badge str ✅ Oui Étiquette de contexte (ex: Stratégie 2026)

3 stat-highlight array ✅ Oui Valeurs financières pour les projections ARR

🧱 STRUCTURE DU FICHIER — DOM

index.html

: Configuration du viewport, imports de polices et définition du design system (CSS Variables).

:

.blob : Élément décoratif animé en arrière-plan (animation move).

: Titre principal avec dégradé de texte et badge flottant.

:

section.card.full-width : Vision & Mission (Focus).

section.card : Marché & Opportunité (Liste à puces personnalisée).

section.card : Valeur Unique (Points de différenciation).

section.card.full-width : Projections ARR (Section highlight avec background composite).

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs (Design Tokens)

CSS

:root {

–primary-grad: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); /* Indigo to Pink */

–accent-grad: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); /* Blue Cyan */

–bg-dark: #0f172a; /* Slate 900 */

–card-bg: rgba(255, 255, 255, 0.05); /* Glassmorphism */

}

📐 Mise en Page — Layout

Grille : CSS Grid 2 colonnes (repeat(2, 1fr)) avec bascule sur 1 colonne sur mobile (768px).

Effets : backdrop-filter: blur(20px) pour l’effet de transparence sur les cartes.

Animations : Animation keyframe move pour le blob d’arrière-plan (20s alterné).

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu Statut

1 Lisibilité mobile Réduction largeur < 768px Les cartes passent en pleine largeur (pile verticale). ⬜ À tester 2 Animations Chargement de page Le blob de fond doit bouger lentement sans saccades. ⬜ À tester 3 Effet Hover Survol d'une .card Translation de -5px vers le haut + bordure Indigo. ⬜ À tester 4 Contraste Lecture du texte gris Vérifier le ratio sur fond sombre (Slate 900). ⬜ À tester 📝 EXEMPLE D'INTÉGRATION (CSS Focus) CSS /* Exemple de l'effet "Super-SDR" mis en avant dans le texte */ strong { background: var(--primary-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } Fiche générée par — Agent IA Refoia Jeremy Tech Usage : Documentation Front-End / Business Case