🧹 Client : DNB Services, entreprise de débarras, nettoyage et petits travaux basée à Tarbes, intervenant dans un rayon de 50 km (particuliers, notaires, agences, syndics). Site en production sur dnbservices.fr.

Le brief : rassurer en 5 secondes

Le débarras et le nettoyage sont des métiers où la confiance se joue tout de suite : on laisse un inconnu entrer chez soi, parfois dans des situations sensibles (succession, logement très encombré). L'objectif n'était donc pas de faire "joli" pour faire joli, mais de construire un site qui prouve le sérieux de l'équipe en quelques secondes de scroll, avec une preuve visuelle avant/après plutôt que de longs discours.

Résultat : un one-page dense mais très lisible, propulsé en HTML/CSS/JS vanilla — aucun framework, une structure légère, et un formulaire de devis relié en production à une route PHP + PHPMailer qui journalise les demandes pour faciliter leur suivi.

Ce que voit le visiteur

🎬
Hero animé & polaroids
Titre "On vide. On nettoie. Vous respirez." qui s'anime ligne par ligne au chargement, deux photos façon polaroid en parallaxe léger, badge circulaire tournant ("DÉBARRAS • NETTOYAGE • PETITS TRAVAUX • TARBES 65"), et des informations de réassurance qui doivent rester exactes et validées par l’entreprise : zone, horaires et prestations proposées.
🧾
9 services en cartes "tilt"
Débarras maison, cave/grenier/garage, nettoyage intérieur, nettoyage haute pression, peinture, toiture, espaces verts, petits travaux, et un service dédié aux situations difficiles (syndrome de Diogène, sinistres) traité avec discrétion. Chaque carte réagit à la souris avec un léger effet 3D (tilt).
↔️
Slider avant / après interactif
Le module le plus important du site commercialement : un curseur qu'on fait glisser (souris, tactile ou clavier) pour révéler la même pièce avant et après intervention. Un petit "teasing" automatique anime le curseur à l'apparition pour inciter à interagir, avant de rendre la main à l'utilisateur.
❓
FAQ en accordéon & formulaire de devis
Zone d'intervention (Tarbes + 50 km), questions fréquentes en accordéon natif (un seul ouvert à la fois), et formulaire de contact final pour décrire le chantier à réaliser.

Les détails d'interaction — la partie invisible

Le site n'utilise aucune librairie d'animation externe. Toutes les micro-interactions sont écrites main dans main.js avec les API natives du navigateur :

🖱️
Curseur personnalisé & boutons magnétiques

Un curseur custom suit la souris avec un léger effet d'inertie (interpolation), et grossit au survol des liens. Les boutons d'appel à l'action se déplacent légèrement vers le curseur quand on s'en approche (effet "magnétique"), rendu uniquement sur les appareils avec souris (matchMedia('(hover:hover) and (pointer:fine)')).

📏
Titres auto-ajustés pour les différentes largeurs

Une fonction mesure la largeur réelle de chaque titre après chargement des polices et réduit la taille de police si un mot dépasse sa colonne — pour que "On vide. On nettoie. Vous respirez." reste lisible dans les largeurs testées.

🛟
Fallback SVG sur les images

Si une image ne charge pas, un SVG de secours généré à la volée (dégradé + logo) la remplace automatiquement — ce mécanisme fournit une image de secours lorsqu’un chargement échoue et que le script de remplacement fonctionne.

📊
Header intelligent & barre de progression

Le header se compacte au scroll et se masque quand on descend (pour laisser de la place au contenu), puis réapparaît en remontant. Une fine barre de progression en haut de l'écran indique où on en est dans la page.

Envoi des devis et suivi des demandes

Pour un artisan, une demande doit pouvoir être retrouvée et traitée. Le dispositif décrit ici utilise une route de production et un environnement distinct pour les essais :

  • PHP + PHPMailer — la route principale en production, avec journalisation des leads (leads.jsonl) et une petite interface d'administration pour les consulter.
  • Node.js + Express + Nodemailer — un backend utilisé séparément pour le développement et les essais ; il n’est pas présenté comme une seconde route simultanée en production.

La journalisation facilite le suivi des demandes, mais aucun mécanisme d’envoi ne garantit à lui seul une réception sans incident : les formulaires et la boîte de réception doivent aussi être surveillés.

Stack technique

HTML / CSS / JS vanilla

Aucun framework front. Dépendances front limitées et structure légère, adaptées à un site vitrine mono-page.

IntersectionObserver

Animations d'apparition au scroll (reveal), compteurs de statistiques animés et déclenchement du teasing du slider avant/après.

Pointer Events API

Slider avant/après pilotable à la souris, au doigt et au clavier (flèches gauche/droite), avec support ARIA pour l'accessibilité.

PHP + PHPMailer

Traitement du formulaire de devis en production, avec journalisation des leads et espace admin dédié.

Node.js + Express + Nodemailer

Backend alternatif pour l'envoi d'e-mails, utilisé en développement et comme solution de secours.

Images WebP + fallback SVG

Formats optimisés pour la performance, avec génération d'un visuel de secours si une image ne charge pas.

Ce que ce projet démontre concrètement

DNB Services n'est pas une démo : c'est un site en production, pour un vrai client, avec de vrais devis à traiter. Il montre qu'un artisan multiservices peut avoir une vitrine au niveau d'une grande enseigne — animations soignées, preuve visuelle avant/après, formulaire fiable — sans passer par une agence ni un budget à cinq chiffres.

🧹

Vous êtes artisan ou entreprise de services ?

Ce type de site — vitrine premium, preuve visuelle, formulaire de devis fiable — peut être adapté à votre métier. Discutons-en.