Cinematic website for a dinner-and-show rooftop in Marrakech
HABIBI Rooftop Experience is a new dinner-and-show rooftop in Marrakech with views of the Atlas. We designed and built its website so the show can be felt before guests arrive, with booking always one tap away.
Telling the story of a unique night before opening the doors
Habibi brings dinner, live music and performers together on one rooftop. The client needed a website that felt sophisticated rather than flashy, put the show first and turned visits into bookings.
- Stand out among Marrakech's big nightlife experiences.
- Speak to tourists, residents, hotels and concierges.
- Menus, events and an agenda the team can update.
The website had to be the first scene of the show.
The show first, booking always close
We built the site as a film sequence: entrance, concept, menu, events and gallery, with the call to book present on every screen.
- A booking path ready for SevenRooms.
- A dedicated channel for hotels and concierges.
- The brand's own identity: Rouge Terre, Orange Vibrant and Turquoise.
- Technical SEO from day one.
Every section pushes towards the same action: booking a table.
A custom website with scroll-driven video
We designed and built the whole site, with custom animation and a version designed for mobile.
- A hero video that advances with the scroll, with desktop and mobile versions.
- An entrance animation built on the logo mask.
- Menus, an events agenda with search and date filter, and an infinite gallery.
- “Sunset tonight”: the real sunset time, calculated on the spot.
- A floating mobile button to book, message on WhatsApp, call or get directions.
- A “Write to Habibi” contact postcard and a downloadable concierge kit in PDF.
- Restaurant and nightclub structured data, sitemap and per-page metadata.
We went from a prototype that loaded 366 images to a video that plays while it loads: the mobile home page dropped from 13 MB to 6.5 MB.
A website ready for opening night
The site is in its final review round with the client and will go live when the rooftop opens. In the meantime, habibi-marrakech.com shows the coming-soon page we also designed.
Services
- Web design and development
- Motion design
- Technical SEO
- Performance optimisation
Tech stack
VercelCloudflare
