<aside> ✈️

VAYORA is a luxury-travel landing-page experiment built to practice story-driven composition, premium visual pacing, accessible component primitives, and motion that feels editorial rather than template-driven.

</aside>

1. Project overview

Vayora is a frontend practice project centered on a fictional luxury travel-curation experience. The goal was not to build a production travel-booking backend. The focus is the presentation layer: how typography, imagery, whitespace, interactive components, and motion can make a digital travel experience feel selective and premium.

Stack: React 18, TypeScript, Vite, Tailwind CSS, shadcn/ui/Radix, Framer Motion, Embla Carousel, Vaul, Sonner, Vercel.

2. Design objective

The interface is designed around four qualities:

• expansive — large imagery and generous spatial rhythm;
• calm — low UI noise and deliberate pacing;
• editorial — typography and composition lead before conventional app chrome;
• curated — fewer, stronger destinations rather than a dense catalog.

The visual reference point is closer to a luxury travel publication/concierge than a conventional booking dashboard.

3. Page narrative

flowchart TD
    NAV["Transparent navigation"] --> HERO["Full-viewport destination hero"]
    HERO --> CAROUSEL["Destination curation"]
    CAROUSEL --> EXPERIENCE["Asymmetrical experience grid"]
    EXPERIENCE --> DETAILS["Editorial supporting content"]
    DETAILS --> CONTACT["Contact / concierge atelier"]

The page is sequenced so the visitor first feels the brand, then explores destinations, then sees curated experiences, and finally reaches the contact/conversion area.

4. Hero composition

The hero uses full-viewport imagery with large serif-led typography. It establishes atmosphere before asking the visitor to process detailed information.

Key rules:

• preserve enough negative space for the text to breathe;
• use image cropping that keeps the subject readable across viewport sizes;