Darat

A wall of photos that drifts apart

Under a quiet headline there's a wall of twelve photos in four columns. Each column is tied to the scroll with Framer Motion at its own speed and starting offset. If they moved together it would look like one picture sliding past. At different speeds the wall drifts apart and gets some depth. Lenis keeps it soft, and the photos are AVIF to keep all twelve light.

Arabic and English

Both languages are built ahead of time with next-intl. Arabic flips the whole layout to right to left, and the few designs that can't mirror themselves adapt to the language. Switching language plays the same page transition as any other link.

generateStaticParams builds every combination up front, 2 languages × 3 services, so every page is ready before anyone visits. I had to move Next.js back a version to get next-intl working with it.

A fanned carousel

The six objectives sit in a carousel that looks like a hand of cards. Every card's angle, size, fade and drop comes from one number, its distance to the active card, and Framer Motion animates between them. One formula was much easier to tune than a separate animation for every position.

To loop forever, the cards are rendered three times and the active one always stays in the middle copy, so you never hit an end. On phones it follows your swipe.

Values revealed on hover

Thirteen value cards form a puzzle around a central title. On hover the border turns purple, the illustration shrinks into the corner and the description slides into the space it leaves. Phones don't have hover, so there the text is always visible and the cards scroll sideways.

Service pages from one template

The three services share one route and one template filled from the translation files. A tab bar stays under the navigation so you can switch service while reading. Any fix to the template lands on all three at once.

Transitions in the brand's shape

Page changes play Darat's angular shape. It flies in from a corner, turns 45° and grows from a scale of 0.1 to 15 over 0.8 seconds until it covers the screen. The route only changes after 850 ms, once the screen is fully covered, so you never catch the old page being swapped out.

On the FAQ page, GSAP ScrollTrigger moves the question cards in three columns at different speeds, so they rise like a staircase. It's scrubbed with the scroll, so it only moves as fast as you do.

Designed again for phones

Several sections got their own phone layouts instead of shrunk desktop ones. Shrinking would have left the text tiny and the cards cramped. The menu opens its submenus with an animated height that always sits right under the header.