La façade de la magnanerie au coucher du soleil. Pierre du Luberon, volets sage, cyprès en arrière-plan.
    Hôtellerie de caractère

    La Magnanerie de Ménerbes

    Notre mission

    Concevoir une entrée lente, qui ne cherche pas à séduire au premier regard. Une façade qui se laisse découvrir, un titre lu à mi-voix, une seule promesse posée en bas de l'écran : réserver un séjour.

    Ensuite, raconter la maison en sept temps. La maison, les trois moments du jour, les six intentions, les cinq chambres, la table, le lieu, et l'histoire de 1758. Construire la table des matières d'un ouvrage, plutôt qu'une fiche produit.

    Trouver les moments inattendus. La page Histoire en est un : une timeline déclenchée au scroll, où l'image d'un cocon de soie reste fixe pendant que cinq dates défilent à droite. C'est là que l'on sent la maison vivre depuis trois siècles.

    Secteur
    Hôtellerie de caractère
    Année
    2026
    Outils utilisés
    Vite
    React 18
    TypeScript
    Tailwind CSS v4
    Framer Motion
    Vercel
    Livrables
    Sept pages éditoriales avec narration construite
    Design system complet : couleurs, typographies, illustrations au trait
    Trente-quatre visuels custom : vingt-huit photographies et six illustrations
    Formulaire de réservation avec préremplissage par paramètre d'URL
    Header dynamique avec détection de section au scroll
    Déploiement Vercel sur sous-domaine personnalisé

    La Magnanerie de Ménerbes est une maison d'hôtes restaurée dans le Luberon par Marie et Marc Bernard, anciens d'une étoile parisienne. Cinq chambres, une table d'hôte le mercredi soir, un jardin clos avec bassin miroir et oliveraie. L'enjeu était de traduire en expérience web éditoriale l'esprit d'une maison vivante : son patrimoine, sa lenteur, son savoir-faire.

    Le site se compose de sept pages construites comme une narration. On entre par la façade en or de fin de journée, on passe par les valeurs de la maison, puis on rencontre les chambres, la table, le lieu, et enfin l'histoire des fondateurs et de la magnanerie de 1758. Chaque transition est lente. Chaque image respire.

    Le défi typographique consistait à créer une signature visuelle reconnaissable au premier coup d'œil. La solution combine Fraunces serif en italique au milieu d'un mot, comme dans « LA Magnanerie DE MÉNERBES », à Geist Mono pour le corps de texte. L'italique posé au cœur d'un titre romain devient la marque éditoriale du projet.

    notre

    Identité visuelle

    le logo
    Logo M&M de La Magnanerie de Ménerbes

    Signature de la maison.

    la typographie
    Fraunces

    Pour les titres, les moments éditoriaux, et la signature mixte italique.

    Geist Mono

    Pour le corps de texte, les détails, les libellés techniques.

    LA Magnanerie DE MÉNERBES

    La signature visuelle du projet.

    la palette
    Cream#F4EFE6
    Bone#E8DFCC
    Terra#7A4A2B
    Terra deep#5A3520
    Stone#3A2F26
    Sage#8B9579
    Ink#1F1A14
    Hero d'accueil. Façade golden hour de la Magnanerie de Ménerbes avec wordmark en italique mixte.
    Hero d'entrée : façade golden hour et wordmark Fraunces en italique mixte.
    Section Philosophie. Six intentions de la maison illustrées au trait.
    Six intentions qui fondent l'esprit de la maison.
    Page chambre Romarin avec spécifications et images de la voûte d'origine.
    Une chambre, une voûte, un récit éditorial.
    Formulaire de demande de réservation.
    Formulaire éditorial, sans pression commerciale.
    Hero mobile responsive avec wordmark sur deux lignes.
    Le site reste éditorial sur mobile.
    Page Réserver en version mobile avec paysage de fin de journée.
    Page Réserver en mobile, paysage de fin de journée.

    MAGNAnerie

    Ménerbes, Luberon

    Un site éditorial pour une maison d'hôtes du Luberon. Sept pages, une signature typographique, une narration lente.