Bloc PageBuilder : hero

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 bloc

Entrée : Configuration du bloc hero dans Sanity Studio

Structure :

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

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