Aller au contenu principal
5.2

Patterns de page

Hero, sections, footer, FAQ

Les pages du site Gradly suivent une structure répétée, construite à partir des composants fondamentaux (5.1). Cette section documente les patterns de composition.

Hero

Le hero ouvre la homepage et certaines pages clés. Structure en trois temps :

  1. H1 centré, avec un segment mis en gradient
  2. Sous-titre descriptif en text-xl text-gray-600
  3. CTAs (1 principal + 1 secondaire discret) + micro-copie rassurante
<section class="pt-32 pb-20 lg:pt-40 lg:pb-32 bg-gradient-to-br from-blue-50 via-white to-purple-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-4xl mx-auto mb-16">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
        Bulletins RNCP et preuves Qualiopi
        <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          en 3 clics. Sans abonnement mensuel.
        </span>
      </h1>
      <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
        Gradly est le logiciel local pour les CFA...
      </p>
      <!-- CTA principal + micro-copie -->
    </div>
    <!-- Dashboard screenshot -->
  </div>
</section>

Règles :

  • Fond gradient pastel (from-blue-50 via-white to-purple-50)
  • H1 text-4xl sm:text-5xl lg:text-6xl (responsive)
  • Max-width max-w-4xl pour le texte, max-w-7xl pour le container
  • Micro-copie rassurante sous le CTA : « Essai illimité, aucune carte bancaire requise »

Section classique

Chaque bloc entre le hero et le footer suit le même rythme vertical.

<section id="fonctionnalites" class="py-16 lg:py-24">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl lg:text-4xl font-bold mb-4">Fonctionnalités</h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        Tout ce qu'il faut pour suivre les compétences proprement...
      </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- 6 cartes feature -->
    </div>
  </div>
</section>

Règles :

  • py-16 lg:py-24 pour l’espacement vertical
  • H2 text-3xl lg:text-4xl font-bold, centré, max-w-2xl pour le sous-titre
  • Grille 1 / 2 / 3 colonnes selon breakpoint

FAQ

Structure native HTML (<details>), avec JSON-LD FAQPage pour le SEO.

<div class="space-y-4">
  <details class="rounded-xl border border-gray-200 bg-white p-6">
    <summary class="font-semibold text-gray-900 cursor-pointer">
      Qu'est-ce que Gradly exactement ?
    </summary>
    <p class="mt-3 text-gray-600">
      Gradly est un logiciel local de suivi des compétences...
    </p>
  </details>
</div>

Règles :

  • Utiliser <details> natif (accessibilité et SEO gratuits)
  • Pas de JavaScript pour l’accordion
  • Un JSON-LD FAQPage dans le <head> du page

Bannière CTA

Bloc d’appel à l’action en fin de page, avec fond gradient foncé.

<section class="py-16 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 text-white">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <h2 class="text-3xl lg:text-4xl font-bold mb-4">
      Essayez Gradly gratuitement
    </h2>
    <p class="text-lg text-blue-100 mb-8">
      Licence perpétuelle...
    </p>
    <a class="inline-flex items-center gap-2 bg-white hover:bg-gray-100
      text-blue-900 px-8 py-4 rounded-xl font-semibold text-lg">
      Télécharger gratuitement
    </a>
  </div>
</section>

Trois variantes (documentées dans src/components/Footer.astro) :

  • full : footer complet avec colonnes (homepage, pages riches)
  • minimal : version courte (pages légales, blog)
  • centered-minimal : version centrée minimale (pages d’erreur, présentation)

Les trois incluent obligatoirement un bouton .cookie-settings-trigger qui rouvre le banner CookieConsent (obligation CNIL : retrait du consentement aussi facile que le donner).

Règles générales de composition

  • Une section = un message. Ne pas empiler deux idées dans une même section.
  • Rythme vertical constant : py-16 lg:py-24 partout sauf le hero.
  • Texte centré pour le title+sous-titre de chaque section, contenu aligné gauche quand c’est du corps long.
  • max-w-7xl partout pour le container principal, jamais plus large.