Dar Azur Hôtel & Spa

Dar Azur Hôtel & Spa is a five-star boutique property on the Boujaafar corniche in Sousse, Tunisia, presenting thirty-two rooms and suites, a spa, a private beach, a rooftop lounge and the Le Safran restaurant. The brief was a marketing site that reads like an editorial piece rather than a booking-engine landing page: the visitor should move through the house the way a guest would, chapter by chapter, before ever reaching a form.

The home page is built as a numbered scroll story. A full-bleed hero holds a Ken Burns photograph under a GSAP scrub parallax with a SplitText character reveal on the wordmark, then five chapters alternate with full-width parallax breathers. Chapter two pins the viewport and drives the room catalogue sideways as a horizontal track, with each photograph counter-sliding inside its own frame through a ScrollTrigger containerAnimation. Chapter five pins again and cross-fades a three-part day-in-the-life sequence against a synchronised timeline gutter. Lenis drives the whole page and is wired into the GSAP ticker so ScrollTrigger and the smooth-scroll loop share one frame.

The interaction layer is an in-house component kit written in the React-Bits idiom rather than pulled from a dependency: scroll-scrubbed clip-path mask reveals in three shapes, line-by-line split-text headings, a scroll-triggered count-up, a cursor-magnetic button wrapper, a pointer-tracked spotlight card and a fade-on-enter wrapper. Every one of them checks prefers-reduced-motion and returns early, and the two pinned chapters fall back to plain vertical stacks through gsap.matchMedia. The content itself is French-first and fully localised into English, Arabic, Russian and German through a client-side dictionary provider that stores the choice locally and flips the document direction for Arabic.