5CRSE5CRSEDocumentation
← Back to site

#5CRSE UX/UI Design Specification

#Executive Summary

This document provides a comprehensive UX/UI design specification for the 5CRSE luxury event booking platform, including detailed wireframes, user journey mappings, and interaction patterns. The design emphasizes premium aesthetics, intuitive navigation, and seamless multi-modal experiences including voice interactions via Hume AI.

#Design Philosophy

#Core Principles

  1. Luxury-First Aesthetic: Sophisticated, premium visual design
  2. Emotional Intelligence: AI-powered empathic responses via Hume AI
  3. Seamless Multi-Modal: Voice, touch, and visual interactions
  4. Progressive Disclosure: Information revealed contextually
  5. Accessibility: WCAG 2.1 AA compliance across all interfaces

#User Roles & Personas

#1. Customer

  • Primary Goal: Discover and book premium events with luxury transportation
  • Pain Points: Complex booking processes, lack of personalized recommendations
  • Key Interactions: Browse events, book packages, manage reservations

#2. Agent

  • Primary Goal: Assist customers and manage their assigned events/bookings
  • Pain Points: Fragmented customer information, manual scheduling
  • Key Interactions: View assignments, update availability, communicate with customers

#3. Ambassador

  • Primary Goal: Earn commissions through referrals and event promotion
  • Pain Points: Tracking earnings, understanding commission structure
  • Key Interactions: View dashboard, track earnings, generate referral links

#4. Admin

  • Primary Goal: Oversee platform operations and manage users/content
  • Pain Points: Multiple systems, complex permission management
  • Key Interactions: User management, analytics, system configuration

#Information Architecture

#Primary Navigation Structure

Home
├── Events
│   ├── Concerts
│   ├── Sports
│   ├── Theater
│   └── Custom Events
├── Dining
│   ├── Restaurants
│   ├── Reservations
│   └── OpenTable Integration
├── Transportation
│   ├── Vehicles
│   ├── Chauffeurs
│   └── Packages
├── Account
│   ├── Profile
│   ├── Bookings
│   ├── Payment Methods
│   └── Preferences
└── AI Assistant
    ├── Voice Chat
    ├── Event Discovery
    └── Booking Assistance

#Design System & Tokens

#Color Palette

:root {
  /* Primary Colors */
  --primary-gold: #D4AF37;
  --primary-black: #000000;
  --primary-white: #FFFFFF;
  
  /* Secondary Colors */
  --secondary-charcoal: #2C2C2C;
  --secondary-silver: #C0C0C0;
  --secondary-cream: #F8F6F0;

  /* Neutral Colors */
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
}

#Typography

:root {
  /* Font Families */
  --font-primary: 'Inter', sans-serif;
  --font-luxury: 'Playfair Display', serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
}

#Spacing & Layout

