Les types de page

Des pages complètes, assemblées uniquement avec les composants du système — la preuve qu'il tient debout. Chaque template est une vraie page : prévisualisée ici dans une maquette navigateur, et ouvrable en plein écran dans un onglet dédié.

Landing produit / programme

Hero → preuve sociale → valeur → parcours → chiffres → témoignages → FAQ → CTA. L'accent tourne (bleu → vert → violet → rouge → jaune) au fil du scroll.

Institutionnel / about

Mission, valeurs en feature-split, impact, équipe (survol gris→couleur), historique et partenaires.

Festival / événement

Hero Ink avec countdown live, programme en onglets par jour, intervenants, billetterie et infos pratiques.

Documentation

Layout 3 colonnes (navigation, contenu, sommaire), scrollspy sur le sommaire, blocs de code copiables, callouts et tables.

Annuaire filtrable

Grille de fiches filtrable par catégorie (hook data-filter) + recherche + pagination.

Blog / actualités

Article à la une, grille d'articles filtrable par catégorie et bloc newsletter.

Recherche / institut

Axes de recherche, publications (table), chercheurs et projets.

Tableau de bord

Surface applicative : app shell (nav Ink + topbar), KPIs, mini-graphe, barres de progression et table. On y applique les tokens (couleurs, typo, champs) plutôt que les blocs marketing.

Espace Ibudo — tableau de bord custom

Le modèle du back-office maison : une alternative simple et intuitive à wp-admin, qui fonctionne avec le back-end WordPress (implémentée par le plugin ibudo-espace : rôle éditeur verrouillé, wp-admin masqué, données en options/CPT). « 1 écran = 1 tâche » — un éditeur non-technique compose ses pages en sections, gère actualités, médias et réglages sans rien connaître à WordPress.

Briques (source : system/extended.css) : .app-shell → .app-nav (sidebar Ink) + .app-main (.app-topbar sticky + .app-content). La liste de sections éditables utilise .sec-item. Ces classes servent aussi au template Tableau de bord.

Page type orbitale

La vitrine du concept « Système Orbital » assemblée 100 % en composants DS : hero, pôles de l'écosystème en cartes, chiffres, parcours, CTA — avec l'accent qui tourne et le curseur orbital activé.

Composants introduits par les templates

Réutilisables partout dans le système, pilotés par des attributs data-* via orbital.js.

Maquette navigateur — .browser-mock

<div class="browser-mock">
  <div class="bm-bar">
    <span class="bm-dots"><i></i><i></i><i></i></span>
    <span class="bm-url"><i class="ti ti-lock"></i> design.ibudohub.co</span>
    <span class="bm-actions"><a class="btn btn-ghost btn-sm" target="_blank" href="page.html">Plein écran</a></span>
  </div>
  <div class="bm-frame"><iframe src="page.html"></iframe></div>
</div>

Countdown — .countdown + data-countdown

<div class="countdown" data-countdown="2026-12-31T23:59:59">
  <div class="cd-cell"><div class="cd-n">00</div><div class="cd-l">Jours</div></div>
  <div class="cd-cell"><div class="cd-n">00</div><div class="cd-l">Heures</div></div>
  <div class="cd-cell"><div class="cd-n">00</div><div class="cd-l">Minutes</div></div>
  <div class="cd-cell"><div class="cd-n">00</div><div class="cd-l">Secondes</div></div>
</div>
<!-- variante fond sombre : <div class="countdown on-dark" …> -->

Filtres — .filter-bar + data-filter

<div class="filter-bar" id="f" data-count-target="#n">
  <span class="pill" data-filter-btn="all" aria-pressed="true">Tout</span>
  <span class="pill" data-filter-btn="impact">Impact</span>
  <span class="filter-count"><b id="n">4</b> résultats</span>
</div>
<div class="grid cols-2" data-filter="#f">
  <div class="vcard" data-tags="impact">…</div>
</div>

Sommaire scrollspy — .toc + data-toc

Le sommaire surligne automatiquement la section visible. Démo complète sur le template Docs.

<nav class="toc" data-toc="#content">
  <div class="toc-ttl">Sur cette page</div>
  <a href="#intro">Introduction</a>
  <a href="#install">Installation</a>
</nav>
<article id="content">
  <h2 id="intro">Introduction</h2> …
</article>