5CRSE5CRSEDocumentation
← Back to site

#Luxury Transportation & Event Booking UX Specification

Version: 1.3
Date: March 30, 2025
Author: Design Team

#Overview

This specification outlines the user experience design for the 5CRSE luxury transportation and event booking platform. The system provides premium transportation services via Cadillac Escalade and Tesla vehicles, coupled with a comprehensive event booking system. The platform enables users to book predefined events (concerts, sports, etc.) or create custom events with luxury transportation included.

#Design Goals

  • Create a visually stunning first impression that communicates luxury and sophistication
  • Showcase premium transportation options for multiple event types
  • Implement smooth, modern interactions through the entire booking flow
  • Drive conversions for event bookings and transportation services
  • Enable personalized event creation and group management
  • Ensure responsive design across all devices

#User Personas

  1. Event Attendee: Looking to attend concerts, sports events, or other public events with premium transportation
  2. Event Organizer: Planning custom events (birthday parties, corporate events) and inviting guests
  3. Group Coordinator: Organizing transportation for a group to attend events
  4. Returning Customer: Has previously used the service and wants to book again or check past events

#Core User Journeys

#1. Predefined Event Booking Journey

  1. Landing Page: User sees featured transportation options and upcoming events
  2. Event Discovery: User browses and filters events (concerts, sports, theater, etc.)
  3. Event Selection: User selects an event and views details
  4. Package Selection: User chooses a transportation package for the event
  5. Group Management: User indicates group size and invites others
  6. Checkout: User completes booking and payment
  7. Confirmation: User receives confirmation and event details

#2. Custom Event Creation Journey

  1. Custom Event Option: User selects "Create Custom Event" from dashboard
  2. Event Type Selection: User chooses event type (birthday, corporate, dinner, etc.)
  3. Location Selection: User browses partner venues/restaurants with integrated booking
  4. Transportation Planning: User selects vehicle type and logistics
  5. Guest Management: User invites guests and manages RSVPs
  6. Add-on Services: User selects additional services (host/ambassador, catering, etc.)
  7. Checkout and Confirmation: User completes booking and receives confirmation

#UI Components

#1. Hero Section

  • Location: src/heros/HighImpact/index.tsx
  • Description: Full-width hero section with a 3D model of the Cadillac Escalade
  • Elements:
    • Heading: "Experience Luxury Transportation"
    • Subheading: "Premium Transportation for All Your Special Occasions"
    • CTA Buttons: "Book Event" and "Create Custom Event"
    • Background: Subtle dark gradient
    • 3D Model: Cadillac Escalade rendering with animation

#2. 3D Car Model

  • Location: src/components/3DModel/CarModel.tsx
  • Description: Interactive 3D visualization of the luxury vehicles
  • Features:
    • Toggle between Cadillac Escalade and Tesla models
    • Animation sequences showing pickup and transportation
    • Rotating display when in hero section
    • Background images that cycle with fade transitions
    • Feature highlights (passenger capacity, amenities)
    • Loading and error states

#3. Parallax Car Effect

  • Location: src/components/3DModel/ParallaxCar.tsx
  • Description: Controls the car's movement as user scrolls down the page
  • Behaviors:
    • Initial position centered in hero section
    • Transforms position, scale, and opacity on scroll
    • Transitions to compact mode when reaching events section
    • Shows directional indicator pointing to events

#4. Event Discovery Section

  • Location: src/app/(frontend)/events/page.tsx
  • Description: Comprehensive event browsing and filtering system
  • Elements:
    • Search functionality with autocomplete
    • Filter system by:
      • Event type (concerts, sports, theater, dining, etc.)
      • Date range
      • Location/distance
      • Group size
      • Price range
    • Event cards with:
      • Event image
      • Event title and type
      • Date and location
      • Base price
      • "Book Transportation" button
    • Responsive grid layout
    • Load more/pagination controls

