Maison des Artisans — refonte complète d'un site vitrine constructeur
Constructeur de maisons neuves, agrandissements et piscines sur mesure, basé à Piolenc, dans le Vaucluse.
Le projet
Refonte intégrale du site vitrine d'une entreprise de construction générale (maisons neuves, agrandissements, piscines) basée à Piolenc, dans le Vaucluse, avec pour objectif un vrai contraste avant/après face à l'ancien site jugé peu performant par le client : identité visuelle travaillée, conversion renforcée (formulaire de contact sécurisé, prise de rendez-vous en ligne via Cal.com), SEO technique complet (métadonnées, données structurées, sitemap, Core Web Vitals optimisés) et une signature visuelle distinctive avec des éléments 3D sur mesure — une scène procédurale et un texte en particules interactif, tous deux conçus pour rester légers et accessibles (repli automatique sans WebGL, chargement différé du bundle 3D).
Stack technique
Structure du projet
Architecture Next.js (App Router), avec une séparation claire entre les pages, les composants, le contenu éditorial et les scripts d'import.
maison-des-artisans/
├── app/
│ ├── layout.tsx, page.tsx
│ ├── realisations/(page.tsx, [slug]/page.tsx)
│ ├── construction-maison/page.tsx
│ ├── agrandissement/page.tsx
│ ├── piscines/page.tsx
│ ├── entreprise/page.tsx
│ ├── actualites/(page.tsx, [slug]/page.tsx)
│ ├── rendez-vous/page.tsx
│ ├── contact/page.tsx
│ ├── mentions-legales/page.tsx, confidentialite/page.tsx
│ ├── sitemap.ts, robots.ts
│ └── api/contact/route.ts
├── components/
│ ├── layout/ (Header, Footer, CookieConsent)
│ ├── ui/ (Button, Card, Section...)
│ ├── three/ (HeroScene, HouseBuildScene, WebGLGate)
│ ├── sections/ (Hero, Services, Chiffres, Temoignages, Processus, CTA)
│ └── forms/ (ContactForm)
├── content/actualites/*.mdx
├── lib/ (seo.ts, structured-data.ts, utils.ts)
├── public/images/{hero,realisations/{construction,agrandissement,piscines}/[projet],equipe,og}
├── scripts/import-photos.mjs (télécharge + classe + recadre les photos depuis l'API média du site actuel — exécuté une fois en tout début de build)
└── inbox-photos/ (dossier optionnel pour d'éventuelles photos additionnelles fournies par le client)Envie d'un site comme celui-ci ?
Parlons de votre projet. Le premier échange est gratuit et sans engagement.