PHI Conseil — site web
Site vitrine de PHI Conseil (« Stratégies · Financement · Réussite »), reproduit fidèlement à partir de la maquette client (references/phi-conseil-homepage.jpeg) et conçu comme un produit de production : Next.js 16 (App Router), React 19, TypeScript strict, Tailwind CSS 4, contenu administrable validé par Zod, formulaire de contact sécurisé, tests unitaires et de bout en bout.
Démarrage
bash
pnpm install
cp .env.example .env.local # ajuster au besoin (transport courriel, URL)
pnpm dev # http://localhost:3000Prérequis : Node.js ≥ 20 (testé avec 26), pnpm ≥ 10.
Scripts
| Commande | Rôle |
|---|---|
pnpm dev |
serveur de développement |
pnpm build / pnpm start |
build de production / serveur de production (-p <port>) |
pnpm lint |
ESLint (config Next + règles React Compiler) |
pnpm typecheck |
tsc --noEmit |
pnpm test |
tests unitaires Vitest (schémas, validation, sécurité, API, composants) |
pnpm test:e2e |
Playwright : navigation, menu mobile, formulaire, débordements, axe, captures (docs/screenshots/) ; nécessite pnpm build au préalable et pnpm exec playwright install chromium webkit la première fois |
pnpm check |
lint + typecheck + tests + build |
pnpm icons |
régénère favicon / icônes à partir du logo (spirale dorée) |
pnpm format |
Prettier |
Structure
text
content/ contenu administrable (site.json, home.json, pages.json) — voir docs/CLIENT_GUIDE.md
src/app/ routes (accueil, services, a-propos, temoignages, nous-joindre, confidentialite, api/contact)
src/components/ layout/ sections/ ui/ graphics/ forms/
src/lib/ content.ts (schémas + chargeur), env.ts, validation.ts, security.ts, mail.ts, seo.ts, spiral.ts
src/styles/ tokens.css (design tokens : couleurs échantillonnées, typo, espacements…)
tests/unit, tests/e2e
docs/ plan, déploiement, guide client, rapport QA, registre des actifs, captures
references/ maquette clientPrincipes
- Fidélité : couleurs échantillonnées sur la maquette, structure DOM = ordre visuel sur tous les écrans, motifs (spirale de Fibonacci, vagues, feuillage) en SVG.
- Honnêteté du contenu : aucune coordonnée, témoignage ou réalisation inventés. Les témoignages ne sont publiés que s'ils sont
approved: trueet la sectionvisible: true; les photos de la maquette sont remplacées par des illustrations vectorielles tant que le client n'a pas fourni d'images sous licence (docs/ASSET_REGISTER.md). - Vie privée : bannière de témoins conforme à la Loi 25 (refus par défaut, choix par catégorie, révocable via « Gérer les témoins », témoin
phi_consent180 jours). Aucun traceur n’est installé ; tout futur outil d’analyse doit être conditionné àhasConsent("analytics")(src/lib/consent.ts). - Sécurité : CSP, en-têtes durcis, validation Zod client + serveur, honeypot, délai anti-robot, limitation de débit, dédoublonnage, journalisation sans donnée personnelle, secrets uniquement côté serveur.
- Accessibilité : WCAG 2.2 AA visé (axe sans violation sur toutes les pages), navigation clavier,
prefers-reduced-motion, lien d'évitement, états focus visibles.
Documentation
docs/IMPLEMENTATION_PLAN.md— audit, architecture, décisions, critères d'acceptationdocs/DEPLOYMENT.md— hébergement, DNS, HTTPS, variables, sauvegardes, rollbackdocs/CLIENT_GUIDE.md— modifier textes, services, témoignages, images, coordonnéesdocs/QA_REPORT.md— résultats réels des vérifications, limites, points à validerdocs/ASSET_REGISTER.md— provenance, licence et statut de chaque actif