Scaffolds all components needed for the home and ships a working
front-page implementation covering the 9-section wireframe.
Components (assets/css/components.css)
- 13 sections per Design Handoff section 3:
buttons, links, forms, cards (5 variants), stat callouts, header,
nav, mega menu, drawer, footer, hero, logo strip, eyebrow,
section title/lead, conversion banner, scroll reveal.
- All token-driven, prefixed `av-`, BEM-light. Mobile-first with
768/1024/1280 breakpoints. Respects prefers-reduced-motion.
Global templates
- header.php: sticky header (60px mobile / 72px desktop), 5-item
nav, language switcher, primary CTA, mobile drawer with hamburger
toggle. Skip link first focusable element.
- footer.php: 5-column dark footer (Solutions, Industries, Why
Asterion, Why Asterion, Newsletter), bottom strip with legal
links + social.
- index.php: archive/search/blog fallback rendering posts in
card-blog layout.
- front-page.php: full home with 9 sections, EN copy lifted
verbatim from PDF Strategie D.1:
1. Hero "Your Last Mistake Should Be in VR." + 2 CTAs
2. Trust bar (placeholder logos + 4 inline metrics)
3. Solutions: MY / FLEX / ACADEMY (3 cards)
4. Industries: Police / SF / Military / Firefighters (2x2)
5. Feature heroes: UWeD, Instructor Cockpit, AAR (alternating)
6. Featured case study with 3 stat callouts
7. Testimonials (3 quote cards)
8. Latest insights (queries `post`; placeholder when empty)
9. Conversion banner (Demo / T&E / Quote)
Verified: HTTP 200 on http://localhost:10004/, 73 KB HTML, 418 ms.
Outstanding (deferred)
- Hero video master + photographs (see MISSING-ASSETS.md)
- Mega menu content (links currently flat to section index)
- Form posts (newsletter currently no-op POST)
- Bricks license activation (manual, requires user key)
- WPML setup wizard (manual, requires user key)
- Lighthouse + axe full audit (visual env required)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Asterion VR — Refonte du site web 2026
Repo de la refonte d'asterionvr.com : nouveau site institutionnel B2B/B2G de la plateforme XR PROSERVE pour les forces de sécurité européennes (police, special forces, military, firefighters).
Stack : WordPress 6.x + Bricks Builder (parent) + child theme custom
asterion-bricks+ WPML. Cible : Lighthouse 90+, WCAG 2.1 AA, mobile-first, RGPD-natif, hébergement français.
Documents de référence
À lire dans cet ordre avant tout travail technique :
BRIEF-Claude-Code.md— brief de démarrage projet (13 sections, contraintes, conventions).Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf— livrable 1 (84 p) : diagnostic, stratégie, sitemap, copy EN prête de toutes les pages.Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf— livrable 2 (31 p) : tokens, composants UI, wireframes des 7 templates, motion, a11y.
Les .txt extraits des PDF sont gitignorés. Pour les régénérer :
pdftotext -layout "Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf" "design-handoff.txt"
pdftotext -layout "Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf" "strategie-et-contenu.txt"
(pdftotext est inclus dans Git for Windows : C:\Program Files\Git\mingw64\bin\pdftotext.exe.)
Setup local (LocalWP + symlink Git)
1. Pré-requis
- LocalWP (https://localwp.com) configuré en mode
localhost(Preferences → Advanced → Router Mode =localhost) pour cohabiter avec d'autres stacks locales (XAMPP, etc.). - Site LocalWP créé : nom Asterion 2026, dossier
C:\Users\j_foucher\Local Sites\asterion-2026\. - ZIP des plugins commerciaux (chacun doit fournir les siens, depuis son propre compte) :
bricks.X.Y.Z.zip— depuis https://bricksbuilder.iositepress-multilingual-cms.X.Y.Z.zip— depuis https://wpml.org- À déposer dans
ThirdParty/(gitignored).
2. Installer Bricks parent
- Décompresser
ThirdParty/bricks.X.Y.Z.zipdans<LocalWP site>/app/public/wp-content/themes/. - Activer Bricks dans WP Admin → Apparence → Thèmes.
- Renseigner la license dans Bricks → License (depuis ton compte bricksbuilder.io).
3. Installer WPML
- Dans WP Admin → Extensions → Ajouter → Téléverser, charger
ThirdParty/sitepress-multilingual-cms.X.Y.Z.zip. - Activer le plugin et entrer la clé de license depuis ton compte wpml.org.
4. Symlink le child theme depuis ce repo vers LocalWP
Depuis une PowerShell admin :
New-Item -ItemType SymbolicLink `
-Path "C:\Users\j_foucher\Local Sites\asterion-2026\app\public\wp-content\themes\asterion-bricks" `
-Target "C:\ASTERION\GIT\WP2026\wp-content\themes\asterion-bricks"
Puis dans WP Admin → Apparence → Thèmes, activer Asterion Bricks (le child theme).
Structure du repo
WP2026/
├── BRIEF-Claude-Code.md # brief projet (lecture obligatoire)
├── README.md # ce fichier
├── MISSING-ASSETS.md # tracking des visuels/medias manquants
├── *.pdf # 2 livrables stratégie + design (sources de vérité)
├── ThirdParty/ # gitignored — ZIP plugins commerciaux à déposer manuellement
│ ├── bricks.*.zip
│ └── sitepress-multilingual-cms.*.zip
└── wp-content/
└── themes/
└── asterion-bricks/ # le child theme — coeur du travail
├── style.css # en-tête WP + import tokens
├── functions.php # hooks, registers, queries
├── theme.json # tokens globaux (Gutenberg + Bricks)
├── assets/
│ ├── css/ # tokens.css, components.css, utilities.css
│ ├── js/ # vanilla JS, defer
│ ├── fonts/ # Inter + Inter Display self-hosted (RGPD)
│ └── img/
├── templates/ # exports Bricks JSON (versionnés)
├── inc/ # CPT, ACF field groups, SEO schema
└── README.md
Conventions
- CSS : préfixe
av-(asterion-vr), nommage BEM-light, zéro hardcode (tout via tokens). - JS : vanilla, defer, modules ES6 si nécessaire.
- Images : AVIF + WebP + JPG fallback, lazy-loading natif sauf hero.
- Vidéos : MP4 H.264 + WebM VP9, autoplay muted plays-inline loop, poster image.
- Commits : Conventional Commits (
feat:,fix:,chore:,style:,refactor:,test:,docs:). - Branches :
main= stable,feat/<scope>= work in progress, merge après validation.
Hors scope phase actuelle
Production (OVH/O2switch + Cloudflare), migration depuis Avada, plan 301, traduction FR (linguiste interne), création articles blog éditoriaux (post-launch).
Contact
- Client : Jérôme Foucher — Asterion VR — jerome.foucher@asterionvr.com
- Repo : git.polymorph.fr (privé)