Récupération et Analyse des Créas

Analyser les maquettes pour identifier les types de pages, les composants récurrents et leurs variations. Cette analyse détermine la structure des BlocTypes et Types à créer.

1. Hero pleine largeur avec image de fond
2. Titre H1 principal
3. Description courte
4. 2 boutons CTA (primaire et secondaire)
5. Section features en grille 3 colonnes
6. CTA de conversion finale

Caractéristiques :

Layout :

    Header
Hero (pleine largeur, image de fond)
Features (grille 3 colonnes avec icônes)
CTA (section pleine largeur)
Footer
    

1. Layout 3 colonnes
2. Sidebar navigation gauche (fixe)
3. Contenu central (largeur limitée pour lecture)
4. TOC droite (fixe)
5. Breadcrumb au-dessus du contenu
6. Navigation prev/next en bas
7. Hero simplifié sans image

Caractéristiques :

Layout :

    Header
┌──────────┬─────────────────────┬──────────┐
│ Sidebar  │ Breadcrumb          │ TOC      │
│ (fixe)   │ Hero (simplifié)    │ (fixe)   │
│          │ Contenu (variable)  │          │
│          │ Navigation          │          │
└──────────┴─────────────────────┴──────────┘
Footer
    

1. Hero simple sans image
2. Layout 2 colonnes inégales
3. Formulaire gauche (60%)
4. Cards informatives droite (40%)
5. Hero simplifié

Caractéristiques :

Layout :

    Header
Hero (simplifié)
┌───────────────────────┬──────────────┐
│ Formulaire (60%)      │ Cards (40%)  │
│ - Nom                 │ - Email      │
│ - Email               │ - Support    │
│ - Sujet               │ - Github     │
│ - Message             │              │
└───────────────────────┴──────────────┘
Footer
    

Récurrent : Toutes les pages

1. Logo cliquable
2. Menu navigation principale
3. Language switcher (FR/EN)
4. Menu mobile (hamburger)

Contenu :

Récurrent : Toutes les pages

1. Copyright dynamique
2. Menu navigation secondaire
3. Liens externes (Github)

Contenu :

Conditionnel : Pages de documentation uniquement

1. Arborescence hiérarchique Nodes/Composites
2. Highlight page active
3. Génération automatique

Contenu :

Conditionnel : Pages de documentation uniquement

1. Table des matières
2. Liste des titres H2/H3
3. Liens d'ancrage
4. Fixe à droite

Contenu :

Conditionnel : Pages de documentation uniquement

1. Fil d'ariane
2. Hiérarchie des Nodes parents
3. Page courante non cliquable

Contenu :

Conditionnel : Pages de documentation uniquement

1. Lien précédent (si existe)
2. Lien suivant (si existe)
3. Navigation entre Composites d'un même Node

Contenu :

Usage : Toutes les pages

1. Titre H1
2. Description WYSIWYG
3. Champ lang pour liaison multilingue
4. Image de fond (optionnel)
5. 2 CTA primaire et secondaire (optionnels)
6. Champ breadcrumbTitle pour fil d'ariane (optionnel)

Champs du BlocType :

1. Home : Affiche image + 2 CTA
2. Documentation : Affiche breadcrumbTitle, pas d'image ni CTA
3. Contact : Pas d'image ni CTA

Variantes gérées en PHP :

Usage : Page d'accueil

1. Icône SVG
2. Titre H3
3. Description courte WYSIWYG

Champs du BlocType :

1. Regroupement en grille 3 colonnes
2. Groupement automatique des features consécutives

Affichage :

Usage : Pages de documentation

1. Niveau (H2, H3, H4) via dropdown
2. Texte du titre

Champs du BlocType :

1. Génère une ancre automatique
2. Alimente la TOC

Comportement :

Usage : Pages de documentation

1. Contenu riche WYSIWYG
2. Toolbar limitée (bold, italic, list, link)

Champs du BlocType :

Usage : Pages de documentation