#5. Event Creation Interface

  • Location: src/app/(frontend)/create-event/page.tsx
  • Description: Step-by-step wizard for creating custom events
  • Steps:
    1. Event Type: Selection cards for event categories
    2. Date & Time: Calendar and time picker
    3. Location: Map-based venue search with:
      • Partner restaurant integration
      • OpenTable booking API integration
      • Custom location input
    4. Transportation: Vehicle selection with:
      • Vehicle models (Escalade/Tesla)
      • Capacity options
      • Pickup/dropoff logistics
    5. Guest Management: Email invitation system
    6. Add-ons: Selection of premium services:
      • 5CRSE Ambassador/host
      • Catering options
      • Entertainment packages
      • Special requests
    7. Review & Checkout: Order summary and payment

#6. User Dashboard

  • Location: src/app/(frontend)/dashboard/page.tsx
  • Description: Personal dashboard for managing bookings and events
  • Sections:
    • Upcoming bookings/events
    • Past events history
    • Saved favorite venues/events
    • Invitations to events from others
    • Account settings and preferences
    • Payment methods

#7. About Section

  • Location: src/app/(frontend)/page.tsx
  • Description: Information about luxury transportation services
  • Elements:
    • Section heading: "Premium Transportation for Premium Experiences"
    • Feature highlights and benefits
    • Two-column layout with text and media content

#8. Checkout & Payment Interface

  • Location: src/app/(frontend)/checkout/page.tsx
  • Description: Integrated payment flow for events and transportation
  • Sections:
    • Order summary with itemized costs:
      • Transportation base fee
      • Event tickets cost
      • Restaurant/venue reservations
      • Service fees and add-ons
    • Payment plan selection:
      • Radio button options for payment schedule
      • Visual timeline of payment dates
    • Payment method input:
      • Credit/debit cards
      • Bank transfers
      • Digital wallets
    • Terms & conditions acceptance
    • Confirmation with payment receipt

#Technical Specifications

#3D Model Implementation

  • Framework: Three.js implementation for vehicle models
  • Fallback: CSS-based visualization with animations
  • Loading Strategy: Lazy-loaded when in viewport
  • Performance Considerations:
    • Reduced polygon count for mobile
    • Optimized textures and lighting
    • Level-of-detail switching based on device capabilities

#Booking System Integration

  • Data Source: Combination of Ticketmaster API and custom event database
  • Implementation: Server components fetching from Payload CMS collections
  • External APIs:
    • Ticketmaster for public events
    • OpenTable for restaurant reservations
    • Google Maps for location services
    • Stripe for payment processing

#User Authentication & Profiles

  • Authentication: NextAuth.js with multiple provider support
  • User Profile: Stored in Payload CMS Users collection
  • Preferences: User event preferences and history tracking
  • Permissions: Role-based access for event creators vs. attendees

#Real-time Features

  • Invitation System: Real-time notifications for event invites
  • Booking Updates: Status updates for transportation booking
  • Chat: Integrated messaging with drivers/hosts (future enhancement)

#Responsive Design

  • Approach: Mobile-first design with breakpoints
  • Breakpoints:
    • Mobile: < 768px
    • Tablet: 768-1024px
    • Desktop: > 1024px
  • Implementation: Tailwind CSS classes

