Live-Demo: https://azura-hotel.netlify.app

Die meisten Resort-Websites sehen gleich aus: ein Heldenbild, ein Raster von Zimmerkarten, ein Buchungsformular obendrauf. AZURA macht das nicht. Es baut auf einer einzigen Idee auf — dem Aufenthalt eines Gastes als Reise durch Licht, vom ersten Licht bis zum letzten — sodass das Scrollen durch sie sich eher wie das Verfolgen eines Reisemediums anfühlt als das Durchstöbern einer Hotelseite. Die Startseite öffnet mit einer Vollbild-Ankunftssequenz, die sich langsam ins Fokus schält, bevor ein einzelnes Wort erscheint; und von dort aus ist jede Sektion choreografiert statt einfach nur angeordnet. Wenn Sie eine Seite für ein Resort, eine Villa, ein Boutique-Hotel oder eine Hospitality-Marke erstellen oder weiterverkaufen, die sich hochwertig statt generisch anfühlen soll, ist dies der Unterschied zwischen „einer weiteren Buchungsvorlage“ und etwas, auf das ein Kunde tatsächlich gespannt ist, es zu starten.

Das markante Stück ist die Sequenz „Time & Tide“: ein scroll-gebundener Abschnitt, der Besucher durch fünf Momente eines einzigen Tages im Resort trägt, wobei Bildsprache, Beleuchtung und Stimmung im Takt des Scrollens wechseln — aufgebaut mit GSAP/ScrollTrigger auf Desktop, während auf Mobilgeräten und für Besucher mit reduzierter Bewegungsbildung elegant auf ein sauberes gestapeltes Layout zurückgegriffen wird. Abgesehen von diesem Mittelpunkt liefert AZURA eine komplette Seite: einen redaktionellen Raum/Villa-Erkundungsbereich, in dem jedes Zimmer seine eigene immersive Detailseite erhält statt einer allgemeinen Listenzeile; einen kuratierten Experiences-Browser (Spa, Wasser, Kulinarik, Abenteuer, Kultur, Slow Living) sortiert nach Kategorie; einen Destinationsführer zu nahegelegenen Stränden, Tempeln, Terrassen und einer Hafenstadt mit Reisezeiten und einer leicht stilisierten Karte; ein Journal für redaktionelles Storytelling und Dispatches; und einen geführten, fünfschrittigen Reservierungsprozess (Daten → Zimmer → Gäste → Details → Bestätigung) mit echter clientseitiger Validierung und korrekten Erfolg-/Fehlerzuständen. Ein benutzerdefinierter Cursor und eine schwebende, kontextbewusste Navigation verleihen durchgehend Feinschliff.

Alles, was ein Käufer anpassen muss, bleibt einfach und dateibasiert — es gibt kein CMS, keine Datenbank und kein Backend zur Konfiguration. Seiteninhalte leben direkt in den Seiten-Dateien, während alle wiederkehrenden Inhalte (Zimmer, Erlebnisse, Reiseziele, Journal-Einträge und die Time & Tide-Stufen) in typisierten TypeScript-Datendateien unter data/ liegen, sodass das Hinzufügen oder Bearbeiten eines Eintrags nur das Bearbeiten eines Arrays bedeutet — TypeScript wird fehlende Elemente kennzeichnen. Die Fotografie ist in einer Datei als austauschbare Bildschlüssel zentralisiert, Markenfarben sind CSS- benutzerdefinierte Eigenschaften, die Sie einmal ändern, um die gesamte Seite neu zu gestalten, und Schriftarten, Navigation und Formulare sind jeweils auf ein paar eindeutig dokumentierte Dateien isoliert. Ein vollständiger Kundenleitfaden ist enthalten und deckt Installation, jeden Anpassungspunkt und Deployment ab.

Erstellt mit Next.js 16 (App Router) und TypeScript, gestylt mit Tailwind CSS v4 und animiert mit