1. Langage via dropdown (PHP, SQL, JSON, TypeScript, HTML, SCSS, Javascript, CSS, Bash, Texte, GraphQL)
2. Code brut (textarea)

Champs du BlocType :

1. Coloration syntaxique
2. Bouton copier

Affichage :

Usage : Pages de documentation

1. Type via dropdown (info, warning, error)
2. Titre
3. Contenu WYSIWYG

Champs du BlocType :

1. Couleur selon type (bleu, jaune, rouge)
2. Bordure gauche épaisse

Affichage :

Usage : Page d'accueil, pages de documentation

1. Titre H2
2. Description WYSIWYG
3. Texte bouton
4. Target via dropdown (sélection Node/Composite)

Champs du BlocType :

Usage : Page de contact

1. Icône SVG
2. Titre
3. Description WYSIWYG
4. Lien optionnel (texte + target)

Champs du BlocType :

Usage : Page de contact uniquement

1. Titre formulaire
2. Titre succès
3. Message succès WYSIWYG

Champs du BlocType :

1. Configure le formulaire
2. Définit les messages de retour

Comportement :

1. Tous les champs dans le BlocType
2. Champs optionnels utilisés selon besoin

Hero : Variantes gérées au niveau du widget PHP selon le type de page

1. Individuelles : Affichage card simple
2. Multiples consécutives : Grille 3 colonnes

Features : Groupement dynamique

Tous les autres composants (Title, Content, Code, Info, CTA, Card, Contact) ont une seule variante.

D'après l'analyse des créas :

1. Champs : title, description, lang, image, ctaTitle, ctaTarget, ctaSecondaryTitle, ctaSecondaryTarget, breadcrumbTitle
2. Variantes gérées dans le widget PHP

Hero : 1 BlocType avec tous les champs

1. Champs : icon, title, description

Feature : 1 BlocType

1. Champs : hn, title

Title : 1 BlocType

1. Champs : content

Content : 1 BlocType

1. Champs : language, code

Code : 1 BlocType

1. Champs : type, title, content

Info : 1 BlocType

1. Champs : title, description, ctaTitle, ctaTarget

CTA : 1 BlocType

1. Champs : icon, title, description, link, linkRoute, linkUrl

Card : 1 BlocType

1. Champs : title, successTitle, success

Contact : 1 BlocType

Total : 9 BlocTypes

1. Route : cms/home
2. BlocTypes autorisés : Hero, Feature, CTA
3. Usage : Pages d'accueil

Home :

1. Route : cms/documentation
2. BlocTypes autorisés : Hero, Title, Content, Code, Info, Feature, CTA, Card
3. Usage : Articles de documentation

Documentation :

1. Route : cms/contact
2. BlocTypes autorisés : Hero, Card, Info, Contact
3. Usage : Pages de contact

Contact :

1. Route : cms/redirect-language
2. BlocTypes autorisés : Aucun
3. Usage : Node racine détection langue

Redirect Language :

1. Route : cms/redirect-first-composite
2. BlocTypes autorisés : Aucun
3. Usage : Nodes containers

Redirect First Composite :

Total : 5 Types

Certains BlocTypes nécessitent des interfaces personnalisées pour faciliter la saisie.

Besoin : Dropdown pour sélectionner le contenu lié (champ lang)

Raison : Permet de lier FR/EN pour le language switcher et les balises hreflang

Besoin : Dropdown pour sélectionner la cible (champ ctaTarget)

Raison : Évite la saisie manuelle de routes, propose tous les Nodes/Composites

Besoin : Dropdown pour sélectionner la cible (champ linkRoute)

Raison : Évite la saisie manuelle de routes, propose tous les Nodes/Composites

Total : 3 templates d'admin

1. 3 types de pages identifiés
2. Composants de layout listés (6 widgets)
3. Composants de contenu listés (9 widgets)
4. Variations des composants identifiées
5. 9 BlocTypes définis
6. 5 Types définis
7. 3 templates d'admin planifiés

Avant de continuer :