Design Analysis

Prerequisites: Project Definition

Objective

Analyze mockups to identify page types, recurring components, and their variations. This analysis determines the structure of BlocTypes and Types to create.

Identified Page Types

Home Page

  1. Full-width hero with background image
  2. Main H1 heading
  3. Short description
  4. 2 CTA buttons (primary and secondary)
  5. Feature section in 3-column grid
  6. Final conversion CTA
Characteristics:

Layout:

    Header
Hero (full-width, background image)
Features (3-column grid with icons)
CTA (full-width section)
Footer

Documentation Pages

  1. 3-column layout
  2. Left sidebar navigation (fixed)
  3. Center content (limited width for readability)
  4. Right TOC (fixed)
  5. Breadcrumb above content
  6. Prev/next navigation at bottom
  7. Simplified hero without image
Characteristics:

Layout:

    Header
┌──────────┬─────────────────────┬──────────┐
│ Sidebar  │ Breadcrumb          │ TOC      │
│ (fixed)  │ Hero (simplified)   │ (fixed)  │
│          │ Content (variable)  │          │
│          │ Navigation          │          │
└──────────┴─────────────────────┴──────────┘
Footer

Contact Page

  1. Simple hero without image
  2. 2-column unequal layout
  3. Form on left (60%)
  4. Info cards on right (40%)
  5. Simplified hero
Characteristics:

Layout:

    Header
Hero (simplified)
┌───────────────────────┬──────────────┐
│ Form (60%)            │ Cards (40%)  │
│ - Name                │ - Email      │
│ - Email               │ - Support    │
│ - Subject             │ - Github     │
│ - Message             │              │
└───────────────────────┴──────────────┘
Footer

Layout Components

Header

Recurrent: All pages

  1. Clickable logo
  2. Main navigation menu
  3. Language switcher (FR/EN)
  4. Mobile menu (hamburger)
Content:

Footer

Recurrent: All pages

  1. Dynamic copyright
  2. Secondary navigation menu
  3. External links (Github)
Content:

Sidebar

Conditional: Documentation pages only

  1. Hierarchical Node/Composite tree
  2. Active page highlight
  3. Automatic generation
Content:

TOC

Conditional: Documentation pages only

  1. Table of contents
  2. List of H2/H3 headings
  3. Anchor links
  4. Fixed on right
Content:

Breadcrumb

Conditional: Documentation pages only

  1. Breadcrumb trail
  2. Parent Node hierarchy
  3. Non-clickable current page
Content:

Navigation

Conditional: Documentation pages only

  1. Previous link (if exists)
  2. Next link (if exists)
  3. Navigation between Composites of same Node
Content:

Content Components

Hero

Usage: All pages

  1. H1 title
  2. WYSIWYG description
  3. lang field for multilingual linking
  4. Background image (optional)
  5. 2 primary and secondary CTAs (optional)
  6. breadcrumbTitle field for breadcrumb (optional)
BlocType fields:

  1. Home: Shows image + 2 CTAs
  2. Documentation: Shows breadcrumbTitle, no image or CTA
  3. Contact: No image or CTA
Variants handled in PHP:

Feature

Usage: Home page

  1. SVG icon
  2. H3 title
  3. Short WYSIWYG description
BlocType fields:

  1. Grouped in 3-column grid
  2. Automatic grouping of consecutive features
Display:

Title

Usage: Documentation pages

  1. Level (H2, H3, H4) via dropdown
  2. Title text
BlocType fields:

  1. Generates automatic anchor
  2. Feeds the TOC
Behavior:

Content

Usage: Documentation pages

  1. Rich WYSIWYG content
  2. Limited toolbar (bold, italic, list, link)
BlocType fields:

Code

Usage: Documentation pages

  1. Language via dropdown (PHP, SQL, JSON, TypeScript, HTML, SCSS, Javascript, CSS, Bash, Text, GraphQL)
  2. Raw code (textarea)
BlocType fields:

  1. Syntax highlighting
  2. Copy button
Display:

Info

Usage: Documentation pages

  1. Type via dropdown (info, warning, error)
  2. Title
  3. WYSIWYG content
BlocType fields:

  1. Color based on type (blue, yellow, red)
  2. Thick left border
Display:

CTA

Usage: Home page, documentation pages

  1. H2 title
  2. WYSIWYG description
  3. Button text
  4. Target via dropdown (Node/Composite selection)
BlocType fields:

Card

Usage: Contact page

  1. SVG icon
  2. Title
  3. WYSIWYG description
  4. Optional link (text + target)
BlocType fields:

Contact

Usage: Contact page only

  1. Form title
  2. Success title
  3. WYSIWYG success message
BlocType fields:

  1. Configures the form
  2. Defines return messages
Behavior:

Variation Summary

Components with Variants

  1. All fields in BlocType
  2. Optional fields used as needed
Hero: Variants handled at PHP widget level based on page type

  1. Individual: Simple card display
  2. Multiple consecutive: 3-column grid
Features: Dynamic grouping

Single-Variant Components

All other components (Title, Content, Code, Info, CTA, Card, Contact) have a single variant.

BlocType Implications

BlocTypes to Create

Based on design analysis:

  1. Fields: title, description, lang, image, ctaTitle, ctaTarget, ctaSecondaryTitle, ctaSecondaryTarget, breadcrumbTitle
  2. Variants handled in PHP widget
Hero: 1 BlocType with all fields

  1. Fields: icon, title, description
Feature: 1 BlocType

  1. Fields: hn, title
Title: 1 BlocType

  1. Fields: content
Content: 1 BlocType

  1. Fields: language, code
Code: 1 BlocType

  1. Fields: type, title, content
Info: 1 BlocType

  1. Fields: title, description, ctaTitle, ctaTarget
CTA: 1 BlocType

  1. Fields: icon, title, description, link, linkRoute, linkUrl
Card: 1 BlocType

  1. Fields: title, successTitle, success
Contact: 1 BlocType

Total: 9 BlocTypes

Type Implications

Types to Create

  1. Route: cms/home
  2. Allowed BlocTypes: Hero, Feature, CTA
  3. Usage: Home pages
Home:

  1. Route: cms/documentation
  2. Allowed BlocTypes: Hero, Title, Content, Code, Info, Feature, CTA, Card
  3. Usage: Documentation articles
Documentation:

  1. Route: cms/contact
  2. Allowed BlocTypes: Hero, Card, Info, Contact
  3. Usage: Contact pages
Contact:

  1. Route: cms/redirect-language
  2. Allowed BlocTypes: None
  3. Usage: Root node for language detection
Redirect Language:

  1. Route: cms/redirect-first-composite
  2. Allowed BlocTypes: None
  3. Usage: Container nodes
Redirect First Composite:

Total: 5 Types

Admin Templates to Plan

Some BlocTypes require custom interfaces for easier input.

Hero

Need: Dropdown to select linked content (lang field)

Reason: Allows FR/EN linking for language switcher and hreflang tags

CTA

Need: Dropdown to select target (ctaTarget field)

Reason: Avoids manual route entry, provides all Nodes/Composites

Card

Need: Dropdown to select target (linkRoute field)

Reason: Avoids manual route entry, provides all Nodes/Composites

Total: 3 admin templates

Validation

  1. 3 page types identified
  2. Layout components listed (6 widgets)
  3. Content components listed (9 widgets)
  4. Component variations identified
  5. 9 BlocTypes defined
  6. 5 Types defined
  7. 3 admin templates planned
Before continuing:

<< Project Definition Project Initialization >>