Brûlerie Lumen
Un commerce artisanal vendu et piloté en ligne
Site vitrine éditorial, boutique en ligne et administration complète pour un torréfacteur artisanal.
Un projet, 3 interfaces
À quoi ça ressemble
Brûlerie Lumen torréfie du café de spécialité à Nantes depuis 2016, avec huit origines sourcées en direct et des ateliers de dégustation chaque samedi.
Le site réunit une vitrine éditoriale, une boutique en ligne complète et une administration pour piloter ventes, stocks et référencement au quotidien.
Une identité visuelle unique
Couleurs
Typographie
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9 & @ # %
Titres qui portent le message
Sous-titres qui structurent
Un texte courant lisible sur tous les écrans, avec des interlignes généreux.
Construit avec des technologies qui durent
Les technos les plus utilisées au monde, qui font tourner Airbnb et Netflix.
Next.js
React
TypeScript
Tailwind CSS
Framer MotionLe projet écran par écran
Des enjeux concrets, des réponses concrètes
Des enjeux concrets, des réponses concrètes
Les choix qui comptent
Trois décisions de conception prises sur ce projet, et pourquoi.
Carte d'accès interactive
Carte d'accès interactive
L'accès à la brûlerie s'affiche sur une carte interactive (intégration react-leaflet sur fond OpenStreetMap), avec un marker et une popup qui reprennent le nom et l'adresse du lieu.
Les coordonnées et l'adresse viennent d'une source de données unique, la même qui alimente le bloc coordonnées et le reste du site. La carte se charge uniquement côté navigateur, sans alourdir le rendu initial de la page.
Tunnel de paiement en 3 étapes
Tunnel de paiement en 3 étapes
Le tunnel découpe la commande en 3 étapes courtes (coordonnées, livraison, paiement) avec un récapitulatif toujours visible où le code promo s'applique en un clic. Chaque étape est validée avant de passer à la suivante : format d'e-mail et code postal à 5 chiffres sont contrôlés, avec un message d'erreur sous le champ concerné.
Au paiement, une carte bancaire animée se remplit en direct et bascule sur son verso dès la saisie du CVC. Le bouton de paiement reste inactif tant que la carte est incomplète, ce qui évite les erreurs de saisie.
Éditeur SEO avec aperçu Google
Éditeur SEO avec aperçu Google
Chaque page du site se règle depuis un éditeur SEO : titre et méta-description affichent un compteur de caractères en temps réel (titre/60, méta/155) pour rester dans les limites de Google.
L'aperçu Google se met à jour à la frappe et la checklist SEO réagit aux longueurs saisies. Le client voit tout de suite si sa page est optimisée, sans outil externe.
Rapide, mesuré, prouvé
La vitesse n’est pas une promesse : elle se mesure.
Chargement immédiat
Le contenu essentiel s’affiche en une fraction de seconde : rendu côté serveur, HTML léger, JavaScript réduit au strict nécessaire.
Images optimisées
Formats modernes (WebP/AVIF), dimensions adaptées à l’écran et chargement différé hors de l’écran : aucun octet gaspillé.
Stabilité visuelle
Pas de saut de mise en page pendant le chargement : les tailles sont réservées à l’avance, l’interface reste calme sous les yeux.
Une sécurité qui ne dort jamais
Ce qui tourne en arrière-plan pour que votre projet reste debout, quoi qu’il arrive.
Sauvegardes quotidiennes sur serveur distant
Procédure de reprise testée mensuellement
Monitoring automatique toutes les 5 min du service, alerte auto si service down
Chiffrement SSL
Isolation des environnements de développement
5 étapes pour concrétiser votre projet
Cadrage
On tient un cabinet d’ostéopathie. L’idée : que nos patients réservent en ligne, sans appeler.
Reçu ! On vous prépare un prototype sous 3j
Vous décrivez votre projet
Un cahier des charges si vous en avez un, quelques paragraphes libres sinon.
Vous avez lu jusqu’ici ? Continuons ensemble.
Avant de signer, on vous offer sous 3j un prototype de votre projet.
Sans engagement
