Projet Restaurant

Création d'une boutique en ligne pour un restaurant avec Bootstrap 5

Introduction

Tu vas créer un site web responsive pour un restaurant fictif nommé "Le Délice Gourmet". Ce site doit être conçu pour mettre en valeur les plats, l'équipe du restaurant et permettre aux clients de découvrir facilement le menu. Le projet sera entièrement réalisé avec Bootstrap 5 pour garantir un design moderne et responsive.

Le site contiendra 5 pages principales :

1. Page d'accueil
2. Page menu
3. Page détail / plat du jour
4. Page équipe
5. Page contact

1. Page d'accueil

La page d'accueil doit donner une première impression engageante et professionnelle. Elle doit inclure les sections suivantes dans cet ordre :

Hero Section avec slider

• Utilise un carousel Bootstrap pour afficher les meilleurs plats du restaurant.
• Le slider doit être en pleine largeur (100%) et comporter au moins 3 images (par exemple : plat 1, plat 2, plat 3).
• Ajoute une description courte et un bouton "Voir le menu" sur chaque slide.

Présentation du restaurant

• Une section avec un titre et un texte décrivant brièvement l'histoire et la philosophie du restaurant.
• Optionnel : Ajoute une image de l'intérieur du restaurant en fond ou à côté du texte.

Plats à la une (1-2-3-4-6 cards)

• Utilise une grille Bootstrap pour afficher des cards représentant les plats les plus populaires.
• Chaque card doit inclure :
  • Une image du plat
  • Le nom du plat
  • Un prix
  • Un bouton "Détails" ou "Commander".

Section "Lunch / Plat du jour"

• Une card en pleine largeur avec :
  • Une image du plat du jour.
  • Une description du plat.
  • Un bouton "En savoir plus" qui redirige vers la page détail.

Présentation du propriétaire

• Une section avec :
  • Un texte décrivant le propriétaire.
  • Une photo du propriétaire à droite du texte.

Présentation de la cheffe de cuisine

• Une section similaire à celle du propriétaire, mais avec :
  • Le texte à droite et la photo à gauche.

2. Page Menu

Structure générale

La page menu doit contenir une présentation organisée et lisible des plats et boissons proposés. Elle sera divisée en sections selon les catégories suivantes :

• Entrées
• Salades
• Viandes
• Pâtes
• Pizzas
• Desserts
• Softs
• Alcools
• Vins
• Boissons chaudes

Détails techniques

1. Accordéons Bootstrap :

   • Chaque catégorie doit être une section collapsible (accordéon).
   • Exemple :
     • Une section "Entrées" qui, lorsqu'on clique dessus, affiche une liste des entrées avec leur nom et prix.

2. Table responsive :

   • Utilise une table pour afficher les éléments d’une section.
   • Colonnes :
     • Nom du plat/boisson.
     • Description courte.
     • Prix.

3. Page "Détail / Plat du jour"

Structure générale

Cette page met en avant un plat spécifique (par exemple, le plat du jour). Elle doit inclure :

1. Image en pleine largeur du plat.
2. Nom du plat (en grand titre) et description détaillée.
3. Prix bien mis en avant.
4. Bouton "Commander maintenant" ou "Ajouter au panier" (fonctionnel ou non).
5. Optionnel : une liste d'ingrédients en bullet points.

4. Page Équipe

Structure générale

Cette page présente l'équipe du restaurant. Elle doit inclure :

1. Grid Bootstrap :

   • Utilise une grille pour afficher les membres de l'équipe.
   • Chaque membre doit être présenté sous forme de card avec :
     • Une photo.
     • Le nom du membre.
     • Son rôle (ex. : Chef cuisinier, Serveur...).
     • Une courte description (par exemple : expérience ou spécialité).

2. Ajoute un effet hover sur les cards pour les rendre interactives.

5. Page Contact

Structure générale

La page contact permet aux clients de trouver les informations nécessaires pour entrer en contact avec le restaurant.

1. Formulaire de contact :

   • Champs requis :
     • Nom.
     • Email.
     • Téléphone (optionnel).
     • Message.
   • Bouton "Envoyer".
   • Utilise les formulaires Bootstrap.

2. Informations de contact :

   • Ajoute une section avec une liste contenant :
     • Adresse complète.
     • Numéro de téléphone.
     • Email.

3. Carte Google Maps :

   • Intègre une carte interactive pour montrer l’emplacement du restaurant.

4. Horaires d'ouverture :

   • Utilise une table Bootstrap pour afficher les jours et horaires d’ouverture.

Fonctionnalités Bootstrap 5 à inclure

1. Navbar :

   • Une barre de navigation fixe en haut, avec les liens vers les 5 pages.
   • Inclure un logo à gauche.
   • Bouton "Menu burger" pour les petits écrans.

2. Footer :

   • Un footer commun à toutes les pages avec :
     • Liens vers les réseaux sociaux.
     • Informations de copyright.

3. Responsive Design :

   • Vérifie que chaque section s’adapte bien aux écrans mobiles, tablettes et ordinateurs.

4. Effets visuels :

   • Utilise des transitions CSS pour rendre les interactions (hover, clic) plus fluides.

Livrables

1. Code HTML/CSS complet.
2. Toutes les pages doivent être reliées entre elles via la navbar.
3. Assure-toi que le design est bien responsive.

Critères d'évaluation

1. Respect de la structure demandée.
2. Utilisation correcte des fonctionnalités Bootstrap 5.
3. Design responsive et esthétique.
4. Bonne organisation du code (indentation, commentaires).