Homepage & Landing Pages — House of Legends

Documented: 2026-05-11

Public Pages

Homepage Structure

Homepage
├── HeroBottom          # Full-bleed hero, CTA "Book Now"
├── JourneySection      # 3-step experience preview (Arrive → Dine → Experience)
├── UpcomingExperiencesSection  # Cards for each show/experience
├── ExperienceScheduleSection    # This week's schedule grid
├── PartnersSection     # Partner logos
├── ReviewsSection      # Guest testimonials carousel
├── ServicesSection     # What we offer
└── CTASection         # Final "Book Your Night" CTA

Booking Entry Point (Unified)

All "Book Now" buttons use ONE pattern:

const { open } = useBookingModal();
open(eventId);

No intermediate modals, no local isOpen state. The BookingModal is rendered once in the root layout via BookingModalByContext.

Key Components

UpcomingExperiencesSection

Displays experience cards with:

• Hero image
• Title + tagline
• Date/time info
• "Book Now" button → useBookingModal().open(eventId)

ExperienceScheduleSection

Weekly schedule grid:

• Grouped by day
• Shows time + availability
• Per-row "Book" button

CalendarModal (Display-Only)

Full calendar view for date navigation:

• Month navigation
• Gold dots on days with shows
• Selected day shows show listings
• Does NOT trigger booking — purely for date discovery

Inquiry Forms

All inquiry forms use the same pattern:

// Components
contact-form.tsx
artist-proposal-form.tsx
host-an-event-form.tsx
private-events-form.tsx
venue-rental-form.tsx
workshop-proposal-form.tsx
 
// Backend
domains/forms.ts     # Form submission handling
domains/inquiries.ts  # Admin inquiry management

Each form:

1. React Hook Form + Zod validation
2. Calls submitInquiry mutation
3. Stores in formSessions + creates inquirySessions for admin
4. Shows success state

Legal Pages

MDX-based pages under /legal/:

• Privacy Policy
• Terms of Service
• Refund Policy
• etc.

Design System

Premium UI (Public Pages)

Used for all landing pages:

• Dark background (--color-background: #0a0a0f)
• Gold accents (--color-gold: #c5a059)
• Aurora texture overlays
• Serif typography for headings
• Sans-serif for body

Animations

All animations via tailwindcss-animate:

• animate-fade-in
• animate-slide-in-from-bottom-*
• animate-zoom-in-*

No custom keyframes.