Café Léon - Création du site vitrine d'un restaurant

#Web Dév.

Personnel

Une personne en train de servir un café crème.
Une personne en train de servir un café crème.

Client

Projet Fictif

Date & durée

Date & durée

2024

3 jours

Dans le cadre de ma certification Framer auprès de Flux Academy, j’ai appris à transformer un modèle existant en un site web personnalisé pour un restaurant fictif, Café Léon. L’objectif était d’adapter le design et les fonctionnalités à l’identité du restaurant tout en explorant les capacités de Framer.

Le site intègre plusieurs effets dynamiques et animations, dont :

Hero section sticky : le texte Café Léon reste visible pendant le scroll.
Ticker animé : affichage d’un message défilant.
Menu interactif : effet sticky sur le titre et l’image, apparition progressive des plats.
Avis clients : animations avancées à l’apparition.
Navigation fluide : transformation de la barre de navigation au scroll.
Pied-de-page dynamique : champ d’inscription à la newsletter et interactions au survol.
Pages additionnelles : réservation, événements privés avec effet d’image au scroll.
CMS intégré : gestion dynamique des plats du menu.

Ce projet m’a permis de maîtriser les principes d’animation et d’interaction avancés sur Framer, tout en créant une expérience utilisateur fluide et engageante.

🔗 Curieux de voir le résultat ? Retrouvez le site en cliquant sur le bouton ci-dessous ! 👇

Capture d'écran de la section Hero de la page d'accueil du site Café Léon.
Capture d'écran de la section Hero de la page d'accueil du site Café Léon.
Capture d'écran de la section Hero de la page d'accueil du site Café Léon.

Capture d'écran de la section Hero de la page d'accueil du site Café Léon.

Capture d'écran représentant la section "Menu" du site Café Léon.
Capture d'écran représentant la section "Menu" du site Café Léon.
Capture d'écran représentant la section "Menu" du site Café Léon.

Capture d'écran représentant la section "Menu" du site Café Léon.

Capture d'écran représentant la section "Avis" du site Café Léon.
Capture d'écran représentant la section "Avis" du site Café Léon.
Capture d'écran représentant la section "Avis" du site Café Léon.

Capture d'écran représentant la section "Avis" du site Café Léon.

Capture d'écran représentant la page de réservation du site Café Léon.
Capture d'écran représentant la page de réservation du site Café Léon.
Capture d'écran représentant la page de réservation du site Café Léon.

Capture d'écran représentant la page de réservation du site Café Léon.

Capture d'écran représentant la page de réservation des événéments privés du site Café Léon.
Capture d'écran représentant la page de réservation des événéments privés du site Café Léon.
Capture d'écran représentant la page de réservation des événéments privés du site Café Léon.

Capture d'écran représentant la page de réservation des événéments privés du site Café Léon.

  • Guillaume Normand - Studio

  • Guillaume Normand - Studio

  • Guillaume Normand - Studio