Skip to content

README.md

Latest commit

 

History

History
90 lines (68 loc) · 5.67 KB

README.md

File metadata and controls

90 lines (68 loc) · 5.67 KB
Raw

Maquette ocobo.co (refonte)

Export statique de la maquette du nouveau site Ocobo. Ce n'est pas du code de production : c'est la référence visuelle et comportementale (mise en page, couleurs, animations, interactions) à réintégrer dans le repo website (React Router v7 + Panda CSS), en respectant ses conventions (CLAUDE.md, ADR-0001, i18n FR/EN).

Ouvrir la maquette

Les animations au scroll reposent sur un petit fichier JavaScript. Ouvrir les fichiers par double-clic peut le bloquer selon le navigateur. Lancer plutôt un serveur local depuis ce dossier :

npx serve .
# ou
python3 -m http.server 8000

Puis ouvrir http://localhost:3000 (ou :8000). Navigateur recommandé : Chrome (voir « Compatibilité » plus bas).

Pages

Fichier Page
index.html / accueil.html Home
methode.html Méthode
enjeux-previsibilite.html Enjeu Revenue Performance
enjeux-organisation-commerciale.html Enjeu Sales Experience
enjeux-remuneration-variable.html Enjeu Sales Compensation
enjeux-clients.html Enjeu Customer Experience
enjeux-outils.html Enjeu Revenue Systems
enjeux-ia.html Enjeu Revenue AI
equipe.html Équipe
a-propos.html Qui sommes-nous
nous-rejoindre.html Nous rejoindre
clients.html Customer Stories
clients-beev.html Détail d'une Customer Story (identique au site actuel)
librairie.html Librairie RevOps (style du site actuel)
roi.html, technologie.html Pages secondaires
composants.html Design system : tokens et composants de référence

Seules les pages du tableau ci-dessus font foi. Les fichiers suivants sont des variantes de travail, livrées avec l'export mais non retenues à ce jour : accueil-test.html, accueil-test-2.html à accueil-test-5.html, accueil-v3.html, a-propos-v2.html. Leur statut reste à confirmer par Ocobo.

Animations et interactions, page par page

Home

  • Hero : illustration « équipes alignées → croissance ». Les 4 équipes (Marketing, Sales, Customer Success, Finance) se rejoignent sur l'axe RevOps, puis la courbe et les jalons d'impact se dessinent (assets/site.js, fonction hxAnim). Survol d'un impact : info-bulle expliquant comment on l'obtient.
  • Section IA : fenêtres d'agents qui s'animent à l'arrivée (pwAnim).
  • Section « Six problèmes que nous réglons » : bow tie en flux dégradé, lignes dessinées à l'arrivée sur la section (CSS animation-timeline: view()).
  • Cartes enjeux : se retournent au survol (face avant : enjeu ; dos : chantiers et outils).
  • Section IA (fond sombre) : schéma en 3 couches qui se construit de bas en haut au scroll (iaScrub).
  • Menu : se transforme en pastille au scroll.

Méthode

  • « Notre périmètre d'action » : bow tie en flux. Survol d'une pastille enjeu (ou d'une carte « Six enjeux ») : seules les étapes couvertes par l'enjeu restent allumées, dans sa couleur. Survol d'une étape : indicateur clé (KPI) en info-bulle. Implémenté en CSS pur avec :has().

Pages enjeux

  • Bow tie par enjeu : étapes actives colorées, lignes dessinées au chargement, KPIs au survol, boucle d'expansion.
  • Experts : cartes qui se retournent au survol.

Équipe, Qui sommes-nous, pages enjeux

  • Carte Consultant unique (.ds-flip.ds-person) : se retourne au survol et au focus clavier. Initiales en attendant les photos.
  • Équipe : bandeau de photos qui défilent en diagonale, avec fondu sur les côtés.

Design system

Tous les tokens et composants sont définis une seule fois (bloc /*DS:start*/ … /*DS:end*/, identique dans chaque page) et présentés sur composants.html. À reprendre tels quels dans Panda CSS (tokens + recipes) :

  • Rayons : --ds-r-s 8px, --ds-r-m 16px, --ds-r-l 24px, --ds-r-full 999px. Aucune autre valeur.
  • Ombres : --ds-sh-1 (repos), --ds-sh-2 (survol), --ds-sh-3 (fenêtres, hero).
  • Typo : une seule taille de H2, --ds-h2 = clamp(34px, 3.6vw, 48px). H3 24px.
  • Sections : padding --ds-sec 112px (standard) ou --ds-sec-c 80px (compact).
  • Pastilles : 3 types, .ds-pill (label de section), .ds-tag (outils, métadonnées), .ds-pill-ai (IA uniquement).
  • Carte retournable : .ds-flip > .ds-flip-in > .ds-face + .ds-face-b. La carte Consultant (.ds-person) en est une déclinaison : un seul composant pour Équipe, Qui sommes-nous et les pages enjeux.

Règles de design à respecter

  • Le dégradé linear-gradient(90deg, #FE9C87, #F1CF25) est réservé aux sujets IA.
  • Couleurs de marque : mint #9ADBBA, sky #99D1DF, coral #FE9C87, yellow #F1CF25, dark #212323.
  • Couleur par enjeu : Sales Experience = mint, Customer Experience = sky, Revenue Performance = coral, Sales Compensation = yellow, Revenue Systems = gris #767676, Revenue AI = dégradé.
  • Gouttières alignées sur le composant Container du site : max 1280 px, 32 / 24 / 16 px selon la largeur.
  • Typo : Bermia (titres), Bornia (texte). Les fichiers de police présents dans assets/ servent uniquement à la maquette : utiliser ceux déjà installés dans le repo.

Compatibilité

Certaines animations utilisent animation-timeline: view() (Chrome, Edge). Sur Safari et Firefox, elles se jouent une fois au chargement ou s'affichent directement dans leur état final. C'est voulu : à reproduire avec une détection @supports ou un IntersectionObserver.

Ce qui reste à fournir

  • Vraies photos (équipe, experts, bureaux) : certaines images sont des visuels provisoires.
  • Bios, phrase « ce qu'il ou elle apporte », outils et « Avant Ocobo » de chaque consultant (champs entre crochets).
  • Répartition des experts par enjeu, à valider.
  • Logos clients et partenaires définitifs.
  • Version anglaise des textes.