:root {
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  
  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

#Wireframes & User Stories

#1. Landing Page (US-001: Event Discovery)

User Story: As a customer, I want to discover premium events so that I can find experiences that match my preferences.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5CRSE - Luxury Event Discovery</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: var(--font-primary);
            color: var(--primary-black);
            background: var(--primary-white);
        }
        
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                        url('/luxury-event-bg.jpg') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--primary-white);
        }
        
        .hero-content h1 {
            font-family: var(--font-luxury);
            font-size: var(--text-5xl);
            margin-bottom: var(--space-6);
            font-weight: 400;
        }
        
        .hero-content p {
            font-size: var(--text-xl);
            margin-bottom: var(--space-8);
            max-width: 600px;
        }
        
        .ai-assistant-trigger {
            position: fixed;
            bottom: var(--space-8);
            right: var(--space-8);
            width: 64px;
            height: 64px;
            background: var(--primary-gold);
            border-radius: var(--radius-full);
            border: none;
            cursor: pointer;
            box-shadow: var(--shadow-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .search-bar {
            background: var(--primary-white);
            padding: var(--space-6);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            display: flex;
            gap: var(--space-4);
            max-width: 800px;
            margin: 0 auto;
        }
        
        .search-input {
            flex: 1;
            padding: var(--space-4);
            border: 1px solid var(--neutral-200);
            border-radius: var(--radius-md);
            font-size: var(--text-base);
        }
        
        .cta-button {
            background: var(--primary-gold);
            color: var(--primary-black);
            padding: var(--space-4) var(--space-8);
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .cta-button:hover {
            background: #B8941F;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-8);
            padding: var(--space-24) var(--space-8);
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .feature-card {
            text-align: center;
            padding: var(--space-8);
            border-radius: var(--radius-lg);
            background: var(--neutral-50);
        }
        
        .feature-icon {
            width: 64px;
            height: 64px;
            background: var(--primary-gold);
            border-radius: var(--radius-full);
            margin: 0 auto var(--space-6);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav style="position: fixed; top: 0; width: 100%; background: rgba(0,0,0,0.9); padding: 1rem 2rem; z-index: 100;">
        <div style="display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto;">
            <div style="color: var(--primary-gold); font-family: var(--font-luxury); font-size: var(--text-2xl); font-weight: 600;">
                5CRSE
            </div>
            <div style="display: flex; gap: 2rem; color: white;">
                <a href="/events" style="color: inherit; text-decoration: none;">Events</a>
                <a href="/dining" style="color: inherit; text-decoration: none;">Dining</a>
                <a href="/transportation" style="color: inherit; text-decoration: none;">Transportation</a>
            </div>
            <div style="display: flex; gap: 1rem;">
                <button style="background: transparent; border: 1px solid white; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem;">
                    Sign In
                </button>
                <button class="cta-button">Get Started</button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1>Luxury Events, Elevated Experiences</h1>
            <p>Discover premium events with seamless transportation and dining experiences, powered by AI</p>
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="What event are you looking for?">
                <select class="search-input" style="flex: 0 0 150px;">
                    <option>All Cities</option>
                    <option>New York</option>
                    <option>Los Angeles</option>
                    <option>Miami</option>
                </select>
                <button class="cta-button">Search Events</button>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">🎭</div>
            <h3 style="margin-bottom: 1rem; font-family: var(--font-luxury);">Premium Events</h3>
            <p>Curated selection of luxury concerts, theater, and exclusive experiences</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon">🚗</div>
            <h3 style="margin-bottom: 1rem; font-family: var(--font-luxury);">Luxury Transportation</h3>
            <p>Professional chauffeurs and premium vehicles for seamless travel</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon">🍽️</div>
            <h3 style="margin-bottom: 1rem; font-family: var(--font-luxury);">Fine Dining</h3>
            <p>OpenTable integration for world-class restaurant reservations</p>
        </div>
        <div class="feature-card">
            <div class="feature-icon">🤖</div>
            <h3 style="margin-bottom: 1rem; font-family: var(--font-luxury);">AI Assistant</h3>
            <p>Voice-powered concierge with emotional intelligence via Hume AI</p>
        </div>
    </section>

    <!-- AI Assistant Floating Button -->
    <button class="ai-assistant-trigger" onclick="toggleAIAssistant()">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2a3 3 0 0 0-3 3c0 1.5-1.5 3-3 3s-3-1.5-3-3a3 3 0 0 0-6 0c0 2 2 4 4 4v1a11 11 0 0 0 22 0v-1c2 0 4-2 4-4a3 3 0 0 0-6 0c0 1.5-1.5 3-3 3s-3-1.5-3-3a3 3 0 0 0-3-3z"/>
        </svg>
    </button>

    <script>
        function toggleAIAssistant() {
            // This would trigger the Hume AI voice interface
            console.log('Starting AI Assistant conversation...');
            // Implementation would connect to Hume AI service
        }
    </script>
</body>
</html>

#2. Event Discovery & Search (US-002: Event Filtering)

User Story: As a customer, I want to filter events by type, date, and location so that I can find events that match my criteria.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Discovery - 5CRSE</title>
    <style>
        .events-page {
            max-width: 1400px;
            margin: 0 auto;
            padding: var(--space-8);
        }
        
        .page-header {
            text-align: center;
            margin-bottom: var(--space-12);
        }
        
        .page-header h1 {
            font-family: var(--font-luxury);
            font-size: var(--text-4xl);
            margin-bottom: var(--space-4);
        }
        
        .filters-section {
            background: var(--neutral-50);
            padding: var(--space-6);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-8);
        }
        
        .filters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-4);
            margin-bottom: var(--space-6);
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        
        .filter-label {
            font-weight: 600;
            color: var(--neutral-700);
        }
        
        .filter-input {
            padding: var(--space-3);
            border: 1px solid var(--neutral-200);
            border-radius: var(--radius-md);
            background: var(--primary-white);
        }
        
        .events-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: var(--space-6);
        }
        
        .event-card {
            background: var(--primary-white);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            transition: all 0.3s ease;
        }
        
        .event-card:hover {
            box-shadow: var(--shadow-xl);
            transform: translateY(-4px);
        }
        
        .event-image {
            width: 100%;
            height: 200px;
            background: var(--neutral-200);
            position: relative;
        }
        
        .event-content {
            padding: var(--space-6);
        }
        
        .event-title {
            font-family: var(--font-luxury);
            font-size: var(--text-xl);
            margin-bottom: var(--space-2);
        }
        
        .event-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--space-4);
            color: var(--neutral-600);
        }
        
        .event-price {
            font-weight: 600;
            color: var(--primary-gold);
            font-size: var(--text-lg);
        }
        
        .voice-search-button {
            background: var(--accent-blue);
            color: var(--primary-white);
            border: none;
            padding: var(--space-3) var(--space-6);
            border-radius: var(--radius-md);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
    </style>
</head>
<body>
    <div class="events-page">
        <!-- Page Header -->
        <div class="page-header">
            <h1>Discover Premium Events</h1>
            <p style="color: var(--neutral-600); font-size: var(--text-lg);">
                Find exclusive experiences tailored to your preferences
            </p>
        </div>

        <!-- Filters Section -->
        <div class="filters-section">
            <div class="filters-grid">
                <div class="filter-group">
                    <label class="filter-label">Event Type</label>
                    <select class="filter-input">
                        <option>All Events</option>
                        <option>Concerts</option>
                        <option>Theater</option>
                        <option>Sports</option>
                        <option>Custom Events</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">Date Range</label>
                    <input type="date" class="filter-input">
                </div>
                <div class="filter-group">
                    <label class="filter-label">Location</label>
                    <select class="filter-input">
                        <option>All Cities</option>
                        <option>New York</option>
                        <option>Los Angeles</option>
                        <option>Miami</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">Price Range</label>
                    <select class="filter-input">
                        <option>Any Price</option>
                        <option>$100 - $500</option>
                        <option>$500 - $1000</option>
                        <option>$1000+</option>
                    </select>
                </div>
            </div>
            
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <button class="voice-search-button">
                    🎤 Ask AI Assistant
                </button>
                <button class="cta-button">Apply Filters</button>
            </div>
        </div>

        <!-- Events Grid -->
        <div class="events-grid">
            <!-- Event Card 1 -->
            <div class="event-card">
                <div class="event-image" style="background: linear-gradient(45deg, #FF6B6B, #4ECDC4);">
                    <div style="position: absolute; top: 1rem; left: 1rem; background: var(--primary-gold); color: var(--primary-black); padding: 0.5rem; border-radius: 0.25rem; font-weight: 600;">
                        VIP Available
                    </div>
                </div>
                <div class="event-content">
                    <h3 class="event-title">Symphony Under the Stars</h3>
                    <div class="event-meta">
                        <span>📅 Dec 15, 2024</span>
                        <span>📍 Lincoln Center</span>
                    </div>
                    <p style="margin-bottom: 1rem; color: var(--neutral-600);">
                        An enchanting evening of classical music in one of NYC's most prestigious venues.
                    </p>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span class="event-price">From $250</span>
                        <button class="cta-button">View Details</button>
                    </div>
                </div>
            </div>

            <!-- Event Card 2 -->
            <div class="event-card">
                <div class="event-image" style="background: linear-gradient(45deg, #667eea, #764ba2);">
                    <div style="position: absolute; top: 1rem; left: 1rem; background: var(--accent-red); color: var(--primary-white); padding: 0.5rem; border-radius: 0.25rem; font-weight: 600;">
                        Limited Seats
                    </div>
                </div>
                <div class="event-content">
                    <h3 class="event-title">Broadway Premiere Night</h3>
                    <div class="event-meta">
                        <span>📅 Dec 20, 2024</span>
                        <span>📍 Broadway Theater</span>
                    </div>
                    <p style="margin-bottom: 1rem; color: var(--neutral-600);">
                        Be among the first to experience this highly anticipated musical production.
                    </p>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span class="event-price">From $180</span>
                        <button class="cta-button">View Details</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

#3. AI Assistant Interface (US-003: Voice Interaction)

User Story: As a customer, I want to interact with an AI assistant using voice commands so that I can get personalized event recommendations and booking assistance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Assistant - 5CRSE</title>
    <style>
        .ai-assistant-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        
        .ai-assistant-modal {
            background: var(--primary-white);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: var(--shadow-xl);
        }
        
        .ai-header {
            background: linear-gradient(135deg, var(--primary-gold), #B8941F);
            padding: var(--space-6);
            text-align: center;
            color: var(--primary-black);
        }
        
        .ai-avatar {
            width: 80px;
            height: 80px;
            background: var(--primary-white);
            border-radius: var(--radius-full);
            margin: 0 auto var(--space-4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-2xl);
        }
        
        .chat-container {
            height: 400px;
            overflow-y: auto;
            padding: var(--space-6);
            background: var(--neutral-50);
        }
        
        .message {
            margin-bottom: var(--space-4);
            display: flex;
            gap: var(--space-3);
        }
        
        .message.user {
            flex-direction: row-reverse;
        }
        
        .message-content {
            background: var(--primary-white);
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            max-width: 80%;
            box-shadow: var(--shadow-sm);
        }
        
        .message.user .message-content {
            background: var(--primary-gold);
            color: var(--primary-black);
        }
        
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            background: var(--neutral-200);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-sm);
        }
        
        .voice-controls {
            padding: var(--space-6);
            background: var(--primary-white);
            border-top: 1px solid var(--neutral-200);
        }
        
        .voice-button {
            width: 80px;
            height: 80px;
            border-radius: var(--radius-full);
            border: none;
            background: var(--accent-red);
            color: var(--primary-white);
            margin: 0 auto var(--space-4);
            display: block;
            cursor: pointer;
            font-size: var(--text-2xl);
            transition: all 0.3s ease;
        }
        
        .voice-button:hover {
            background: #B91C1C;
            transform: scale(1.05);
        }
        
        .voice-button.listening {
            background: var(--accent-green);
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .voice-status {
            text-align: center;
            color: var(--neutral-600);
            font-size: var(--text-sm);
        }
        
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-3);
            margin-top: var(--space-4);
        }
        
        .quick-action {
            background: var(--neutral-100);
            border: none;
            padding: var(--space-3);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: var(--text-sm);
            transition: all 0.3s ease;
        }
        
        .quick-action:hover {
            background: var(--neutral-200);
        }
        
        .emotional-indicator {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-top: var(--space-2);
            font-size: var(--text-xs);
            color: var(--neutral-500);
        }
        
        .emotion-badge {
            background: var(--accent-blue);
            color: var(--primary-white);
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-full);
            font-size: 0.625rem;
        }
    </style>