#Color Scheme

  • Primary background: Black (#000000)
  • Text: White (#FFFFFF)
  • Accent: Gold (#D4AF37)
  • Call to action: Gold gradient
  • Success: Emerald (#10B981)
  • Alert/Error: Ruby (#E11D48)
  • Overlay backgrounds: Black with varying opacity levels

#Integration Points

  • Payload CMS:
    • Event data (predefined and custom)
    • User profiles and preferences
    • Bookings and reservations
    • Venues and partner relationships
  • External APIs:
    • Ticketmaster for public events
    • OpenTable for restaurant bookings
    • Google Maps for locations and routing
    • Stripe/Square for payments
  • Media Assets:
    • Event images stored in Media collection
    • Vehicle models in /public/models/
    • UI assets in appropriate component directories

#Data Models

#Users Collection

interface User {
  id: string;
  email: string;
  name: string;
  phone?: string;
  address?: {
    street: string;
    city: string;
    state: string;
    zip: string;
    country: string;
  };
  paymentMethods?: {
    id: string;
    type: 'card' | 'bankAccount' | 'digitalWallet';
    lastFour: string;
    expiryDate?: string;
    isDefault: boolean;
  }[];
  preferences?: {
    eventTypes: ('concert' | 'sports' | 'theater' | 'dining' | 'corporate' | 'birthday' | 'custom')[];
    cuisinePreferences?: string[];
    vehiclePreference?: 'escalade' | 'tesla';
    notificationPreferences: {
      email: boolean;
      sms: boolean;
      push: boolean;
    };
  };
  createdEvents?: string[]; // References to events created by this user
  pastBookings?: string[]; // References to past bookings
  upcomingBookings?: string[]; // References to upcoming bookings
  invitations?: {
    eventId: string;
    status: 'pending' | 'accepted' | 'declined';
    invitedBy: string;
  }[];
  role: 'user' | 'admin' | 'driver' | 'ambassador';
  createdAt: Date;
  updatedAt: Date;
}

#Events Collection

interface Event {
  id: string;
  title: string;
  type: 'concert' | 'sports' | 'theater' | 'dining' | 'corporate' | 'birthday' | 'custom';
  date: Date;
  endDate?: Date; // For multi-day events
  location: {
    venue: string;
    address: string;
    coordinates: [number, number]; // [lat, lng]
    placeId?: string; // Google Places ID
  };
  ticketmasterId?: string; // Optional, for Ticketmaster events
  openTableId?: string; // Optional, for restaurant reservations
  externalBookingUrls?: {
    name: string;
    url: string;
  }[];
  description: RichTextData;
  shortDescription: string; // For card displays
  featuredImage: Media;
  gallery: Media[];
  packages: TransportationPackage[];
  capacity: {
    min: number;
    max: number;
    remainingSpots?: number;
  };
  priceRange: {
    min: number;
    max: number;
    currency: string;
  };
  isPublic: boolean;
  isCustom: boolean;
  creator: string | null; // User ID for custom events
  creatorDetails?: {
    name: string;
    email: string;
    phone: string;
  };
  guests?: {
    userId?: string;
    email: string;
    name?: string;
    status: 'invited' | 'confirmed' | 'declined';
    paymentStatus?: 'pending' | 'paid' | 'refunded';
  }[];
  amenities?: string[];
  specialInstructions?: string;
  status: 'draft' | 'published' | 'completed' | 'cancelled';
  requiresAmbassador: boolean;
  ambassadorDetails?: {
    ambassadorId?: string;
    specialRequirements?: string;
  };
  cancelPolicy: {
    fullRefundBeforeDays: number;
    partialRefundBeforeDays: number;
    partialRefundPercentage: number;
  };
  createdAt: Date;
  updatedAt: Date;
  tags?: string[];
  seoMetadata?: {
    title?: string;
    description?: string;
    keywords?: string[];
  };
}

#Bookings Collection

interface Booking {
  id: string;
  bookingReference: string; // Human-readable reference
  user: string; // User ID
  userDetails: {
    name: string;
    email: string;
    phone: string;
  };
  event: string; // Event ID
  eventDetails: {
    title: string;
    date: Date;
    location: string;
    type: string;
  };
  package: TransportationPackage;
  guests: {
    count: number;
    details?: {
      name: string;
      email: string;
      phone?: string;
      specialRequirements?: string;
    }[];
  };
  transportation: {
    vehicle: 'escalade' | 'tesla';
    vehicleCount: number;
    pickupLocation: string;
    pickupTime: Date;
    dropoffLocation: string;
    dropoffTime: Date;
    specialRequests?: string;
    driverNotes?: string;
    driverId?: string; // Reference to Driver collection
    driverAssigned?: string; // Name of assigned driver
    driverContactNumber?: string; // Contact during the trip
    vehicleDetails?: {
      licensePlate?: string;
      color?: string;
      model?: string;
      year?: number;
    };
    routeDetails?: {
      estimatedDistance: number;
      estimatedDuration: number;
      waypoints?: {
        location: string;
        arrivalTime?: Date;
        departureTime?: Date;
        purpose?: string;
      }[];
    };
  };
  dining?: {
    restaurantId: string;
    restaurantName: string;
    openTableConfirmation?: string;
    reservationTime: Date;
    partySize: number;
    specialRequests?: string;
    menuPreOrdered?: boolean;
    menuItems?: {
      name: string;
      price: number;
      quantity: number;
      specialInstructions?: string;
    }[];
  };
  tickets?: {
    ticketmasterConfirmation?: string;
    seatDetails?: string;
    ticketCount: number;
    ticketType: string;
    deliveryMethod: 'electronic' | 'willcall' | 'mail';
  };
  addons: {
    ambassador: boolean;
    ambassadorDetails?: {
      ambassadorId?: string;
      name?: string;
      specialInstructions?: string;
    };
    catering?: {
      menu: string;
      headCount: number;
      dietaryRestrictions?: string[];
    };
    entertainment?: string;
    other?: string;
  };
  status: 'pending' | 'confirmed' | 'inProgress' | 'completed' | 'cancelled';
  payment: {
    total: number;
    currency: string;
    breakdown: {
      transportation: number;
      dining?: number;
      tickets?: number;
      addons?: number;
      serviceFee: number;
      tax: number;
    };
    plan: 'full' | 'twoPayment' | 'threePayment';
    schedule?: {
      initialPayment: {
        amount: number;
        date: Date;
        status: 'pending' | 'paid' | 'failed';
        transactionId?: string;
      };
      secondPayment?: {
        amount: number;
        dueDate: Date;
        status: 'pending' | 'paid' | 'failed';
        transactionId?: string;
      };
      finalPayment?: {
        amount: number;
        dueDate: Date;
        status: 'pending' | 'paid' | 'failed';
        transactionId?: string;
      };
    };
    status: 'pending' | 'partiallyPaid' | 'paid' | 'refunded' | 'failed';
    paymentMethod: {
      type: 'card' | 'bankAccount' | 'digitalWallet';
      lastFour?: string;
    };
    refundDetails?: {
      amount: number;
      date: Date;
      reason: string;
    };
  };
  timeline: {
    created: Date;
    confirmed?: Date;
    inProgress?: Date;
    completed?: Date;
    cancelled?: Date;
  };
  notes?: string;
  feedback?: {
    rating: number;
    comments: string;
    submittedAt: Date;
  };
}

#TransportationPackage Type

interface TransportationPackage {
  id: string;
  name: string;
  description: string;
  vehicleType: 'escalade' | 'tesla';
  capacity: number;
  pricePerVehicle: number;
  currency: string;
  features: string[];
  duration: number; // in hours
  includedMileage: number;
  overmileageFee: number;
  availabilityCalendar?: {
    date: Date;
    availableVehicles: number;
  }[];
  images: Media[];
}

#Venues Collection (Enhanced)

interface Venue {
  id: string;
  name: string;
  slug: string;
  type: 'restaurant' | 'concert_hall' | 'theater' | 'sports_arena' | 'hotel' | 'conference_center' | 'other';
  venueCategory: 'dining' | 'entertainment' | 'sports' | 'corporate' | 'multipurpose';
  description: RichTextData;
  shortDescription: string;
  address: {
    street: string;
    street2?: string;
    city: string;
    state: string;
    zip: string;
    country: string;
    coordinates: [number, number]; // [lat, lng]
    placeId?: string; // Google Maps Place ID
  };
  contact: {
    phone: string;
    email?: string;
    website?: string;
    socialMedia?: {
      platform: 'facebook' | 'instagram' | 'twitter' | 'linkedin' | 'other';
      url: string;
    }[];
  };
  featuredImage: Media;
  gallery: Media[];
  
  // Restaurant-specific fields
  restaurantDetails?: {
    openTableId?: string;
    openTableVenueId?: string;
    cuisine: string[];
    priceRange: '$' | '$$' | '$$$' | '$$$$';
    diningOptions: ('breakfast' | 'lunch' | 'dinner' | 'brunch' | 'late_night')[];
    specialDiets: string[]; // Vegan, gluten-free, etc.
    dresscode?: 'casual' | 'business_casual' | 'formal';
    privateRooms: boolean;
    privateRoomCapacity?: number;
    minimumPartySize?: number;
    maximumPartySize?: number;
    averageDiningDuration?: number; // in minutes
    reservationRequired: boolean;
    allowsLargeGroups: boolean;
    reservationLeadTime?: number; // days in advance needed for reservations
    specialOffers?: {
      title: string;
      description: string;
      validFrom?: Date;
      validTo?: Date;
      discountPercentage?: number;
      isActive: boolean;
    }[];
    menus?: {
      name: string;
      type: 'regular' | 'special' | 'private' | 'group' | 'set_menu';
      items: {
        name: string;
        description: string;
        price: number;
        popular: boolean;
        category: string;
        image?: Media;
      }[];
    }[];
  };
  
  // Event venue-specific fields
  eventVenueDetails?: {
    ticketmasterId?: string;
    capacity: number;
    seatingOptions: string[];
    seatingMap?: Media;
    amenities: string[];
    accessibility: string[];
    parkingAvailable: boolean;
    parkingDetails?: string;
    vipAreas?: {
      name: string;
      description: string;
      capacity: number;
      price?: number;
    }[];
    productionCapabilities?: {
      sound: boolean;
      lighting: boolean;
      stage: boolean;
      technicalSpecs?: string;
    };
    allowsCatering: boolean;
    preferredCaterers?: {
      name: string;
      website?: string;
      phone?: string;
      minimumOrder?: number;
    }[];
  };
  
  // Common fields for all venues
  operatingHours: {
    dayOfWeek: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
    open: string; // HH:MM format
    close: string; // HH:MM format
    isClosed: boolean;
    specialHours?: boolean;
    specialHoursReason?: string;
  }[];
  
  // Partnership and business details
  partnershipDetails: {
    status: 'premium' | 'standard' | 'non_partner';
    commissionRate?: number;
    contractStartDate?: Date;
    contractEndDate?: Date;
    contactPerson?: {
      name: string;
      position: string;
      email: string;
      phone: string;
    };
    specialArrangements?: string;
    negotiatedRates?: {
      description: string;
      rate: number;
      unit: 'percentage' | 'flat_fee';
    }[];
  };
  
  // Public data and rating
  publicData: {
    rating: number;
    reviewCount: number;
    popularityScore?: number;
    highlights: string[];
    tags: string[];
  };
  
  // SEO and marketing
  seo: {
    title?: string;
    description?: string;
    keywords?: string[];
    ogImage?: Media;
  };
  
  // System status
  status: 'active' | 'inactive' | 'pending' | 'blacklisted';
  createdAt: Date;
  updatedAt: Date;
  createdBy?: string; // Admin user ID
  availableForCustomEvents: boolean;
  customEventMinimumNotice?: number; // In days
}

#OpenTable Reservation Model

interface OpenTableReservation {
  id: string;
  openTableConfirmationId: string;
  openTableVenueId: string;
  venueId: string; // Reference to Venue collection
  bookingId?: string; // Reference to Booking collection
  eventId?: string; // Reference to Event collection (for custom events)
  restaurantName: string;
  reservationTime: Date;
  partySize: number;
  userDetails: {
    name: string;
    email: string;
    phone: string;
  };
  status: 'pending' | 'confirmed' | 'cancelled' | 'completed' | 'no_show';
  specialRequests?: string;
  tableLocation?: string; // e.g., "Patio", "Window", "Private Room"
  occasionType?: string; // e.g., "Birthday", "Anniversary"
  menuSelection?: string; // e.g., "Regular", "Prix Fixe", "Group Menu"
  dietaryRestrictions?: string[];
  createdAt: Date;
  updatedAt: Date;
  lastSyncedAt: Date;
  // Business model-related fields
  pricingDetails: {
    basePrice: number;
    perPersonCost?: number;
    serviceCharge?: number;
    fivecrseServiceFee: number; // Our markup
    totalPaid: number;
  };
  // Additional booking details for app-specific use
  transportationDetails?: {
    needsTransportation: boolean;
    transportationBookingId?: string;
    pickupLocation?: string;
    pickupTime?: Date;
  };
}

#OpenTable Integration Service

interface OpenTableService {
  // Authentication methods
  getAccessToken(): Promise<string>;
  refreshAccessToken(): Promise<string>;
  
  // Venue discovery
  searchRestaurants(params: {
    location?: string;
    latitude?: number;
    longitude?: number;
    radius?: number;
    cuisines?: string[];
    priceRange?: string;
    partySize: number;
    date: string;
    time: string;
  }): Promise<OpenTableVenueSummary[]>;
  
  // Restaurant availability
  checkAvailability(restaurantId: string, params: {
    partySize: number;
    date: string;
    time: string;
  }): Promise<OpenTableTimeslot[]>;
  
  // Reservation methods
  createReservation(details: {
    restaurantId: string;
    partySize: number;
    date: string;
    time: string;
    userDetails: {
      firstName: string;
      lastName: string;
      email: string;
      phone: string;
    };
    specialRequests?: string;
    occasionType?: string;
  }): Promise<OpenTableReservationResponse>;
  
  // Reservation management
  getReservation(reservationId: string): Promise<OpenTableReservationDetails>;
  updateReservation(reservationId: string, updates: any): Promise<OpenTableReservationResponse>;
  cancelReservation(reservationId: string): Promise<{success: boolean; message?: string}>;
  
  // Restaurant details
  getRestaurantDetails(restaurantId: string): Promise<OpenTableVenueDetails>;
  
  // Data synchronization
  syncRestaurantData(restaurantId: string, venueId: string): Promise<boolean>;
  syncReservation(reservationId: string): Promise<boolean>;
  
  // Helper methods
  calculateServiceFee(basePrice: number): number;
  formatDateForOpenTable(date: Date): string;
  parseOpenTableResponse(response: any): any;
}

#Venue Search API Route

// API route for searching venues (both restaurants and event venues)
// GET /api/venues/search
interface VenueSearchParams {
  type?: string; // venue type filter
  location?: string; // city or address
  coordinates?: [number, number]; // lat, lng for proximity search
  radius?: number; // search radius in miles
  query?: string; // text search
  cuisine?: string[]; // for restaurants
  priceRange?: string; // for restaurants
  capacity?: number; // for event venues
  date?: string; // YYYY-MM-DD format
  time?: string; // HH:MM format
  partySize?: number;
  amenities?: string[];
  isPartner?: boolean;
  availableForCustomEvents?: boolean;
}

interface VenueSearchResponse {
  venues: VenueSummary[];
  total: number;
  page: number;
  totalPages: number;
  openTableVenues?: OpenTableVenueSummary[]; // For restaurant searches
}

// API route for venue availability check
// GET /api/venues/:id/availability
interface VenueAvailabilityParams {
  date: string; // YYYY-MM-DD
  startTime?: string; // HH:MM
  endTime?: string; // HH:MM
  partySize: number;
  eventType?: string; // For custom events
}

interface VenueAvailabilityResponse {
  available: boolean;
  availableTimeslots?: {
    time: string;
    hasSpecialOffer?: boolean;
    isPopular?: boolean;
  }[];
  pricing?: {
    basePrice: number;
    serviceCharge?: number;
    fivecrseServiceFee: number;
    totalEstimate: number;
  };
  reservationRequirements?: {
    minimumNotice: number; // in hours
    depositRequired: boolean;
    depositAmount?: number;
  };
  message?: string; // Any special messaging about availability
}

#Restaurant Booking Flow (Custom Events)

The venue and restaurant integration is critical for the custom event creation flow, allowing users to:

  1. Discover Restaurants:

    • Search by location, cuisine, price range
    • Filter for venues that can accommodate their party size
    • View detailed restaurant information including menus and ambiance

  2. Check Real-time Availability:

    • See available time slots via OpenTable API
    • Get instant confirmation of reservation possibility
    • View special offers or peak time information

  3. Make Reservations Within the Event Flow:

    • Select time slots that work with their transportation schedule
    • Add special requests (e.g., birthday celebration, dietary needs)
    • Receive instant confirmation through OpenTable

  4. Add Transportation Automatically:

    • Connect reservation with transportation logistics
    • Schedule pickup/dropoff times around the reservation
    • Ensure all party members have transportation to the venue

  5. Apply 5CRSE Pricing Model:

    • Base restaurant price reflected from OpenTable
    • Transparent service fee added (10-15%)
    • Combined with transportation costs for complete package pricing

This integration enables the "restaurant as venue" concept for custom events, allowing users to build complete experiences around dining, with premium transportation and concierge service as the core 5CRSE value proposition.

#Implementation Notes

  1. The current implementation uses a placeholder for the 3D model with CSS animations
  2. The complete Three.js implementation will replace this once dependencies are installed
  3. Background images are stored and cycled in the CarModel component
  4. The parallax effect is implemented using scroll position tracking and CSS transforms
  5. Event data structure needs to support both Ticketmaster-sourced and custom events
  6. OpenTable integration will be implemented in Phase 2

#Accessibility Considerations

  • Provide alternative experience for users with reduced motion preferences
  • Ensure sufficient color contrast for text elements
  • Include appropriate ARIA labels for all interactive elements
  • Support keyboard navigation throughout the booking flow
  • Implement screen reader-friendly event descriptions
  • Provide text alternatives for all images and visual elements

#Performance Targets

  • Initial load time: < 3 seconds on standard connections
  • Time to interactive: < 5 seconds
  • Smooth scrolling: 60fps minimum
  • Image optimization: WebP format with appropriate dimensions
  • Lazy loading for below-the-fold content
  • Server-side rendering for event listings for improved SEO

#Current Implementation Status

  • ✅ Basic page structure and layout
  • ✅ Parallax scrolling effects
  • ✅ CSS-based car visualization
  • ✅ Concert background images and transitions
  • ✅ Responsive design implementation
  • ⬜ Three.js 3D model implementation
  • ⬜ Advanced lighting and materials
  • ⬜ Interactive car features
  • ⬜ Event filtering system
  • ⬜ Custom event creation flow
  • ⬜ User dashboard
  • ⬜ OpenTable integration
  • ⬜ Ticketmaster integration

#Phased Implementation

#Phase 1 (Current)

  • Landing page with 3D car visualization
  • Basic predefined event listing and details
  • Initial booking flow for transportation

#Phase 2 (Next)

  • User authentication and profiles
  • Ticketmaster API integration
  • Enhanced event discovery and filtering
  • Booking management

#Phase 3 (Updated)

  • Custom event creation
  • OpenTable integration with OAuth authentication
  • Party size and special menu accommodations
  • Guest invitation system
  • 5CRSE Ambassador booking

#Phase 4

  • Real-time chat and notifications
  • Expanded partner integrations
  • Mobile app development
  • AI-powered event recommendations

#File Structure

src/
├── app/
│   └── (frontend)/
│       ├── page.tsx                     # Landing page
│       ├── page.client.tsx              # Client-side components
│       ├── events/
│       │   ├── page.tsx                 # Event discovery
│       │   └── [id]/page.tsx            # Event details
│       ├── create-event/
│       │   ├── page.tsx                 # Custom event creation
│       │   └── [...steps]/page.tsx      # Creation wizard steps
│       └── dashboard/
│           ├── page.tsx                 # User dashboard
│           ├── bookings/page.tsx        # Booking management
│           └── settings/page.tsx        # User settings
├── components/
│   ├── 3DModel/
│   │   ├── index.ts                     # Export file
│   │   ├── CarModel.tsx                 # 3D car visualization
│   │   └── ParallaxCar.tsx              # Parallax scrolling controller
│   ├── EventCard/
│   │   └── index.tsx                    # Event card component
│   ├── EventFilters/
│   │   └── index.tsx                    # Event filtering UI
│   └── BookingFlow/
│       ├── PackageSelection.tsx         # Package selection step
│       ├── GuestDetails.tsx             # Guest information step
│       └── TransportationDetails.tsx    # Transportation options step
├── collections/
│   ├── Events.ts                        # Events collection
│   ├── Bookings.ts                      # Bookings collection
│   └── Venues.ts                        # Venues collection
├── heros/
│   └── HighImpact/
│       └── index.tsx                    # Hero section component
├── services/
│   ├── ticketmaster.ts                  # Ticketmaster API integration
│   └── openTable.ts                     # OpenTable API integration
└── public/
    ├── images/
    │   ├── concert-background.jpg       # Event type background 1
    │   └── concert-background2.jpg      # Event type background 2
    └── models/                          # 3D model assets
        ├── escalade.glb                 # Cadillac Escalade model
        └── tesla.glb                    # Tesla model