LANDING PAGE

VAYORA

January 14, 2026

A bespoke luxury travel curation platform built with React 18 and Framer Motion, featuring immersive micro-interactions and an elegant design system.

ProductPremium travel curation experience
UIResponsive luxury layout and motion system
StackReact, Vite, Radix UI, Tailwind

Overview

Vayora is an exclusive travel curation application focusing on luxury itineraries and high-end concierge services. Drawing inspiration from platforms like Airbnb Luxe and Black Tomato, the architecture leverages a modern React/Vite stack with highly optimized UI primitives (Radix UI) to deliver a seamless, premium web experience without compromising on performance.

Architecture

Tech Stack

React 18

TypeScript

Vite

Tailwind CSS

shadcn/ui (Radix)

Vercel

Interaction Libraries

Framer Motion

Embla Carousel

Vaul (Drawers)

Sonner (Toasts)

Vercel

Engineering Decisions

  • Component Primitives — Integrated Radix UI via shadcn/ui to ensure fully accessible, unstyled core components that were subsequently themed with the bespoke Vayora design system.

  • Fluid Animations — Implemented Framer Motion and tailwindcss-animate to orchestrate smooth entrance reveals ('Fade In Up'), continuous 'Ticker' scroll galleries, and hardware-accelerated drawer transitions.

  • Strict Typings — Enforced full strict-mode TypeScript across all React components and data interfaces to guarantee runtime safety during itinerary rendering.

Design System

Color Palette

  • #FAF6EF — Ivory Sand (Warm primary background)

  • #1E2A38 — Deep Slate (High contrast foreground)

  • #B8943F — Horizon Gold (Primary interactive accent)

  • #C6735A — Terracotta Blush (Warm highlights)

Typography

Libre BaskervilleAa Bb Cc — The quick brown foxElegant, commanding display headings (H1-H6)
JostAa Bb Cc — The quick brown foxClean and modern UI elements and navigation
LoraAa Bb Cc — The quick brown foxPremium, editorial body copy

Applied AI Engineering

This project serves as an exercise in rapid prototyping via strict LLM constraint prompting. To prevent AI component hallucination, a rigorous Master System Prompt was engineered to lock the model into specific DOM architectures, responsive breakpoints, and motion physics. You can view the raw AI Directive used for this build by clicking the Skills.md button at the top of this case study.