</head>
<body>
    <div class="ai-assistant-overlay">
        <div class="ai-assistant-modal">
            <!-- AI Assistant Header -->
            <div class="ai-header">
                <div class="ai-avatar">🤖</div>
                <h2 style="margin: 0; font-family: var(--font-luxury);">Your Personal Concierge</h2>
                <p style="margin: 0.5rem 0 0; opacity: 0.8;">Powered by Hume AI - Understanding your emotions</p>
            </div>

            <!-- Chat Container -->
            <div class="chat-container">
                <div class="message">
                    <div class="message-avatar">🤖</div>
                    <div class="message-content">
                        <p>Hello! I'm your personal event concierge. I can help you discover amazing events, make reservations, and book luxury transportation. How can I assist you today?</p>
                        <div class="emotional-indicator">
                            <span>Detected emotion:</span>
                            <span class="emotion-badge">Welcoming</span>
                        </div>
                    </div>
                </div>

                <div class="message user">
                    <div class="message-avatar">👤</div>
                    <div class="message-content">
                        <p>I'm looking for a romantic dinner and show package for this Saturday.</p>
                        <div class="emotional-indicator">
                            <span>Detected emotion:</span>
                            <span class="emotion-badge">Hopeful</span>
                        </div>
                    </div>
                </div>

                <div class="message">
                    <div class="message-avatar">🤖</div>
                    <div class="message-content">
                        <p>That sounds wonderful! I can sense you're excited about planning something special. I've found some perfect romantic packages for Saturday:</p>
                        <ul style="margin: 0.5rem 0; padding-left: 1rem;">
                            <li>Dinner at Le Bernardin + Broadway Show ($450/person)</li>
                            <li>Sunset dinner cruise + Jazz club ($320/person)</li>
                            <li>Private chef dinner + Symphony ($580/person)</li>
                        </ul>
                        <p>Would you like me to tell you more about any of these options?</p>
                        <div class="emotional-indicator">
                            <span>Detected emotion:</span>
                            <span class="emotion-badge">Enthusiastic</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Voice Controls -->
            <div class="voice-controls">
                <button class="voice-button" id="voiceButton" onclick="toggleVoice()">
                    🎤
                </button>
                <div class="voice-status" id="voiceStatus">
                    Click to speak or ask a question
                </div>

                <!-- Quick Actions -->
                <div class="quick-actions">
                    <button class="quick-action" onclick="quickAction('events')">
                        🎭 Browse Events
                    </button>
                    <button class="quick-action" onclick="quickAction('dining')">
                        🍽️ Find Restaurants
                    </button>
                    <button class="quick-action" onclick="quickAction('transportation')">
                        🚗 Book Transportation
                    </button>
                    <button class="quick-action" onclick="quickAction('account')">
                        👤 My Account
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let isListening = false;
        let mediaRecorder;
        let audioChunks = [];

        function toggleVoice() {
            const button = document.getElementById('voiceButton');
            const status = document.getElementById('voiceStatus');
            
            if (!isListening) {
                startListening();
                button.classList.add('listening');
                button.innerHTML = '🛑';
                status.textContent = 'Listening... Speak now';
                isListening = true;
            } else {
                stopListening();
                button.classList.remove('listening');
                button.innerHTML = '🎤';
                status.textContent = 'Processing your request...';
                isListening = false;
            }
        }

        async function startListening() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                audioChunks = [];

                mediaRecorder.ondataavailable = (event) => {
                    audioChunks.push(event.data);
                };

                mediaRecorder.onstop = () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                    sendToHumeAI(audioBlob);
                };

                mediaRecorder.start();
            } catch (error) {
                console.error('Error accessing microphone:', error);
                alert('Please allow microphone access to use voice features.');
            }
        }

        function stopListening() {
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
                mediaRecorder.stream.getTracks().forEach(track => track.stop());
            }
        }

        async function sendToHumeAI(audioBlob) {
            // This would integrate with the Hume AI service
            const formData = new FormData();
            formData.append('audio', audioBlob);
            formData.append('agentType', 'customer_service');

            try {
                const response = await fetch('/api/ai/interact', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                displayAIResponse(result);
                
                // Play audio response if available
                if (result.response.audio) {
                    playAudioResponse(result.response.audio);
                }
                
            } catch (error) {
                console.error('Error communicating with AI:', error);
                document.getElementById('voiceStatus').textContent = 'Sorry, there was an error. Please try again.';
            }
        }

        function displayAIResponse(result) {
            const chatContainer = document.querySelector('.chat-container');
            const messageHtml = `
                <div class="message">
                    <div class="message-avatar">🤖</div>
                    <div class="message-content">
                        <p>${result.response.text}</p>
                        <div class="emotional-indicator">
                            <span>Detected emotion:</span>
                            <span class="emotion-badge">${result.response.metadata.emotion || 'Helpful'}</span>
                        </div>
                    </div>
                </div>
            `;
            chatContainer.insertAdjacentHTML('beforeend', messageHtml);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            
            document.getElementById('voiceStatus').textContent = 'Click to speak or ask a question';
        }

        function playAudioResponse(audioData) {
            const audio = new Audio();
            audio.src = `data:audio/wav;base64,${audioData}`;
            audio.play().catch(error => {
                console.error('Error playing audio response:', error);
            });
        }

        function quickAction(action) {
            const actions = {
                'events': 'Show me upcoming events',
                'dining': 'Find restaurants for tonight',
                'transportation': 'Book a luxury car',
                'account': 'Show my reservations'
            };
            
            // Simulate quick action
            sendTextToAI(actions[action]);
        }

        async function sendTextToAI(text) {
            try {
                const response = await fetch('/api/ai/interact', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        message: text,
                        agentType: 'customer_service'
                    })
                });

                const result = await response.json();
                displayAIResponse(result);
                
            } catch (error) {
                console.error('Error communicating with AI:', error);
            }
        }
    </script>
