Bloc PageBuilder : hero

Documentation technique

Objet : Bloc PageBuilder
Type : Object
Slice : Slice 1 (Page d’accueil)
Cycle : DOC → SPEC → CODE → TEST → INTÉG
Statut : DOC

1. Description et périmètre

1.1. Objectif

Le bloc hero est un bloc PageBuilder qui représente la section principale (hero) d’une page marketing. Il affiche un titre, un sous-titre et une image d’illustration.

1.2. Utilisation principale

Section principale de la page d’accueil
En-tête de pages marketing
Section d’introduction

1.3. Périmètre concerné

Type : Object Sanity
Champs : heading, tagline, image
Rendu : Composant Astro Hero
Responsivité : Support mobile/desktop

2. Contrats d’entrée

2.1. Structure du bloc1/2

Entrée : Configuration du bloc hero dans Sanity Studio

Structure :

{
  _type: "hero",
  heading: string,
  tagline: string,
  image: image
}

2.1. Structure du bloc2/2

Règles :

heading : obligatoire, titre principal
tagline : obligatoire, sous-titre
image : optionnel, image d’illustration

2.2. Validation

Règles de validation :

heading : max 100 caractères
tagline : max 300 caractères
image : format accepté (jpg, png, webp)

3. Contrats de sortie

3.1. Données Sanity

Sortie : Bloc hero dans le PageBuilder

Format : JSON avec la structure définie ci-dessus

Utilisation :

Rendu dans le composant Astro Hero
Utilisation dans le PageBuilder de la page

3.2. Rendu Astro

Sortie : Composant Astro Hero

Comportement :

Affichage du titre principal
Affichage du sous-titre
Affichage de l’image (si présente)
Responsivité mobile/desktop

4. Side effects

4.1. Impact sur le rendu

Effet : Le bloc hero nécessite un composant Astro spécifique

Impact :

Création du composant Hero.astro
Gestion de l’image avec optimisation
Gestion de la responsivité

4.2. Impact sur les performances

Effet : L’image peut impacter les performances

Impact :

Optimisation de l’image (format, taille)
Lazy loading de l’image
Responsive images

5. Erreurs et gestion

5.1. Erreurs potentielles

Erreur	Cause probable	Solution
Image manquante	Image non uploadée dans Sanity	Afficher le bloc sans image
Titre trop long	Titre > 100 caractères	Tronquer le titre ou valider côté Sanity
Image trop lourde	Image non optimisée	Optimiser l’image avant upload

5.2. Codes HTTP

Non applicable (bloc PageBuilder)

6. Checklist de validation

Avant de passer à l’étape SPEC, vérifier :

La structure du bloc est documentée
Les contrats d’entrée/sortie sont documentés
Les side effects sont identifiés
Les erreurs potentielles sont documentées

7. Approbation

Validation requise : Confirmer que la documentation du bloc hero peut passer à l’étape SPEC.

8. Historique des modifications

Date	Version	Description	Auteur
2026-09-16	1.0	Création initiale	Devin