# Un site d'hôtel-boutique où les clients demandent leur séjour en direct

> Caravanserai Marrakech est le site de Caravan Serai, un hôtel-boutique et spa dans la Palmeraie de Marrakech. Je l'ai développé pour que les clients puissent demander un séjour directement sur le site de l'hôtel, et pour que chaque restaurant, soin, événement et activité ait sa propre page, capable de répondre à sa propre recherche Google.

Développé au sein de l'agence Trafic Genius, où j'étais développeur full stack (2024–2025).
En ligne sur https://www.caravanserai-marrakech.com/
Canonical: https://salaheddine-elfatimi.com/fr/projects/caravanserai-marrakech
Technologies: Next.js, Tailwind CSS, SEO, Vercel

## Le client

Caravan Serai est un hôtel-boutique et spa en bordure de la Palmeraie de Marrakech, inspiré des anciens caravansérails où les voyageurs faisaient étape en traversant le désert. En plus de ses suites, il a un restaurant marocain et un restaurant français, un hammam et un spa, et il accueille mariages, séminaires et événements privés, avec des activités comme le yoga, la randonnée, le vélo et le billard.

## Le besoin

Un hôtel comme celui-ci vend bien plus que des nuits. Un couple qui prépare son mariage ne tape pas le nom de l'hôtel sur Google : il cherche un lieu de mariage à Marrakech. Quelqu'un d'autre cherche un hammam, un troisième un restaurant français. Une seule page d'accueil ne peut pas répondre à ces trois recherches : chacune de ces offres avait besoin de sa propre page.

Il fallait aussi une façon simple de demander un séjour sur le site de l'hôtel : choisir les dates et une suite, laisser un téléphone et un email, puis laisser l'hôtel confirmer. Une demande faite là est une réservation directe, sans plateforme au milieu.

## Ce que j'ai développé

- **Un formulaire de demande de réservation**: Dates d'arrivée et de départ, la suite (chacune affichée avec son prix), le nombre d'adultes, le nom, le téléphone et l'email, et une case pour accepter les conditions de non-remboursement. Il a sa propre page et revient sur la plupart des autres : un client qui lit la page du hammam peut réserver sans en sortir.
- **Deux restaurants et la carte**: Le restaurant marocain et le restaurant français ont chacun leur page, et la carte complète a la sienne, plat par plat, avec les prix en dirhams.
- **Une page par soin du spa**: Hammam et massages, épilation, soins du corps, mains et pieds : chaque soin a sa page, avec les prestations et leurs prix.
- **Événements et activités**: Mariages, séminaires et événements privés ont chacun leur page, tout comme le yoga, la randonnée et le vélo, et le billard. Une recherche sur les mariages a ainsi une page sur les mariages qui lui correspond.
- **Contact et accès**: Un formulaire de contact, le téléphone et l'email, les heures d'arrivée et de départ, et une carte Google pour trouver l'hôtel.
- **Pensé pour Google**: Construit avec Next.js : le texte de chaque page est dans le HTML que Google lit. Chaque page a son titre, sa description et son lien canonique, toutes sont listées dans un sitemap, et le site est hébergé sur Vercel.

## Ce que ça leur permet

**Les clients demandent un séjour directement depuis le site, et chaque restaurant, soin et événement a sa propre page pour être trouvé sur Google.**

Aujourd'hui, un client trouve sur le site une page pour ce qu'il cherche précisément (un hammam, un lieu de mariage, un dîner français) et peut envoyer sa demande de réservation pendant la même visite. L'hôtel reçoit les dates, la suite, le nombre d'adultes, le téléphone et l'email du client, et confirme lui-même le séjour. Le sitemap compte 17 pages, et chaque restaurant, soin, événement et activité en fait partie.