</body>
</html>

#User Journey Mapping

#Customer Journey: Event Booking with AI Assistance

  1. Awareness Stage

    • Landing page discovery
    • AI assistant introduction
    • Feature exploration

  2. Consideration Stage

    • Event search and filtering
    • AI-powered recommendations
    • Comparison of packages

  3. Decision Stage

    • Package customization
    • Transportation selection
    • Dining reservations

  4. Purchase Stage

    • Secure payment processing
    • Confirmation and receipts
    • Calendar integration

  5. Experience Stage

    • Pre-event communications
    • Real-time updates
    • Post-event feedback

#Agent Journey: Customer Management

  1. Assignment Notification

    • Real-time assignment alerts
    • Customer profile access
    • Event details review

  2. Customer Interaction

    • Communication tools
    • Status updates
    • Issue resolution

  3. Service Delivery

    • Coordination with vendors
    • Real-time monitoring
    • Quality assurance

  4. Post-Service

    • Feedback collection
    • Performance metrics
    • Commission tracking

#Ambassador Journey: Referral Management

  1. Dashboard Access

    • Earnings overview
    • Performance metrics
    • Active campaigns

  2. Referral Generation

    • Link creation
    • Social sharing tools
    • Campaign management

  3. Tracking & Analytics

    • Conversion monitoring
    • Commission calculations
    • Payment processing

