UI18 Locale — Empire UI Kit (Next.js)

Scope: Travel & hospitality SaaS UI kit for short-stay hosts and multi-property operators. Covers the full operational surface: properties, channel sync, reservations, housekeeping, guest messaging, and revenue analytics.

What's Inside

• 23+ pages — landing (hero / stats / features / how-it-works / testimonials / pricing-preview / FAQ / CTA), /features, /integrations, /pricing, /about, /contact, /blog + 6 articles, auth (login / 2-step register / forgot-password), full 9-page operator dashboard (Overview, Properties, Reservations, Guests, Channels, Analytics, Housekeeping, Messages, Settings), legal (privacy, terms, cookie-policy, accessibility, dmca, do-not-sell, security)
• Hue 22° warm tangerine OKLCH palette with Bricolage Grotesque display font
• Travel-specific dashboard components — PropertyCard with occupancy ring, channel-coloured ReservationGantt with keyboard-extend, housekeeping status board with bulk reassign, unified channel inbox
• Mock dataset — 12 properties across 12 cities, 30 international guests, 40 reservations, 5 channels with sync state, 29 housekeeping units, 25 messages — drives every screen out of the box
• 3-tier OKLCH colour token architecture (Primitive → Semantic → Component) with dark/light mode
• Animation system — CSS entrance animations for LCP, Motion (Motion (motion/react)) for interactive UI, GSAP + Lenis for scroll
• Accessibility — skip link, focus-visible rings, ARIA labels, 44×44 touch targets, reduced-motion support, keyboard alternative for extending Gantt reservations (WCAG 2.2 SC 2.5.7 — buyer wires the mouse drag once a real reservation API is connected)
• Performance — dynamic imports for below-fold sections, mobile static mode, system font on mobile, noise grain overlay

Quick Start

# Bootstrap pnpm (the kit pins `packageManager` so Corepack picks the right version)
corepack enable

pnpm install
pnpm dev

See INSTALLATION.md for full setup instructions, including the manual npm i -g pnpm fallback if Corepack isn't available.

Customisation

See CUSTOMIZATION.md for the rebranding checklist and token architecture guide.

The fastest way to make Locale yours:

1. src/lib/site-config.ts — brand name, domain, contact emails, legal entity, regions
2. src/app/globals.css — swap the hue values in --p-accent-* (currently 22°) to your brand hue; everything else cascades
3. src/lib/tokens.ts — regenerate the matching hex literals in BRAND (used by Three.js / global-error / magic-bento where CSS vars can't reach)
4. src/lib/locale-mock-data.ts — replace the mock properties / guests / reservations / messages with your real data sources

Demo Content

WARNING: Every page marked with /* DEMO_CONTENT */ contains placeholder text. You must replace all demo content before publishing. See DEMO_CONTENT.md for a full inventory.

The mock dataset uses fictional property names (Casa Marisol, The Tangerine Loft, etc.), @example.invalid email addresses, and an obviously-fake licence key in licence.json. Channel partner badges (Airbnb, Booking.com, VRBO) are text-only — no trademarked logos are shipped.

Documentation

Tech Stack

• Next.js 16 (App Router, static export)
• React 19
• Tailwind CSS v4 + shadcn/ui primitives
• Motion (page transitions, interactive UI; Motion (motion/react) successor)
• GSAP 3.14+ + Lenis 1.x (scroll-pin walkthrough, smooth scroll)
• Recharts 3.x (analytics charts)
• Three.js (ambient WebGL glow background)
• TypeScript (strict mode)
• Lucide (icons)

Licence

Commercial licence — see LICENCE.md. One licence per production project.

Template Empire — Halbon Labs