​
Homepage & Landing Pages — House of Legends

Documented: 2026-05-11 Doc Status: Excellent | ✓ All 6 checks passed

​
Overview

The homepage and landing pages section documents all public-facing pages including the homepage structure, booking entry points, inquiry forms, and design system. Each page has defined sections and components for rendering.

​
Public Pages

RoutePagePurpose
/HomepageHero, CTA, upcoming shows, about preview
/aboutAboutBrand story, team, venue
/artistsArtistsPerformer profiles
/scheduleScheduleCalendar view of all events
/wallPhoto WallGuest photo gallery
/reviewsReviewsGuest testimonials
/experiences/dinner-theaterDinner TheaterMain show experience
/experiences/french-mentalistFrench MentalistOne-time event (April 23, 2026)
/experiences/our-eveningOur EveningExperience detail
/inquiry/artist-proposalArtist ProposalForm for performers
/inquiry/contactContactGeneral inquiry form
/inquiry/host-an-eventHost an EventPrivate event request
/inquiry/private-eventsPrivate EventsPrivate booking form
/inquiry/venue-rentalVenue RentalVenue hire form
/inquiry/workshopsWorkshopsWorkshop proposal form

​
Homepage Structure

SectionPurpose
HeroBottomFull-bleed hero, CTA “Book Now”
JourneySection3-step experience preview (Arrive — Dine — Experience)
UpcomingExperiencesSectionCards for each show/experience
ExperienceScheduleSectionThis week’s schedule grid
PartnersSectionPartner logos
ReviewsSectionGuest testimonials carousel
ServicesSectionWhat we offer
CTASectionFinal “Book Your Night” CTA

​
Booking Entry Point

All “Book Now” buttons navigate to /booking which renders BookingSection — an inline page section with phase state machine: 
GRID — EXPERIENCE — ADDONS — CHECKOUT — CONFIRMATION
BookingSection owns the phase state machine. No route change during booking flow. The booking modal pattern (BookingModal, BookingModalContext) has been removed and replaced by the inline BookingSection component.

​
Key Components

​
UpcomingExperiencesSection

Displays experience cards with:
  • Hero image
  • Title + tagline
  • Date/time info
  • “Book Now” button — navigates to /booking

​
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:
ComponentPurpose
contact-form.tsxContact form
artist-proposal-form.tsxArtist proposal
host-an-event-form.tsxHost an event
private-events-form.tsxPrivate events
venue-rental-form.tsxVenue rental
workshop-proposal-form.tsxWorkshop proposal
Each form:
  1. React Hook Form + Zod validation
  2. Calls submitInquiry mutation
  3. Stores in formSessions + creates inquirySessions for admin
  4. Shows success state
MDX-based pages under /legal/:
  • Privacy Policy
  • Terms of Service
  • Refund Policy

​
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-*