feat(ui): refine hero oscilloscope art direction

2026-03-15 00:29:59 +00:00
parent 3e6d6eb279
commit ba010105ca
9 changed files with 103 additions and 23 deletions
@@ -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`
@@ -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

@@ -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

@@ -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.
@@ -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
@@ -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.