Structure détaillée de la page web à partir du JPEG

1. En-tête (Header) global

• Bande supérieure fine (optionnelle) : paragraphe court pour informations de contact (téléphone, email) ou message d’alerte. Contenu attendu : texte court + éventuellement une petite liste de liens (paragraphe court, liens simples).
• Zone logo : emplacement pour un logo (image) à gauche. Aucun texte long, seulement le nom de la marque en texte court si le logo est typographique.
• Menu de navigation principal : liste horizontale de 4 à 7 éléments. Contenu attendu : liste de liens (texte court, 1 à 3 mots chacun). Hiérarchie : niveau unique (pas de sous-menu dans cette description).
• Bouton d’appel à l’action dans le header (optionnel) : bouton d’appel à l’action aligné à droite du menu. Contenu attendu : libellé de bouton court (2 à 4 mots).

2. Section Héros (bannière principale en haut de page)

• Disposition générale : section pleine largeur, en 1 ou 2 colonnes selon le JPEG.
  • Version 2 colonnes : colonne gauche pour le texte, colonne droite pour une image ou une illustration.
  • Version 1 colonne : tout le contenu centré.
• Colonne texte (gauche ou centrée) :
  • Titre principal (H1) : texte court et impactant (1 à 2 lignes).
  • Sous-titre / accroche (H2 ou H3) : paragraphe court (1 à 3 phrases) expliquant la proposition de valeur.
  • Zone de boutons :
    • 1 à 2 boutons d’appel à l’action principaux (libellé court, 2 à 4 mots).
    • Éventuel lien secondaire (texte simple) sous forme de texte cliquable.
  • Éventuelle liste de points clés : liste à puces de 3 à 5 éléments, chaque élément étant un paragraphe très court (1 phrase).
• Colonne visuelle (droite) :
  • Image principale ou illustration (aucun texte structuré, éventuellement une légende très courte si visible).

3. Section de présentation / "À propos"

• Disposition : 1 colonne ou 2 colonnes équilibrées.
• Haut de section :
  • Titre de section (H2) : texte court (2 à 6 mots).
  • Sous-titre ou phrase d’introduction : paragraphe court (1 à 2 phrases).
• Contenu principal :
  • Paragraphe long : 1 à 3 paragraphes décrivant l’entreprise / le projet (3 à 6 phrases chacun).
  • Éventuelle liste à puces : 3 à 5 éléments pour les points forts, chaque élément = phrase courte.
• Éventuel bouton : 1 bouton d’appel à l’action secondaire (libellé court).

4. Section Services / Fonctionnalités

• Disposition : grille de 3 colonnes (ou 2/4 selon le JPEG), plusieurs lignes possibles.
• Haut de section :
  • Titre de section (H2).
  • Sous-titre : paragraphe court (1 à 2 phrases) expliquant la section.
• Cartes de service (par colonne) :
  • Icône ou pictogramme en haut (élément visuel, pas de texte).
  • Titre de service (H3) : texte court (2 à 5 mots).
  • Paragraphe court descriptif : 2 à 4 phrases.
  • Éventuel lien ou bouton texte : texte court "En savoir plus".

5. Section Mise en avant / Bloc de chiffres clés (optionnel)

• Disposition : 3 ou 4 colonnes.
• Contenu par colonne :
  • Chiffre clé (texte très court, 1 à 3 caractères + unité).
  • Légende : paragraphe très court (1 phrase).

6. Section Témoignages / Avis clients

• Disposition : 2 ou 3 colonnes de cartes de témoignages.
• Haut de section :
  • Titre de section (H2).
  • Sous-titre : paragraphe court (1 à 2 phrases).
• Carte de témoignage :
  • Texte du témoignage : paragraphe court à moyen (2 à 5 phrases).
  • Nom de l’auteur : texte court (nom complet ou prénom).
  • Sous-titre auteur : texte court (fonction, entreprise).
  • Éventuelle photo de profil (image, sans texte structuré).

7. Section Tarifs / Offres (si présente sur le JPEG)

• Disposition : 3 colonnes de cartes de prix (offres) alignées.
• Haut de section :
  • Titre de section (H2).
  • Sous-titre : paragraphe court (1 à 2 phrases).
• Carte de prix :
  • Nom de l’offre : titre court (H3).
  • Prix : texte mis en avant (montant + unité).
  • Liste à puces des fonctionnalités incluses : 4 à 8 puces, texte court.
  • Bouton d’appel à l’action : libellé court ("Choisir ce plan", etc.).

