Énergie · particuliers & TPE · Pages d’accueil
Volta
Le kWh, enfin transparent
Scroll pour découvrir ↓
01 · Énergie · particuliers & TPE
Comprendre sa facture en 30 secondes
Site énergie — offre, estimateur, FAQ, souscription.
- 01
Estimateur kWh
Glisse ta conso — le prix sort en live, sans jargon.
- 02
Offres comparées
Base, heures creuses, vert — le même geste, trois scénarios.
- 03
Économies visibles
Écart vs marché affiché, pas une promesse floue.
01b · Technique
Fiche technique
Stack, mise en ligne et mon rôle sur ce build — pour recruteurs et tech leads.
- Technologies
- Next.js
- TypeScript
- React
- Tailwind CSS
- Librairies & outils
- Estimateur client-side
- Déploiement
Démo locale /play — front Next.js, sans backend métier
- Rôle
Direction UI · intégration · interactions
- Conditions
Direction fictive (NDA) — même niveau de craft que missions réelles
02 · Dans le produit
Un scroll, un écran
Chaque section se cale à l’écran — continue après le dernier pour revenir au récit.
Énergie · particuliers & TPE
Comprendre sa facture en 30 secondes
Glisse ta conso — le prix sort en live, sans jargon.
02
Offres comparées
Base, heures creuses, vert — le même geste, trois scénarios.
03
Économies visibles
Écart vs marché affiché, pas une promesse floue.
Foyers & petits bureaux
Ils ont arrêté de subir la facture
“J’ai compris mon kWh en une minute — et changé d’offre le soir même.”
“Enfin un simulateur qui ne cache pas les options vertes.”
Sans engagement
Estime ta prochaine facture
Démo locale · aucun compte requis.
Estimer ma factureRetour au récit
Tu as quitté les écrans démo — ensuite : tester, puis les notes de craft.
03 · Foyers & petits bureaux
Ils ont arrêté de subir la facture
“J’ai compris mon kWh en une minute — et changé d’offre le soir même.”
“Enfin un simulateur qui ne cache pas les options vertes.”
04 · Sans engagement
Estime ta prochaine facture
Démo locale · aucun compte requis.
- →Hero + sections sous la fold (pas juste une accroche)
- →Hiérarchie visuelle et CTA principal
- →Densité d’info vs lisibilité
05 · Même famille
D’autres directions du même type — pour comparer densités et ambiances.
06 · Ce qu’on regarde
- 01Hero + sections sous la fold (pas juste une accroche)
- 02Hiérarchie visuelle et CTA principal
- 03Densité d’info vs lisibilité
- 04États interactifs (hover, sélection, feedback)