From ba010105cafbb654f6d67e46632febc18c3c3619 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20SAILLANT?= <108685187+electron-rare@users.noreply.github.com> Date: Sun, 15 Mar 2026 00:29:59 +0000 Subject: [PATCH] feat(ui): refine hero oscilloscope art direction --- docs/EXECUTION-IMMÉDIATE-2026-03-02.md | 16 +++++- docs/README.md | 4 ++ docs/SPRINT-PLAYBOOK-2026-03-02.md | 2 + docs/da-01-implementation-backlog.md | 2 + ...design-memory-2026-03-14-white-contrast.md | 14 +++++ docs/project-master-todos.md | 4 +- src/components/sections/Hero.tsx | 2 +- src/styles/global.css | 51 ++++++++++++++----- src/styles/home-workbench.css | 31 ++++++++--- 9 files changed, 103 insertions(+), 23 deletions(-) diff --git a/docs/EXECUTION-IMMÉDIATE-2026-03-02.md b/docs/EXECUTION-IMMÉDIATE-2026-03-02.md index 971c2ad..af67ba2 100644 --- a/docs/EXECUTION-IMMÉDIATE-2026-03-02.md +++ b/docs/EXECUTION-IMMÉDIATE-2026-03-02.md @@ -30,9 +30,21 @@ Fichiers cle: - `src/pages/formation.astro` - `src/pages/mentions-legales.astro` -### 2. Verifier visuellement le preview OVH +### 2. Verifier le hero blanc reellement servie +Action: +- confirmer que le hero utilise un vrai visuel oscilloscope +- verifier qu'il ne replonge pas dans une photo d'atelier large ou une texture legacy +- controler le contraste titre / copy / CTA avec la nouvelle image + +Fichiers cle: +- `src/components/sections/Hero.tsx` +- `src/styles/global.css` +- `src/styles/home-workbench.css` + +### 3. Verifier visuellement le preview OVH Action: - controler la top bar sur mobile reel +- controler le hero oscilloscope sur un vrai navigateur - verifier qu'elle reste compacte fermee - verifier que le menu est lisible et stable ouvert @@ -40,7 +52,7 @@ Etat: - preview top bar publie et valide publiquement via GitHub Actions `23095540371` - preview repositionne et purge du lab public valide publiquement via GitHub Actions `23098262445` -### 3. Verifier la production reellement servie +### 4. Verifier la production reellement servie Action: - confirmer dans un navigateur humain que `www` sert bien la nouvelle home et le nouveau header - verifier localement avec le meme `User-Agent` que le workflow quand on utilise `curl` diff --git a/docs/README.md b/docs/README.md index b3120f8..ef324b2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -16,6 +16,10 @@ Repo: `/home/zacus/electron-rare-preview-ovh` - familles visibles: electronique, automatisme, energie, stockage, optimisation - l'embarque reste une competence, pas le titre principal - les projets multi-techniques s'appuient sur les partenaires adaptes +- Hero actif: + - titre: `Systemes electroniques specifiques, du besoin au livrable fiable` + - fond: oscilloscope en plan rapproche, pas atelier large ni texture carnet legacy + - surcouches: white-contrast propres, lisibles, sans retour a l'imaginaire `studio/figma` ## Lire dans cet ordre diff --git a/docs/SPRINT-PLAYBOOK-2026-03-02.md b/docs/SPRINT-PLAYBOOK-2026-03-02.md index 07765be..e6b43ae 100644 --- a/docs/SPRINT-PLAYBOOK-2026-03-02.md +++ b/docs/SPRINT-PLAYBOOK-2026-03-02.md @@ -34,6 +34,7 @@ PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external ### A2 - Zones a verifier dans le build - top bar desktop/mobile et hero +- hero oscilloscope: cadrage, contraste, lisibilite CTA - approche et cas concrets - photo strip et video strip - formats de mission @@ -78,6 +79,7 @@ curl -fsSI -A 'electron-rare-gh-verify/1.0' https://www.lelectronrare.fr/preview - white-contrast preview valide: `23094884980` - top bar mobile preview validee publiquement: `23095540371` - preview repositionne electronique/automatisme/energie et purge du lab public: `23098262445` +- hero actif attendu: vrai oscilloscope en fond, sans texture carnet legacy ## Sprint C - Production diff --git a/docs/da-01-implementation-backlog.md b/docs/da-01-implementation-backlog.md index e711278..b10e44a 100644 --- a/docs/da-01-implementation-backlog.md +++ b/docs/da-01-implementation-backlog.md @@ -50,6 +50,7 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire - familles de competence visibles - CTA contact - fond photo + lockup + - fond hero sur vrai oscilloscope, pas photo d'atelier trop large 3. `About_Approche` - Cible: `src/components/sections/About.tsx` @@ -103,6 +104,7 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire ## Backlog P0 - [x] Forcer la cascade sur la DA blanche dans `BaseLayout.astro`, `site.ts`, `global.css`, `home-workbench.css`. - [x] Relever les derniers blocs sombres restants: `hero-bg-photo`, `photo-strip`, `video-strip`, `contact-minitel`, FAQ focus. +- [x] Recaler le hero sur une image d'oscilloscope credible pour la promesse technique, avec overlays blancs propres. - [x] Remplacer la nav mobile "desktop qui wrap" par une top bar compacte state-of-art 2026. - [ ] Verifier la lisibilite des CTA sur blanc. - [ ] Verifier que la home, `formation` et `mentions-legales` partagent bien le meme header et le meme socle visuel en preview live. diff --git a/docs/design-memory-2026-03-14-white-contrast.md b/docs/design-memory-2026-03-14-white-contrast.md index 621d555..290b3e5 100644 --- a/docs/design-memory-2026-03-14-white-contrast.md +++ b/docs/design-memory-2026-03-14-white-contrast.md @@ -28,6 +28,18 @@ Le positionnement public de reference devient : systemes electroniques specifiqu - typography mono sur certains labels et statuts - accents rust/teal sur CTA, badges, progression et reperes +## Hero actif +- eyebrow: `Electronique · automatisme · energie · optimisation` +- titre: `Systemes electroniques specifiques, du besoin au livrable fiable` +- sous-ligne: `electronique · automatisme · energie` +- fond image: oscilloscope en plan rapproche, lecture waveform / interface de mesure +- cadrage: image utile a droite, pas atelier large illisible +- surcouches: gradients clairs et accents teal/rust tres legers +- interdit: + - texture carnet legacy sur le panneau hero blanc + - photo d'atelier trop large ou trop generique + - overlays qui salissent la lecture du titre ou du CTA + ## Regles header 2026 - desktop: navigation inline, stable, sans bruit inutile - mobile: header compact, une seule ligne utile a l'ouverture de page @@ -65,6 +77,8 @@ Le positionnement public de reference devient : systemes electroniques specifiqu - production republee avec la top bar mobile via GitHub Actions `23096174775` - preview republie avec le positionnement electronique/automatisme/energie/stockage/optimisation via `23098262445` - production republiee avec le meme positionnement via `23098335508` +- hero blanc recadre sur une vraie image d'oscilloscope +- ancienne texture `hero-carnet-labo-open-v2` retiree du hero actif en high-contrast - le lab n'est plus publie sur preview ni sur production (`404` sur `/preview/lab/` et `/lab/`) - verification locale reproductible avec le `User-Agent` du workflow - controle navigateur humain encore requis pour la validation UX finale diff --git a/docs/project-master-todos.md b/docs/project-master-todos.md index 229fa81..2591bd7 100644 --- a/docs/project-master-todos.md +++ b/docs/project-master-todos.md @@ -39,6 +39,7 @@ Source of truth: this file for execution priorities, plus [docs/README.md](./REA - [x] Preview OVH republie avec le positionnement `electronique · automatisme · energie · stockage · optimisation` (`23098262445`). - [x] Production OVH republiee avec le meme positionnement (`23098335508`). - [x] `https://www.lelectronrare.fr/lab/` et `https://www.lelectronrare.fr/preview/lab/` repondent maintenant `404`. +- [x] Le hero blanc utilise maintenant un vrai visuel oscilloscope, avec recadrage et overlays recales pour la DA claire. - [x] `docs/README.md` cree comme point d'entree et source de verite documentaire. - [x] Runbooks et plans legacy les plus confus recales en mode historique ou remplaces par des versions actives. - [x] Les gros audits et plans de transition restants sont maintenant bannieres comme historiques pour eviter les faux redemarrages. @@ -52,7 +53,7 @@ Source of truth: this file for execution priorities, plus [docs/README.md](./REA ## P0 - Bloc de sortie immediate - [x] Builder le preview avec le theme blanc contraste (`PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external`). - [ ] Verifier le rendu de la home: top bar mobile, hero, approche, cas clients, missions, FAQ, footer. -- [ ] Verifier les surfaces medias: hero photo, photo strip, video strip. +- [ ] Verifier les surfaces medias: hero oscilloscope, photo strip, video strip. - [ ] Verifier la section contact en version claire: tabs, textarea, formulaire, focus clavier, messages d'etat. - [ ] Verifier `/formation/` et `/mentions-legales/` avec le meme theme clair. - [x] Deployer le preview OVH et valider `https://www.lelectronrare.fr/preview/`. @@ -63,6 +64,7 @@ Source of truth: this file for execution priorities, plus [docs/README.md](./REA - [x] Re-verifier en live les routes `/`, `/formation/`, `/mentions-legales/`, `/robots.txt`, `/sitemap.xml` via le check public GitHub Actions apres redeploiement. - [x] Verifier que `https://www.lelectronrare.fr/lab/` ne fait plus partie de la surface publique servie. - [ ] Verifier l'absence de retour vers l'ancienne homepage ou d'elements sombres residuels. +- [ ] Verifier le cadrage live du hero oscilloscope sur preview et production. - [ ] Verifier les ancres actives: `#a-propos`, `#graphic-sprints-title`, `#faq`, `#contact`. - [ ] Verifier la top bar mobile sur 390px et 768px: une seule ligne visible fermee, CTA `Contact` direct, menu stable, fermeture sur clic/Escape. - [x] Documenter la contrainte de verification locale: `curl` sans `User-Agent` specifique retourne `403` sur `www` depuis cette machine. diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx index cb3c3bb..99a0ec9 100644 --- a/src/components/sections/Hero.tsx +++ b/src/components/sections/Hero.tsx @@ -9,7 +9,7 @@ export function Hero() {