#Accessibility & Compliance

#WCAG 2.1 AA Compliance

  • Color contrast ratios ≥ 4.5:1
  • Keyboard navigation support
  • Screen reader compatibility
  • Focus management
  • Alternative text for images

#Voice Interface Accessibility

  • Speech-to-text fallbacks
  • Visual feedback for voice states
  • Emotion detection explanations
  • Multi-language support

#Mobile Responsiveness

  • Touch-friendly interface elements
  • Responsive grid layouts
  • Optimized voice interactions
  • Progressive web app features

#Technical Implementation Notes

#Frontend Technologies

  • Next.js 15 with App Router
  • React 19 with Server Components
  • Tailwind CSS for styling
  • Framer Motion for animations

#AI Integration

  • Hume AI SDK for voice interactions
  • OpenAI GPT-4 for text processing
  • Anthropic Claude for complex reasoning
  • WebRTC for real-time audio

#Performance Optimization

  • Code splitting and lazy loading
  • Image optimization with Next.js
  • Service worker for offline functionality
  • CDN distribution for global performance

#Design System Evolution

#Phase 1: Foundation

  • Core component library
  • Design tokens implementation
  • Basic accessibility features

#Phase 2: Enhancement

  • Advanced animations
  • Voice interface refinement
  • Multi-modal interactions

#Phase 3: Innovation

  • Predictive UI elements
  • Emotion-based adaptations
  • AR/VR integration readiness

This comprehensive UX/UI specification provides the foundation for implementing the 5CRSE platform with a focus on luxury aesthetics, emotional intelligence, and seamless user experiences across all touchpoints.