Projet UGC
Sites vitrines mono-page,
100 % statiques, pour petits commerces.
Un config.json par client, un thème par secteur, et une démo déployable en quelques minutes — pour arriver au rendez-vous commercial avec le site déjà construit à 90 %.
01Le workflow « prospect en 5 minutes »
Scaffold
npm run new le-slug -- --theme=resto crée la structure du client à partir d’un thème secteur.
Remplir le config
Recopier nom, adresse, téléphone, horaires, avis et mots-clés locaux depuis la fiche Google Business du prospect.
Déposer les photos
N’importe quel JPEG/PNG — le build optimise tout (WebP, 3 tailles, lazy-load). Sans photos, le site fonctionne (hero en aplat).
Vérifier & publier
npm run preview pour le contrôle visuel, puis déploiement. Changer "theme" → rebuild → toute l’ambiance bascule en rendez-vous.
02Thèmes par secteur
| Thème | Ambiance | Libellé services | Particularité | schema.org |
|---|---|---|---|---|
| resto | bordeaux/doré, bistrot | « La carte » | bandeau promo mis en avant | Restaurant |
| coiffure | noir/or, éditorial | « Nos prestations » | galerie portrait 3:4 avant l’à-propos | HairSalon |
| garage | bleu acier/jaune, robuste | « Nos services » | galerie désactivée par défaut | AutoRepair |
| couture | indigo/ocre, artisanal | « Créations & retouches » | l’artisan avant les services | ClothingStore |
Créer un thème = copier un dossier de themes/, ajuster theme.json (palette, typos, ordre des blocs) et theme.css. Le build vérifie les contrastes AA et avertit sous 4.5:1.
03Performance, accessibilité, SEO local
▸Zéro ressource bloquante
CSS (core + thème, minifié) et JS (< 3 Ko) inlinés. Aucune requête externe : pas de fonts Google, pas de CDN, pas d’iframe Maps au chargement.
▸Images optimisées
Dérivés WebP 480/800/1200 + fallback JPEG (sharp), <picture> + srcset, dimensions posées (zéro CLS), lazy-load, hero en fetchpriority=high.
▸Accessibilité
HTML sémantique, skip-link, navigation clavier, lightbox <dialog>, alt obligatoires, contrastes AA vérifiés au build, prefers-reduced-motion respecté.
▸SEO local
Title/description/canonical/OG dynamiques + JSON-LD LocalBusiness (sous-type par secteur) avec adresse, géo, horaires, tél, réseaux.
▸Carte RGPD-friendly
Bouton Itinéraire en deep-link Google Maps ; l’iframe n’existe qu’au clic (façade) — perf + RGPD.
▸Démo auto-contenue
npm run pack <slug> exporte la démo en un seul fichier HTML (images inlinées) — envoyable par Telegram/WhatsApp, s’ouvre hors ligne.