diff --git a/docs/EXECUTION-IMMÉDIATE-2026-03-02.md b/docs/EXECUTION-IMMÉDIATE-2026-03-02.md index c175117..4f8dd4b 100644 --- a/docs/EXECUTION-IMMÉDIATE-2026-03-02.md +++ b/docs/EXECUTION-IMMÉDIATE-2026-03-02.md @@ -1,141 +1,65 @@ -# EXECUTIVE SUMMARY — Actions à faire immédiatement +# EXECUTION IMMEDIATE - White Contrast Rollout -**Date** : 2 mars 2026 -**Sévérité** : 🔴 CRITIQUE — Impact direct sur conversion -**Effort estimé** : 48-72h pour P0/P1 +Updated: 2026-03-14 +Severite: critique pour coherence visuelle et lisibilite ---- +## 3 actions prioritaires -## 🎯 3 ACTIONS PRIORITAIRES (Ce week-end) +### 1. Basculer tout le site sur une DA blanche par defaut +Probleme: +- la home synchronisee OVH est la bonne base, mais une partie du CSS reste encore oriente sombre +- le runtime pointait encore vers `data-theme="default"` -### **1️⃣ Optimiser images hero — GAIN IMMÉDIAT +30-40% CONVERSION** +Action: +- passer le layout sur un theme clair par defaut +- reposer les surfaces principales sur blanc/ivoire +- reprendre les accents en teal/rust +- traiter explicitement les ilots a risque: + - hero photo + - photo strip + - video strip + - `contact-minitel` + - FAQ focus -**Problème** : -- Image hero = **6.4 MB** (3.1 MB + 2.3 MB) -- LCP actuel : **~3.5 secondes** -- Mobile users : **40%+ bounce avant voir CTA** +Fichiers cle: +- `src/layouts/BaseLayout.astro` +- `src/lib/site.ts` +- `src/styles/global.css` +- `src/styles/home-workbench.css` -**Solution** (3-4h) : +### 2. Rebuilder et verifier le preview OVH +Action: +- builder la variante preview avec le bon `PUBLIC_SITE_URL` +- verifier que tous les liens et assets sortent en `/preview/` +- publier sur OVH seulement apres build propre + +Commande de base: ```bash -# 1. Installer convertisseur -brew install imagemagick webp - -# 2. Convertir 2 images hero en AVIF (meilleur ratio) -# hero-pcb-routing-map.png 3.1 MB → 160 KB AVIF -# proof-prototype-bench.png 2.3 MB → 140 KB AVIF - -# 3. Ajouter responsive srcset -# → Servir 390px/768px/1440px différentes - -# 4. Lazy-load secondary image -# → Primary eager = LCP, Secondary lazy +cd /home/zacus/electron-rare-preview-ovh +PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external ``` -**Résultat** : -- LCP : 3.5s → **<700ms** ✅ -- Conversion : +35-45% (mobile stops bounce) -- Page weight : 6.4 MB → **350 KB hero** +### 3. Revalider la production actuelle apres preview +Action: +- tester les pages et ancres reelles du site +- verifier la suppression du contraste sombre sur les surfaces critiques +- confirmer tracking et meta minimums -**Files à toucher** : -- [index.html](index.html#L197-L208) -- [script.js](script.js#L5-95) -- `/public/assets/da/openai/*.png` (convert to AVIF/WebP) +Routes a verifier: +- `/` +- `/formation/` +- `/mentions-legales/` +- `/lab/` +- `/robots.txt` +- `/sitemap.xml` ---- +## Cible de sortie +- theme blanc contraste par defaut +- contact lisible et clavier-friendly +- preview valide avant push prod +- docs alignees sur Astro + OVH + GitHub Actions FTP -### **2️⃣ Fixer typecheck CI — Éviter futur blocage** - -**Problème** : -- `npm run typecheck` échoue -- Risque bloquer CI dans 2-3 sprints - -**Solution** (1h) : -```bash -# Modifier tsconfig.json : -# Ajouter "exclude": ["tmp/**", "node_modules"] - -# Test : -npm run typecheck # ✅ doit passer -``` - -**Files** : [tsconfig.json](tsconfig.json) - ---- - -### **3️⃣ Valider GA4 Realtime — Confirmer acquisition fonctionne** - -**Problème** : -- Tracking implémenté mais **non validé en production** -- Risque conversion non mesurée - -**Solution** (1h) : -```bash -# 1. Ouvrir GA4 DebugView -# https://analytics.google.com/ → Admin → GTM-5SLM67QF - -# 2. Tester events live : -# - Visit https://electron-rare.github.io -# - Click CTA (Projets, Contact, LinkedIn) -# - Verify events appear en Realtime ✅ - -# 3. Archive : screenshot DebugView + events log -``` - ---- - -## 📊 IMPACT RÉSUMÉ - -| Action | Complexité | Impact | Timeline | -|--------|-----------|--------|----------| -| **Images AVIF** | ⭐⭐ | +35% conversion | 4h | -| **Figures responsive** | ⭐⭐⭐ | +15% mobile UX | 2h | -| **typecheck fix** | ⭐ | Risk mitigation | 1h | -| **GA4 validation** | ⭐ | Measurement trust | 1h | -| **Deploy + test** | ⭐⭐ | Verification | 2h | -| **TOTAL** | | **+50% overall UX** | **10h = 1.25 jours** | - ---- - -## 🚀 EXÉCUTION PROPOSÉE - -**Vendredi 2026-03-05** (finish line) : -- [ ] 09:00 : images conversion start -- [ ] 11:00 : HTML/script.js edits -- [ ] 13:00 : typecheck fix + test build -- [ ] 15:00 : GA4 validation + screenshot -- [ ] 16:30 : deploy + Lighthouse verify -- [ ] 17:30 : archive evidence + commit - -**Aftermath** : -- Week-end : monitor GA4 Realtime data -- Lundi : Lighthouse >85, LCP <2.5s validation - ---- - -## 💡 PROCHAINE ÉTAPE (Semaine 2) - -**Si images réussies (expected) :** -1. SEO enrichissement (JSON-LD WebSite, Organization) -2. GSC property claim + sitemap submit -3. Monitor indexation (7 jours) - -**Si complications** : -1. Revert images → fallback PNG optimisé (moins idéal mais rapide) -2. Continue sans AVIF (WebP+PNG suffisant) - ---- - -## 📞 SUPPORT TOOLS - -**Image conversion online** (backup) : -- https://cloudconvert.com/png-to-avif -- https://squoosh.app/ (Google, local) - -**Validation** : -- Lighthouse : Chrome DevTools F12 -- GA4 : https://analytics.google.com -- Schema : https://search.google.com/test/rich-results - ---- - -**Questions ?** → Lire [docs/audit-plan-amelioration-2026-03-02.md](audit-plan-amelioration-2026-03-02.md) pour détails complets. +## Regles +- ne plus documenter `index.html`, `script.js`, ou GitHub Pages root files comme source de prod +- ne plus parler de `#projets`, Malt, ou du bouton contraste +- ne plus relancer l'ancienne DA `studio/figma` diff --git a/docs/SPRINT-PLAYBOOK-2026-03-02.md b/docs/SPRINT-PLAYBOOK-2026-03-02.md index 5b32d2c..9c57592 100644 --- a/docs/SPRINT-PLAYBOOK-2026-03-02.md +++ b/docs/SPRINT-PLAYBOOK-2026-03-02.md @@ -1,543 +1,98 @@ -# SPRINT PLAYBOOK — Commands & Checklists +# Sprint Playbook - White Contrast / Preview / Prod -**Updated** : 2026-03-02 +Updated: 2026-03-14 +Repo: `/home/zacus/electron-rare-preview-ovh` ---- +## Sprint A - Theme clair -## SPRINT A — Performance (48-72h) - -### A1 — Image Conversion AVIF/WebP - -**Setup environment** : -```bash -cd /Users/cils/Documents/Lelectron_rare/electron-rare.github.io - -# Check tools disponibles -which convert # ImageMagick -which cwebp # WebP encoder - -# Si manquant : -brew install imagemagick libwebp -``` - -**Target images** : -```bash -# Collection des 2 images hero principales (v12 baseline) -SOURCE_PRIMARY="/public/assets/da/openai/hero-pcb-routing-map.png" -SOURCE_SECONDARY="/public/assets/da/openai/proof-prototype-bench.png" - -# Vérifier tailles actuelles -du -h "$SOURCE_PRIMARY" "$SOURCE_SECONDARY" -# Expected: 3.1 MB + 2.3 MB = 6.4 MB total - -# Créer répertoire optimisé -mkdir -p public/assets/da/openai/optimized -``` - -**Conversion AVIF** (best compression) : -```bash -# Primary image -convert "${SOURCE_PRIMARY}" \ - -quality 80 \ - -define webp:method=6 \ - -strip \ - "public/assets/da/openai/optimized/hero-pcb-routing-map.avif" - -# Secondary image -convert "${SOURCE_SECONDARY}" \ - -quality 80 \ - -define webp:method=6 \ - -strip \ - "public/assets/da/openai/optimized/proof-prototype-bench.avif" - -# Vérifier résultat -du -h public/assets/da/openai/optimized/*.avif -# Target: 150-180 KB each -``` - -**Conversion WebP** (fallback browser support) : -```bash -# Primary -> WebP -cwebp -q 85 "${SOURCE_PRIMARY}" \ - -o "public/assets/da/openai/optimized/hero-pcb-routing-map.webp" - -# Secondary -> WebP -cwebp -q 85 "${SOURCE_SECONDARY}" \ - -o "public/assets/da/openai/optimized/proof-prototype-bench.webp" - -# Verify -du -h public/assets/da/openai/optimized/*.webp -# Target: 200-250 KB each -``` - -**Comparaison avant/après** : -```bash -# Create comparison log -cat > artifacts/optimization-log-2026-03-02.txt << 'EOF' -IMAGE OPTIMIZATION SUMMARY -========================== - -Primary (hero-pcb-routing-map) : - Before: 3.1 MB PNG - After: - - 160 KB AVIF (-95%) - - 220 KB WebP (-93%) - - 3.1 MB PNG (fallback) - -Secondary (proof-prototype-bench) : - Before: 2.3 MB PNG - After: - - 140 KB AVIF (-94%) - - 190 KB WebP (-92%) - - 2.3 MB PNG (fallback) - -Total hero payload : - Before: 6.4 MB - After: 350 KB (AVIF primary) - Gain: -95% or 6.05 MB saved -EOF - -cat artifacts/optimization-log-2026-03-02.txt -``` - ---- - -### A2 — HTML Picture Element avec srcset - -**Edit [index.html](index.html)** → Find & replace hero images : - -**Before** (lines 197-208) : -```html -
- Plan de routage PCB avec traces et vias -
- - -
- Banc de test prototype avec instruments -
-``` - -**After** (with picture + srcset) : -```html - -
- - - - - - - - - Plan de routage PCB avec traces et vias - -
Routage PCB — voie signal, couche, décisions
-
- - -
- - - - - - - - - Prototype validé — preuve terrain et tests - -
Test de stabilité — responsiveness et fiabilité
-
-``` - -**Update [script.js](script.js)** → Ajuster paths dynaxmiques pour variants : - -```javascript -// line 5-95 : heroAssetByVariant object -// Add responsive paths for each variant : - -var heroAssetByVariant = { - v1: { - primary: { - avif: '/assets/da/openai/optimized/hero-pcb-routing-map.avif', - webp: '/assets/da/openai/optimized/hero-pcb-routing-map.webp', - png: '/assets/da/openai/hero-pcb-routing-map.png' - }, - secondary: { - avif: '/assets/da/openai/optimized/hero-measurement-rig.avif', - webp: '/assets/da/openai/optimized/hero-measurement-rig.webp', - png: '/assets/da/openai/hero-measurement-rig.png' - }, - // ... etc for v2-v12 - } -}; - -// Update img src setting logic: -if (heroPrimaryImage) { - // Fallback to PNG for old browsers (script.js sets primary src) - heroPrimaryImage.src = heroAssets.primary.png || heroAssets.primary; -} -``` - ---- - -### A3 — Responsive Image Variants - -**Generate 3 sizes per image** (390px, 768px, 1440px) : - -```bash -#!/bin/bash -# scripts/generate-responsive-images.sh - -SOURCES=( - "public/assets/da/openai/optimized/hero-pcb-routing-map" - "public/assets/da/openai/optimized/proof-prototype-bench" -) - -SIZES=(390 768 1440) - -for source in "${SOURCES[@]}"; do - base=$(basename "$source" .avif) - - for size in "${SIZES[@]}"; do - # AVIF variant - convert "${source}.png" \ - -resize "${size}x" \ - -quality 80 \ - "${source}-${size}.avif" - - # WebP variant - cwebp -q 85 \ - -resize "${size}" \ - "${source}.png" \ - -o "${source}-${size}.webp" - done -done - -echo "✅ Responsive variants generated" -du -h public/assets/da/openai/optimized/*-*.avif -``` - -**Run** : -```bash -bash scripts/generate-responsive-images.sh -``` - ---- - -### A4 — Test Locally - -```bash -# Build project -npm run build:external - -# Open locally -open dist/index.html -# or -npx http-server dist -p 8000 - -# Test Lighthouse Performance -# Chrome DevTools → Lighthouse → Measure page load -# Expected: Performance >85, LCP <800ms -``` - -**Capture** : -```bash -# Screenshot Lighthouse mobile report -# Save to artifacts/performance/lh-mobile-after.html -``` - ---- - -### A5 — Image Budget CI - -**Enhance [scripts/check-image-budget.mjs](scripts/check-image-budget.mjs)** : - -```javascript -// Add size limits check -const LIMITS = { - 'hero-pcb-routing-map.avif': 180_000, // 180 KB - 'hero-pcb-routing-map.webp': 250_000, // 250 KB - 'proof-prototype-bench.avif': 160_000, // 160 KB - 'proof-prototype-bench.webp': 230_000, // 230 KB -}; - -// Fail build if limits exceeded -Object.entries(LIMITS).forEach(([file, limit]) => { - const actual = fs.statSync(`public/assets/da/openai/optimized/${file}`).size; - if (actual > limit) { - console.error(`❌ ${file}: ${actual} > ${limit}`); - process.exit(1); - } -}); - -console.log('✅ All images within budget'); -``` - -**Test** : -```bash -npm run image:budget -# Expected: ✅ pass -``` - ---- - -## SPRINT B — SEO & QA - -### B1 — Fix typecheck - -**Edit [tsconfig.json](tsconfig.json)** : - -```json -{ - "extends": "astro/tsconfigs/strict", - "exclude": [ - "tmp/**", - "node_modules", - "dist/**", - ".astro/**" - ] -} -``` - -**Test** : +### A1 - Checks locaux ```bash +cd /home/zacus/electron-rare-preview-ovh +git status --short --branch npm run typecheck -# Expected: ✅ pass (0 errors) +npm run tracking:check +PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external ``` ---- +### A2 - Zones a verifier dans le build +- nav et hero +- approche et cas concrets +- photo strip et video strip +- formats de mission +- FAQ +- contact `minitel` clair +- footer +- pages `/formation/` et `/mentions-legales/` -### B2 — GA4 Realtime Validation +### A3 - Points d'attention +- pas de `Mode contraste` +- pas de retour a l'ancienne DA sombre +- pas d'ancre legacy `#projets` +- focus visible sur FAQ et formulaire -**Checklist** : -- [ ] Open https://electron-rare.github.io/ in browser -- [ ] Open DevTools → Console -- [ ] Execute : - ```javascript - console.log(window.dataLayer); - // Should show GTM events - ``` -- [ ] Navigate to GA4 DebugView - - [ ] https://analytics.google.com/ - - [ ] Admin → GTM account → Container - - [ ] Preview mode ON (blue banner) -- [ ] Click CTA buttons on site → Events appear in DebugView -- [ ] Take screenshot evidence +## Sprint B - Preview OVH -**Expected events** : -``` -✅ page_view (auto) -✅ cta_hero_projets (click "#projets" button) -✅ cta_hero_contact (click "#contact" button) -✅ cta_hero_profile (click LinkedIn button) -✅ outbound_linkedin_contact (if click external) -``` - -**Archive evidence** : +### B1 - Build preview ```bash -mkdir -p artifacts/tracking/2026-03-02 -# Save DebugView screenshot to: -# artifacts/tracking/2026-03-02/ga4-debugview.png +cd /home/zacus/electron-rare-preview-ovh +PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external ``` ---- - -### B3 — Deploy & Verify +### B2 - Deploy preview +- workflow GitHub Actions: `deploy-ovh-ftp.yml` +- target: `preview` +- remote attendu: `/www/preview` +### B3 - Verification preview ```bash -# Full flow -npm run build:external - -# Test local first -npm run preview - -# Deploy to OVH (if ready) -npm run deploy:web:sftp - -# Verify live -open https://electron-rare.github.io/ - -# Lighthouse final check -# Chrome DevTools → Run Lighthouse -# Measure → Full page audit +curl -fsSI https://www.lelectronrare.fr/preview/ +curl -fsSI https://www.lelectronrare.fr/preview/formation/ +curl -fsSI https://www.lelectronrare.fr/preview/mentions-legales/ ``` -**Expected results** : -``` -Performance: >85 (was <60) -LCP: <800ms (was 3.5s) -CLS: <0.1 -``` +## Sprint C - Production ---- +### C1 - Preconditions +- preview valide visuellement +- build propre +- pas de regression tracking evidente -## SPRINT C — SEO & Long-term - -### C1 — Google Search Console - -**Setup** : -1. Go to https://search.google.com/search-console -2. Select "URL prefix" → https://electron-rare.github.io/ -3. Verify ownership (HTML meta tag or file upload) -4. Add sitemap → /sitemap.xml -5. Request indexation for: - - `/` - - `/lab/` - -**Monitoring** (daily for 7-14 days) : -- Coverage report → no errors -- Indexation status → target 100% -- Mobile usability → no errors - ---- - -### C2 — Create Lighthouse Baseline Report +### C2 - Deploy production +- workflow GitHub Actions: `deploy-ovh-ftp.yml` +- target: `production` +- remote attendu: `/www` +### C3 - Verification production ```bash -# Generate and save baseline -npm run build - -# Install lighthouse globally (if needed) -npm install -g lighthouse - -# Run reports -lighthouse https://electron-rare.github.io/ \ - --output=html \ - --output-path=artifacts/audit-2026-03-02/lh-mobile-final.html \ - --preset=mobile - -lighthouse https://electron-rare.github.io/ \ - --output=html \ - --output-path=artifacts/audit-2026-03-02/lh-desktop-final.html \ - --preset=desktop - -# View results -open artifacts/audit-2026-03-02/lh-mobile-final.html +curl -fsSI https://www.lelectronrare.fr/ +curl -fsSI https://www.lelectronrare.fr/formation/ +curl -fsSI https://www.lelectronrare.fr/mentions-legales/ +curl -fsSI https://www.lelectronrare.fr/robots.txt +curl -fsSI https://www.lelectronrare.fr/sitemap.xml ``` ---- +## Sprint D - Tracking / SEO -## POST-DEPLOYMENT CHECKLIST +### D1 - Events a verifier +- `cta_hero_contact` +- `outbound_linkedin_contact` +- `outbound_email_contact` +- `outbound_github_contact` +- `cta_lab_interactif_open` +- `experiment_variant_exposed` +- `engagement_scroll_depth` +- `engagement_section_view` +- `cwv_metric` -```bash -# 1. Full test suite -npm run build:external # ✅ Build passes -npm run tracking:check # ✅ Tracking OK -npm run image:budget # ✅ Budget OK -npm run preflight:pages # ✅ Preflight OK -npm run typecheck # ✅ Types OK +### D2 - Pages/meta a verifier +- canonical +- robots +- sitemap +- OG/Twitter +- `theme-color` -# 2. Live verification -curl -I https://electron-rare.github.io/ -# Expected: HTTP 200 - -# 3. Lighthouse mobile -open https://electron-rare.github.io/ -# DevTools F12 → Lighthouse → Run -# Expected: Performance >85, LCP <800ms - -# 4. GA4 Realtime check -# https://analytics.google.com/ -# DebugView should show live events - -# 5. Archive evidence -mkdir -p artifacts/deployment-2026-03-02 -# Save screenshots & reports - -# 6. Final commit -git add . -git commit -m "perf: hero image optimization (AVIF/WebP, responsive srcset)" -git push origin main - -# 7. Verify deployment -# Wait 2-3 min for GitHub Pages -open https://electron-rare.github.io/ -# Verify rendered correctly -``` - ---- - -## COMMON TROUBLESHOOTING - -### Image conversion fails -**Solution** : -```bash -brew uninstall imagemagick -brew install imagemagick@7 -export PATH="/usr/local/opt/imagemagick@7/bin:$PATH" -``` - -### AVIF too large (>200 KB) -**Solution** : Reduce quality or pre-compress PNG : -```bash -# Reduce PNG first -pngquant 256 hero.png -o hero-256.png -# Then convert to AVIF with lower quality (70 instead of 80) -convert hero-256.png -quality 70 hero.avif -``` - -### Build error with Astro -**Solution** : -```bash -rm -rf node_modules dist .astro -npm ci -npm run build:external -``` - -### GA4 events not appearing -**Solution** : -```javascript -// Check DataLayer in console -window.dataLayer - -// Should show GTM events -// If empty: GTM script may not be loaded -// Check: GTM-5SLM67QF ID is correct in index.html -``` - ---- - -**For detailed context, see** : -[docs/audit-plan-amelioration-2026-03-02.md](audit-plan-amelioration-2026-03-02.md) +## Definition de done +- preview publie et valide +- prod publiee et validee +- theme blanc contraste par defaut confirme en live +- docs alignees sur Astro/OVH actuel diff --git a/docs/da-01-implementation-backlog.md b/docs/da-01-implementation-backlog.md index 79062c2..30e0f9c 100644 --- a/docs/da-01-implementation-backlog.md +++ b/docs/da-01-implementation-backlog.md @@ -1,191 +1,141 @@ -# Backlog DA-01 — Decision Complet +# Backlog DA-01 - White Contrast Consolidation -Date: 2026-03-02 -Source: Sprint DA-00 (brief + wireflow conversion) +Updated: 2026-03-14 +Source: homepage Astro synchronisee avec la base OVH ## Objectif -Implémenter la refonte complète selon le wireflow validé, sans modifier les contrats publics (anchors core, tracking, SEO). +Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire l'ancienne variante `studio/figma` ni le vieux modele GitHub Pages statique. -## Etat d'avancement DA (2026-03-02) -- [x] Mapping section/composants finalisé en phase de refonte. -- [x] DA-00 intégré: structure Header/Hero/Systems/Production/Conversion/Footer et zones mobiles définies. -- [x] Contrat tokens/typographie/couleurs maintenu dans `src/styles/global.css`. -- [x] Validation finale pré-production en cours (preflight + checks build locaux + captures Figma consolidées). -- [ ] Plan de version web hors GitHub réservé (build Astro externe) en attente de besoin produit. -- [ ] Revue de dérive visuelle et conversion à refaire sur chaque release majeure. +## Sources de verite +- Structure homepage: `src/pages/index.astro` +- Sections actives: `Hero`, `About`, `CaseStudies`, `GraphicSprints`, `Faq`, `Contact` +- Copy et donnees: `src/content/home-content.ts` +- Theme et layout: `src/layouts/BaseLayout.astro`, `src/styles/global.css`, `src/styles/home-workbench.css` +- Tracking: `src/lib/tracking.ts` + `src/layouts/BaseLayout.astro` +- Deploiement: `docs/ovh-ftp-preview-solution-2026-03-14.md` -## 1) Mapping section -> composants +## Decisions DA +- Theme par defaut: `high-contrast` clair, oriente blanc/ivoire. +- Palette de travail: + - fonds `#ffffff`, `#faf7f2`, `#f5efe4` + - texte `#0b0a09`, `#2f2a25` + - accent froid `#0b5d65` + - accent chaud `#7f4a23` +- Bouton contraste: non expose au public. Pas de toggle tant qu'il n'existe pas comme fonctionnalite produit reelle. +- Rendition souhaitee: + - surfaces blanches nettes + - contraste fort mais pas clinique + - traces teal/rust en accent, pas en fond systematique + - motion reduite et discrète -1. `Header_ControlRoom` +## Mapping section -> composants reels +1. `Header_Navigation` - Cible: `src/pages/index.astro` + `src/layouts/BaseLayout.astro` -- Eléments: - - nav niveau 1 (labels libres) - - bus posture (niveau 2) - - status + contrast toggle +- Elements: + - marque + - nav anchors + - acces direct formation, lab, FAQ, contact -2. `Hero_Impact` +2. `Hero_Conversion` - Cible: `src/components/sections/Hero.tsx` -- Eléments: - - hook visuel - - manifeste 3 lignes - - CTA dual rail +- Elements: + - promesse + - statut/disponibilite + - CTA contact + - fond photo + lockup -3. `Identity_Proof` -- Cible: `src/components/sections/IdentityLab.tsx` + `TrustStrip.tsx` -- Eléments: - - identité studio - - preuves rapides +3. `About_Approche` +- Cible: `src/components/sections/About.tsx` +- Elements: + - portrait + - expertise + - secteurs + - chips d'offres / familles de sujets -4. `Systems_Block` -- Cible: `FlowDiagram.tsx` + `SystemPipeline.tsx` + `About.tsx` -- Eléments: - - explication process - - architecture systeme +4. `Cases_Proof` +- Cible: `src/components/sections/CaseStudies.tsx` +- Elements: + - cas concrets + - preuve de terrain + - articulation industrie / culture / produit -5. `Production_Block` -- Cible: `Projects.tsx` + `ProjectsTimeline.tsx` + `LabNotes.tsx` -- Eléments: - - portfolio systemique - - chronologie - - protocole Intent->Result - -6. `Conversion_Block` -- Cible: `TrustStrip.tsx` + `Contact.tsx` -- Eléments: - - reassurance - - contact 2 voies (LinkedIn/Malt) - -7. `Footer_Knowledge` +5. `Field_Media` - Cible: `src/pages/index.astro` + `src/styles/global.css` -- Eléments: - - liens process/stack/contact +- Elements: + - photo strip + - video strip -## 2) Mapping token -> CSS var +6. `Mission_Formats` +- Cible: `src/components/sections/GraphicSprints.tsx` +- Elements: + - 3 formats + - progression + - CTA de contact -Fichier cible: `src/styles/global.css` +7. `Faq_Trust` +- Cible: `src/components/sections/Faq.astro` +- Elements: + - details/summary + - reponse rapide aux objections -### Palette -- `--bg`, `--bg-elevated`, `--surface`, `--surface-soft`, `--surface-alt` -- `--trace-cyan`, `--trace-magenta`, `--trace-green`, `--trace-amber` -- `--electric`, `--accent`, `--signal` -- `--line`, `--line-soft`, `--line-edge`, `--line-rail` +8. `Contact_ClearTerminal` +- Cible: `src/components/sections/Contact.astro` +- Elements: + - bloc contact type minitel mais en rendition claire + - email draft + - formulaire direct + - LinkedIn -### Typographie -- display serif editorial -- body sans -- micro labels mono +9. `Footer_Knowledge` +- Cible: `src/pages/index.astro` +- Elements: + - navigation secondaire + - ressources + - contact direct -### Layout -- `site-shell` largeur max desktop -- grilles desktop/mobile (1440/390) -- rules sections `structure-grid` / `structure-cell` +## Backlog P0 +- [ ] Forcer la cascade sur la DA blanche dans `BaseLayout.astro`, `site.ts`, `global.css`, `home-workbench.css`. +- [ ] Relever les derniers blocs sombres restants: `hero-bg-photo`, `photo-strip`, `video-strip`, `contact-minitel`, FAQ focus. +- [ ] Verifier la lisibilite des CTA sur blanc. +- [ ] Verifier que la home et `formation` partagent bien le meme socle visuel. -## 3) Mapping interaction -> motion rule +## Backlog P1 +- [ ] Supprimer les references documentaires a `#projets`, Malt, GitHub Pages static prod, dual-rail hero, contrast toggle. +- [ ] Verifier les events `data-track` sur les CTA actifs uniquement. +- [ ] Valider preview OVH puis prod. -### Navigation -- progress line header -- etat actif sur section visible -- micro-jitter actif uniquement sur lien actif - -### Sections -- reveal par bloc (opacity + translateY) -- cadence differenciee par bloc (Hero > Systems > Conversion) - -### CTA -- etat hover/focus/active explicite -- primaire > secondaire visuellement - -### Accessibilite motion -- `prefers-reduced-motion`: desactiver animations non essentielles - -## 4) Interfaces internes a standardiser - -### CTA contract -Type logique: -- `label: string` -- `href: string` -- `event: TrackEventName` -- `destination: string` -- `external?: boolean` - -Usage: -- Hero, About, Projects, Contact, Trust utilisent le meme contrat. - -### Proof card contract -Type logique: -- `label: string` -- `value: string` -- `priority?: "high" | "medium"` - -### Timeline/LabNotes contract -Type logique: -- `date/year` -- `title` -- `category` -- `summary` -- `href/event/destination` optionnels - -## 5) Gates de validation DA-01 +## Backlog P2 +- [ ] Supprimer les reliquats `.site-contrast-toggle` du CSS global. +- [ ] Evaluer si un vrai theme secondaire doit exister plus tard ou si le mode blanc reste la seule version publique. +- [ ] Consolider une archive explicite des anciens artefacts DA pour eviter toute reintroduction. +## Gates de validation ### Gate Build - `npm run typecheck` -- `npm run build` -- `npm run preflight:pages` +- `npm run build:external` - `npm run tracking:check` ### Gate UX -- ancres `#a-propos`, `#projets`, `#contact` fonctionnelles -- CTA primary/secondary lisibles -- mobile 390 sans overflow -- validation 390/768/1024/1440 conservée dans evidence - -### Gate Tracking -- events declenches sans duplication -- params `event_category/event_label/destination` conformes +- Aucun panneau critique ne reste sur fond sombre. +- Mobile 390/768 sans debordement. +- CTA primary/secondary lisibles sur fond clair. +- Contact completement utilisable. ### Gate Accessibilite -- focus visible -- ordre tab coherent -- reduced-motion OK +- Focus visible sur nav, FAQ, CTA, formulaire. +- Contraste texte/fond conforme sur les composants critiques. +- `prefers-reduced-motion` conserve. -### Gate SEO -- robots/sitemap accessibles -- canonical + OG/Twitter presents +### Gate Tracking +- Aucun event legacy mort. +- Clics hero/contact/lab/linkedin/email visibles dans la dataLayer. -## 6) Ordre d’implementation recommande +### Gate Deploy +- Preview OK avant production. +- Verification live des URL et ancres. -### P0 -1. Recomposer la structure de `src/pages/index.astro` -2. Harmoniser tokens/layout de `src/styles/global.css` -3. Verifier ancres core + tracking - -### P1 -1. Harmoniser les sections (Hero, Systems, Production, Conversion) -2. Finaliser footer knowledge/protocoles -3. QA responsive + accessibilite - -### P2 -1. Storybook coverage structure + sections -2. Optimisation bundle/motion - -## 7) Risques et parades - -1. Risque: surcharge visuelle -- Parade: matrice arbitrage DA vs conversion appliquee - -2. Risque: regression tracking -- Parade: tests manuels click-by-click + check dataLayer - -3. Risque: degrade mobile -- Parade: validation systematique 390/768/1024/1440 - -## 8) Version duale (prod immédiate + web hors GitHub) -- Production immédiate: GitHub Pages conserve la version `index.html/styles.css/script.js` pour stabilité. -- Version web hors GitHub: build Astro `dist/` prévu comme variante de long terme (non déployé pour le moment). -- Règle: aucun changement d'UI ne doit diverger sans mise à jour explicite des 2 cahiers de preuve (scope statique + scope web externe). - -## 9) Definition of done DA-01 -1. Structure cible implementee en code. -2. DA conforme au brief v2.2.0 (reset innovant). -3. Contrats publics preserves. -4. Tests passes et evidence mise a jour. +## Definition of done +1. Le site public sert par defaut une version blanc contraste coherente. +2. Aucun element critique de l'ancienne DA sombre ne reste visible. +3. Les docs actives parlent du vrai site OVH/Astro actuel. +4. Preview et production sont verifiees sur cette base. diff --git a/docs/design-memory-2026-03-14-white-contrast.md b/docs/design-memory-2026-03-14-white-contrast.md new file mode 100644 index 0000000..3a5d336 --- /dev/null +++ b/docs/design-memory-2026-03-14-white-contrast.md @@ -0,0 +1,53 @@ +# Design Memory - White Contrast Baseline + +Date: 2026-03-14 +Status: active + +## Decision +La version publique de L'Electron Rare repart sur une base claire, contraste blanc, par defaut. + +## Pourquoi +- la homepage OVH synchronisee est la bonne base produit +- l'ancienne DA sombre et experimentale brouillait la lisibilite +- le site doit inspirer precision, methode et confiance avant de projeter un univers +- l'accessibilite et la lecture rapide gagnent avec des surfaces claires et des accents plus disciplinés + +## Regles visuelles +- fonds: blanc, ivoire, creme tres legere +- texte principal: noir chaud / brun tres fonce +- accent froid: teal technique +- accent chaud: cuivre / brun signal +- panneaux: clairs, nets, ombres courtes +- pas de halo neon comme logique dominante +- pas de glitch ou scanline comme effet de signature principal + +## Ce qui reste autorise +- texture subtile de trame ou de grille +- references bench / signal / PCB en couche legere +- typography mono sur certains labels et statuts +- accents rust/teal sur CTA, badges, progression et reperes + +## Ce qui est interdit +- retour a la home `studio/figma` +- bouton contraste sans vraie fonctionnalite produit +- docs qui parlent encore de GitHub Pages statique comme prod active +- anchors/documentation legacy de type `#projets` + +## Implementation +- runtime: `data-theme="high-contrast"` dans `src/layouts/BaseLayout.astro` +- meta navigateur claire: `themeColor` blanc dans `src/lib/site.ts` +- socle visuel: `src/styles/global.css` +- overrides DA v12: `src/styles/home-workbench.css` + +## QA minimum +- nav +- hero +- about +- case studies +- media strips +- mission cards +- FAQ +- contact +- footer +- formation +- mentions legales diff --git a/docs/project-master-todos.md b/docs/project-master-todos.md index 2e97e1f..21ef665 100644 --- a/docs/project-master-todos.md +++ b/docs/project-master-todos.md @@ -1,69 +1,67 @@ -# Master TODO - Electron rare site +# Master TODO - Electron Rare OVH/Astro -Date: 2026-03-02 -Source of truth: this file +Updated: 2026-03-14 +Source of truth: this file for execution priorities, plus the current code in `src/` -## Scope -- Site GitHub Pages (production): `index.html`, `styles.css`, `script.js`, `/lab/` -- Référence d'intégration UI/logicielle: `src/pages/index.astro`, `src/styles/global.css`, `src/components/*` -- Option web hors GitHub (en parallèle, si exigée): build Astro `dist/` publié sur autre host -- Module C interactif: `apps/lab-interactif` -> publication `lab/` -- Direction artistique active: `experimental-noise`, `electric-contrast`, `clarity-first` (reset 2026-03-02) -- Acquisition: SEO + tracking GTM/GA4 + conversion CTA +## Scope actif +- Site Astro publie sur OVH via GitHub Actions FTP. +- Preview publique sous `/preview/`, production a la racine. +- Pages actives: `/`, `/formation/`, `/mentions-legales/`, `/lab/`, `robots.txt`, `sitemap.xml`. +- Direction artistique active: `white-contrast`, claire par defaut, sans bouton de bascule public. +- Surface a maintenir: Hero, Approche, Cas concrets, photo strip, video strip, Missions, FAQ, Contact, footer. -## Decision Log DA (2026-03-02) -- [x] Avancée majeure: refonte UI complète validée en mode DA-00 sur `index.html` (scope web visible actuel). -- [x] Avancée majeure: plan DA (wireflow + composants + tokens) consolidé. -- [ ] Décision d'exploitation: maintien de la version GitHub Pages comme production immédiate, préparation d'un build Astro externe pour version web hors GitHub. -- [ ] Action nécessaire: aligner chaque évolution UI avec un `artifact` d'avancement daté (captures + preuve QA) pour éviter la dérive. +## Verites de reference +- Structure de page: `src/pages/index.astro` +- Sections actives: `src/components/sections/Hero.tsx`, `About.tsx`, `CaseStudies.tsx`, `GraphicSprints.tsx`, `Faq.astro`, `Contact.astro` +- Theme/layout: `src/layouts/BaseLayout.astro`, `src/styles/global.css`, `src/styles/home-workbench.css` +- Canonical/base/deploiement: `src/lib/site.ts`, `scripts/build-astro-external.mjs`, `docs/ovh-ftp-preview-solution-2026-03-14.md` +- Tracking actif: `src/lib/tracking.ts` + emitters inline dans `src/layouts/BaseLayout.astro` -## Base DA / architecture -- [x] Brief DA v2.2.0 verrouille le reset innovant (`notes-interne/creative-direction-brief.md`) -- [x] Home reconstruite de zero en statique -- [x] Top 3 GitHub en section Projets + bouton "Voir plus" en section dediee -- [x] Module C "Lab interactif" implemente (React Router) -- [x] Routing lab adapte GitHub Pages (HashRouter) +## Etat courant +- [x] Homepage OVH re-synchronisee dans le repo Astro. +- [x] Ancienne variante `studio/figma` sortie du runtime actif. +- [x] Bouton contraste retire du markup. +- [x] Theme blanc contraste force par defaut dans le layout source. +- [ ] White-contrast pass verifiee visuellement sur preview. +- [ ] White-contrast pass verifiee visuellement sur production. -## QA P1 (2026-03-02) -- [x] Passe visuelle responsive 390/768/1024/1440 (home + lab) -- [x] Captures + rapport QA archives (`artifacts/qa-test/2026-03-02/responsive-p1/`) -- [x] Storybook build coverage P2 execute (`npm run storybook:build`) -- [x] Checklist prod locale GA4/Search Console preparee +## P0 - Bloc de sortie immediate +- [ ] 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: nav, hero, approche, cas clients, missions, FAQ, footer. +- [ ] Verifier les surfaces medias: hero photo, 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. +- [ ] Deployer le preview OVH et valider `https://www.lelectronrare.fr/preview/`. -## Tracking / GA4 -- [x] Contrat hero conserve (`cta_hero_projets`, `cta_hero_contact`, `cta_hero_profile`) -- [x] Events GitHub dedies ajoutes -- [x] Compat legacy preservee (`data-track-legacy`) -- [ ] Validation GA4 Realtime sur environnement public -- [ ] Validation GA4 DebugView (params conformes) -- [ ] Definition conversion GA4 primaire LinkedIn / secondaire Malt +## P1 - Validation live +- [ ] Si preview valide, deployer la production a la racine. +- [ ] Verifier en live les routes `/`, `/formation/`, `/mentions-legales/`, `/lab/`, `/robots.txt`, `/sitemap.xml`. +- [ ] Verifier l'absence de retour vers l'ancienne homepage ou d'elements sombres residuels. +- [ ] Verifier les ancres actives: `#a-propos`, `#cas-clients`, `#graphic-sprints-title`, `#faq`, `#contact`. -## SEO / Search Console -- [x] `robots.txt` racine -- [x] `sitemap.xml` racine maj 2026-03-02 -- [x] Sitemap inclut `/` et `/lab/` -- [x] Canonical + OG + Twitter sur home -- [ ] Validation Search Console (propriete + soumission sitemap + indexation) -- [ ] Validation previews sociaux (LinkedIn/Facebook) +## P2 - Tracking / SEO +- [ ] Valider GA4 Realtime et DebugView pour les events actuels: + - `cta_hero_contact` + - `outbound_linkedin_contact` + - `outbound_email_contact` + - `outbound_github_contact` + - `cta_lab_interactif_open` +- [ ] Verifier les events auto: + - `experiment_variant_exposed` + - `engagement_scroll_depth` + - `engagement_section_view` + - `cwv_metric` +- [ ] Re-verifier canonical, OG, Twitter, robots, sitemap et `theme-color`. +- [ ] Soumettre ou recontroler Search Console sur la base de la prod actuelle OVH. -## Roadmap web hors GitHub (optionnelle) -- [ ] Générer `dist/` Astro à partir du même contenu (`npm run build`) pour maquette/landing dédiée hors GitHub Pages. -- [x] Ajouter un plan de déploiement alternatif (Netlify/Vercel/custom) sans toucher au contrat d'ancrage (`#a-propos`, `#projets`, `#contact`) : configs `vercel.json` et `netlify.toml` + script `build:external`. -- [ ] Documenter la divergence minimale: route, headers, et variables d'environnement GA/SEO. -- [ ] Valider que le contrat de tracking reste identique entre les deux versions (labels, destinations, event_category). +## P3 - Nettoyage et consolidation +- [ ] Supprimer les blocs CSS morts `.site-contrast-toggle` encore presents dans `src/styles/global.css`. +- [ ] Nettoyer les docs qui parlent encore de GitHub Pages static root, `#projets`, Malt, ou du toggle contraste. +- [ ] Mesurer LCP et budget media de la variante blanche en conditions reelles. +- [ ] Archiver les plans anterieurs devenus purement historiques. -## Deploy GitHub Pages -- [x] Workflow migre: static site + lab (`.github/workflows/deploy-pages.yml`) -- [x] Doc deploy mise a jour (`docs/github-pages-deploy.md`) -- [ ] Trigger deploy depuis `main` et verification URL publique -- [x] Exécuter `docs/dual-deployment-execution-plan.md` pour valider le mode “GitHub Pages + web externe” si décision produit. -- [x] Captures QA planifiées 390/768/1024/1440: `artifacts/qa-test/2026-03-02/responsive-p1/`. -- [x] Preflight local complété (2026-03-02): `npm run preflight:pages` -- [x] Build Astro vérifié (2026-03-02): `npm run build` -- [ ] Déploiement GH Pages post-lock (validation public URL + ancres + OG/robots/sitemap) -- [x] Déploiement OVH mutualise en SFTP valide (2026-03-02): `npm run deploy:web:sftp` + verification remote bundles (`index.html`, `Hero.D8ngAjmO.js`, `index.DrEuSoRX.css`) - -## Rituels de verification -- Avant merge: `npm run preflight:pages` -- A chaque pass majeur: mise a jour `artifacts/qa-test//...` + `evidence/manifest.json` -- Toute variation DA: mise a jour du brief avant patch UI +## Regles de pilotage +- Preview d'abord, production ensuite. +- Toute doc active doit parler du site Astro/OVH actuel, pas d'une ancienne homepage statique. +- Les ancres de reference sont celles du code actuel, pas `#projets`. +- Le theme de reference est clair/white-contrast par defaut. diff --git a/src/components/sections/CaseStudies.tsx b/src/components/sections/CaseStudies.tsx index 1b2c335..3b1bba8 100644 --- a/src/components/sections/CaseStudies.tsx +++ b/src/components/sections/CaseStudies.tsx @@ -1,4 +1,4 @@ -import { TRACK_EVENTS, trackAttrs } from '@/lib/tracking'; +import { trackAttrs } from '@/lib/tracking'; import { CASE_STUDIES } from '@/content/home-content'; export function CaseStudies() { diff --git a/src/components/sections/Faq.astro b/src/components/sections/Faq.astro index c9238b4..aff9300 100644 --- a/src/components/sections/Faq.astro +++ b/src/components/sections/Faq.astro @@ -87,5 +87,5 @@ const jsonLd = { -