Skip to content
Case StudyWeb Design

Orra: boutique hotel website

An ultra-modern homepage for boutique hotels and places to stay.

Orra: Hero

01

Overview

Orra is a homepage template for boutique hotels, villas and guesthouses. Warm sand and cream with a single terracotta accent, and a hero where the photograph is first seen only through the letters of the name.

From there it walks a guest through the rooms, a day at the hotel from 07:00 to 21:00, dining, the baths and how to arrive, with a booking bar that stays within reach. Rooms, rates, the day timeline and routes are all edited in one content file.

02

Features

  1. 01
    Masked wordmark heroThe photo shows through the letters of the name, and scrolling zooms in until the view opens.
  2. 02
    A day, hour by hourA pinned timeline where the sun travels an arc and the palette moves from dawn to night.
  3. 03
    Rooms carouselDraggable with inertia on desktop, native swipe on touch. Any card opens booking with that room selected.
  4. 04
    Booking barA two-month range calendar, guests and room choice. On phones it becomes a bottom sheet.
  5. 05
    Dining menuThe menu as a list: hover, focus or tap a dish to change the arched photograph.
  6. 06
    Journal galleryTwo rows of photographs drifting in opposite directions, with rotating guest and press quotes.

03

Perfect for

  1. 01
    Boutique hotels
  2. 02
    Villas
  3. 03
    Guesthouses
  4. 04
    Resorts

04

Built with

Next.js 15, React 19, GSAP 3, Lenis

Orra: Hero
Orra: A day: 13:00
Orra: A day: 21:00
Orra: Journal