Étude de cas
Volt & Fils
Un site vitrine pour un artisan électricien, conçu par Capo Studio pour démontrer une identité visuelle « sécurité industrielle » — astreinte urgence toujours visible, services détaillés et réalisations filtrables.
Volt & Fils, électricien de père en fils, à Nantes depuis 2009
Pour cette étude de cas, nous avons imaginé une petite entreprise familiale d'électricité générale à Nantes et sa métropole : installation, dépannage d'urgence, mise aux normes, rénovation, domotique et bornes de recharge — un artisan qui vivait jusqu'ici uniquement du bouche-à-oreille et d'une fiche PagesJaunes, sans jamais avoir eu de site à son image.
Le besoin n'était pas de construire un outil de planification d'interventions complet, mais de donner une vitrine crédible et rassurante à une activité où la confiance et la rapidité de contact priment sur tout le reste.
Rassurer sur l'urgence
Une panne électrique ne prévient jamais à la bonne heure : le numéro d'astreinte doit être visible sans chercher, dès le premier écran.
Prouver la conformité
Mise aux normes NF C 15-100, attestation Consuel : un client qui vend ou loue veut être rassuré sur la légalité de l'intervention avant de signer.
Sortir du bleu générique du secteur
La quasi-totalité des sites d'électriciens se ressemblent (bleu, casque de chantier, photo de stock) : une identité distincte devient un vrai signe de sérieux.
Montrer le travail réel
Une galerie d'interventions passées, classée par type de besoin, convainc mieux qu'une liste de prestations écrite.
Clarifier la zone d'intervention
Avant d'appeler, un client veut savoir s'il sera couvert — la zone géographique doit être affichée sans ambiguïté.
Être irréprochable en situation d'urgence
Une coupure de courant se recherche presque toujours depuis un téléphone, souvent dans la panique : l'accès au numéro doit être immédiat.
Ce que le projet devait accomplir
Six objectifs ont guidé les choix de design et de contenu, de l'écran d'accueil jusqu'au formulaire de devis.
Identité « sécurité industrielle »
Fond quasi noir, accent ambre sécurité, bandes de danger diagonales, coins nets — aucune rondeur ni effet de flou, à l'opposé des autres démonstrateurs du portfolio.
Astreinte toujours visible
Un bouton d'urgence flottant reste accessible sur toutes les pages, en plus du numéro d'astreinte affiché dès le premier écran.
Six services détaillés
Installation, dépannage, mise aux normes, rénovation, domotique et borne de recharge — chacun avec sa propre page de détail et ses prestations listées.
Réalisations filtrables
Huit interventions fictives réparties dans les six catégories de services, avec lieu, durée et filtre par type d'intervention.
Devis simulé, responsive de bout en bout
Formulaire de demande de devis fonctionnel côté client (sans envoi réel), testé au même niveau d'exigence sur mobile que sur desktop.
Animations respectueuses
Trait de circuit qui se dessine au scroll, flicker d'allumage une seule fois sur le titre — toutes désactivées automatiquement si prefers-reduced-motion est actif.
Accueil → services → réalisations → devis
Chaque capture ci-dessous provient directement de l'application en cours d'exécution, pas d'une maquette.
Première impression
« Toujours sous tension » — l'urgence en première ligne
Un slogan qui s'allume au chargement (effet flicker joué une seule fois), le numéro d'astreinte visible sans défiler, et une mise en avant immédiate du délai moyen d'intervention (30 minutes en zone urbaine) — pas de texte de présentation à lire avant de comprendre ce que fait l'entreprise.
Le visiteur identifie en un écran qu'il peut être dépanné vite, et comment joindre quelqu'un tout de suite.
Les services
Six prestations, chacune avec sa page de détail
Installation, dépannage & urgence, mise aux normes NF C 15-100, rénovation, domotique et borne de recharge (IRVE) : chaque service liste ses prestations concrètes plutôt qu'un paragraphe marketing vague.
Un client qui a un besoin précis (ex. mise aux normes avant vente) retrouve immédiatement le service qui le concerne.
Les réalisations
Huit interventions réelles... enfin, fictives, mais racontées comme telles
Chaque réalisation précise le quartier nantais, la durée d'intervention et une description concrète du chantier, filtrable par catégorie de service — de la borne de recharge en copropriété au dépannage d'un dimanche soir.
La preuve par l'exemple : un visiteur voit le type de chantier avant même d'appeler.
Le devis
Un formulaire simple, sans jamais perdre l'option d'urgence
La demande de devis reste accessible en permanence, mais le bouton d'urgence flottant ne disparaît jamais : pour une panne bloquante, le visiteur n'a pas à chercher un autre chemin de contact.
Deux intentions différentes (devis planifié vs urgence) cohabitent sans se gêner sur la même page.
Une urgence se cherche depuis un téléphone, pas un ordinateur
Le même soin est apporté à chaque écran : le bouton d'astreinte, les services et le formulaire de devis restent aussi clairs sur mobile que sur desktop.
Accueil
Services
Réalisations
Devis
Ce qui existe déjà sur le projet
Cette solution peut évoluer selon vos besoins
Voici des exemples d'évolutions courantes pour ce type de projet, non incluses dans la démonstration.
Un panneau de sécurité industrielle, pas une brochure d'artisan
Fond quasi noir, accent ambre et bandes de danger diagonales — une esthétique de signalétique de chantier plutôt que de site vitrine chaleureux, pour incarner une activité où la vigilance et la rapidité comptent plus que le charme.
Noir industriel
Fond principal sur tout le site
Panneau
Cartes et surfaces légèrement surélevées
Ambre sécurité
Accent principal — CTA, mot-clé, bandes de danger
Rouge alerte
Bouton d'urgence, éléments critiques
Une stack volontairement légère
Un artisan qui veut être joint vite n'a pas besoin d'un compte client ni d'une base de données pour convertir.
Next.js 16 & React 19
App Router, Turbopack, Server Components par défaut — composants client uniquement pour les animations et le formulaire de devis.
Tailwind CSS 4
Design tokens dédiés à l'identité « Voltage » : fond quasi noir, accent ambre, aucun arrondi (border-radius forcé à 0 sur tout le système).
Framer Motion
Flicker d'allumage sur le titre, trait de circuit qui se dessine au scroll, micro-interactions au survol — MotionConfig reducedMotion="user" pour respecter prefers-reduced-motion.
Formulaire de devis simulé
Composant client qui simule l'envoi (état de succès local) : aucune donnée n'est transmise ni conservée.
Aucun backend
Contenu entièrement statique, codé dans lib/data.ts : pas de Supabase, pas de base de données, pas de paiement en ligne.
Vous êtes artisan électricien (ou un autre métier du bâtiment) et voulez une vitrine à votre image ?
Capo Studio conçoit des sites vitrines sur mesure, pensés pour transformer une visite en appel.