8. Section FAQ (Questions fréquentes)

• Disposition : 1 colonne principale, questions listées verticalement.
• Haut de section :
  • Titre de section (H2).
  • Sous-titre : paragraphe court (1 phrase) facultatif.
• Bloc de question/réponse (répété) :
  • Question : texte court (1 phrase, style titre).
  • Réponse : paragraphe court à moyen (2 à 4 phrases).

9. Section Formulaire de contact / Lead

• Disposition : 2 colonnes ou 1 colonne selon le JPEG.
  • Colonne gauche : texte d’introduction.
  • Colonne droite : formulaire.
• Colonne texte :
  • Titre de section (H2).
  • Paragraphe court : 1 à 2 phrases expliquant l’objectif du formulaire.
  • Éventuelle liste à puces des avantages de la prise de contact (3 à 4 puces).
• Colonne formulaire :
  • Champs de formulaire typiques :
    • Champ texte "Nom" (input).
    • Champ texte "Prénom" (input) si séparé.
    • Champ "Email" (email).
    • Champ "Téléphone" (input) optionnel.
    • Champ "Sujet" (input) optionnel.
    • Champ "Message" (textarea) pour un paragraphe long.
    • Case à cocher (checkbox) pour consentement / newsletter.
  • Bouton de soumission : bouton d’appel à l’action ("Envoyer", etc.).

10. Section Carte / Localisation (si présente)

• Disposition : 2 colonnes ou carte pleine largeur.
• Colonne texte (si 2 colonnes) :
  • Titre court (H3 ou H2).
  • Paragraphe court : 1 à 2 phrases sur la localisation.
  • Liste de coordonnées : liste simple (adresse, téléphone, email, horaires) sous forme de paragraphes courts ou liste à puces.
• Colonne carte : bloc carte intégré (sans texte structuré).

11. Section Appel à l’action final (CTA de bas de page)

• Disposition : 1 colonne, contenu centré.
• Titre fort (H2) : texte court et incitatif.
• Sous-titre : paragraphe court (1 à 2 phrases) renforçant l’action souhaitée.
• Zone de bouton : 1 ou 2 boutons d’appel à l’action (libellé court).

12. Pied de page (Footer)

• Disposition : 2 à 4 colonnes selon le JPEG.
• Colonne 1 : Informations de base
  • Nom de la marque : texte court (titre ou logo texte).
  • Paragraphe court : description brève (1 à 2 phrases).
• Colonne 2 : Navigation secondaire
  • Liste de liens : 4 à 8 liens (texte court).
• Colonne 3 : Contact
  • Liste d’informations : adresse, téléphone, email sous forme de paragraphes courts ou liste à puces.
• Colonne 4 : Réseaux sociaux (optionnelle)
  • Icônes de réseaux sociaux (liens, texte très court ou icône seule).
• Bande inférieure :
  • Texte légal : paragraphe très court (copyright, mentions légales).
  • Liens courts vers "Mentions légales", "Politique de confidentialité" (liste de liens).

Cette description couvre la hiérarchie des blocs, le nombre de colonnes typique par section, et le type de contenu attendu pour chaque zone (titres, sous-titres, paragraphes courts ou longs, listes à puces, boutons d’appel à l’action, champs de formulaire, menus et liens).

Lignes directrices pour les images et éléments visuels

Pour que la page ressemble au JPEG de référence, utilisez principalement des photos réalistes de haute qualité pour les sections héro et témoignages, complétées par des icônes en flat design coloré pour les listes de services et les points clés. Placez une grande image ou bannière en haut de page, alignée à gauche ou en arrière-plan, avec le texte principal à droite. Dans les sections de contenu, alternez les blocs texte et visuels : une colonne texte à gauche, une photo ou illustration à droite, puis inversement dans la section suivante pour créer un rythme visuel équilibré.

Utilisez des aplats de couleur clairs ou des dégradés doux en arrière-plan des zones importantes (hero, appel à l’action, bandeaux de séparation). Ajoutez des séparateurs visuels sous forme de lignes fines horizontales ou de blocs de couleur pleine entre les sections pour rappeler la structure du JPEG. Pour les cartes ou encadrés d’information, utilisez des blocs à fond blanc avec ombre légère et éventuellement une petite icône en haut à gauche. Les images doivent toujours être proches du texte qu’elles illustrent : juste à côté dans une colonne adjacente ou au-dessus du paragraphe correspondant, en respectant des marges régulières et des coins légèrement arrondis pour harmoniser l’ensemble.