stone-hospitality

As a user, I want to use the frontend Landing page so that I can explore the interactive hospitality map, understand the product, and navigate to Chat, Booking, or Events. Implement the Landing page based on the existing JSX design (v2) which includes: NavBar with frosted-glass effect, Hero section, Interactive Hospitality Map with hover/click zone interactions and time-based color shifts, UserPersonaSelector (Guest, Event Attendee, Staff), FeatureHighlights, HowItWorks stepper, ChatPreview, Testimonials, TrustBadges, CallToAction, and Footer. Links from this page go to /Chat, /Booking, /Events, /Login, and /Dashboard.

As a staff member, I want to use the frontend Login page so that I can sign in securely and be redirected to the Dashboard. Implement the Login page aligned with the stone-hospitality theme (Soft Ivory background, Golden Sand CTA button, Deep Charcoal text). Include email/password fields, a 'Sign In' button, error states, and a link to sign up. On success, redirect to /Dashboard. This page is the entry point for the Staff Member user flow.

As a staff member, I want to use the frontend Dashboard page so that I can view operations, manage schedules, and navigate to Chat and Tasks. Implement the Dashboard overview page with the stone-hospitality theme, showing key operational metrics, a schedule panel, quick links to /Chat and /Tasks, and a navigation sidebar. The page should support both the Operations view and Schedule management view as per the Staff Member user flow: Dashboard → Chat, Dashboard → Tasks.

As a user (guest, attendee, or staff), I want to use the frontend Chat page so that I can interact with the AI chatbot via text or voice. Implement a chat interface with the stone-hospitality branding: message bubbles, typing indicator, voice command toggle, multi-language support indicator, and a persona-aware greeting. Guests arrive from Landing to ask about amenities or request bookings (→ Booking). Event attendees arrive from Landing to inquire about events (→ Events). Staff arrive from Dashboard to query guest requests or send updates.

As a user, I want to use the backend AI API so that my chat messages are routed to the appropriate AI model (GPT, Claude, or Gemini) via LiteLLM and Langchain, and I receive a response within 2 seconds. Implement a FastAPI endpoint POST /api/chat that accepts a message, user persona (guest/attendee/staff), and session ID, routes to the correct LLM via LiteLLM, and returns a streamed or synchronous response. Support multi-turn conversation context.

As a staff member, I want to use the frontend Tasks page so that I can coordinate with other staff members, view assigned tasks, and send updates via chat. Implement a task management view with a task list (grouped by priority/status), staff assignment chips, a task detail panel, and a 'Send Update via Chat' CTA (→ Chat). Arrived from Dashboard schedule management. Uses Deep Charcoal and Warm Beige surface styling.

As an event attendee, I want to use the frontend Events page so that I can view the event schedule, register for attendance, and view venue details. Implement the Events page with a schedule/calendar view, event cards showing time, location, and description, a 'Register' CTA per event (→ Confirmation), and a 'View Venue' link (→ Venue). Themed with Golden Sand accents and Warm Beige surface cards.

As a guest, I want to use the frontend Recommendations page so that I can view personalized suggestions for nearby attractions, dining, and activities based on my preferences. Implement a recommendations grid with preference tag filters, suggestion cards (image, title, description, distance/rating), and a 'Save to Profile' action (→ Profile). Warm Beige background with animated hover cards.

As a guest, I want to use the frontend Booking page so that I can select a room or service and confirm my reservation. Implement a multi-step booking flow: (1) Room/service selection with filter options, (2) Date and guest details form, (3) Summary and confirm step (→ Confirmation). Each step uses the stone-hospitality theme with Golden Sand CTAs and Soft Ivory backgrounds. Arrived from Chat when a guest requests a booking.

As an event attendee, I want to use the backend API for events so that I can view event schedules, register for events, and receive confirmation. Implement FastAPI endpoints: GET /api/events, GET /api/events/{id}, POST /api/events/{id}/register. Include registration confirmation logic, MySQL persistence, and email/notification hook for the Confirmation page.

As a universal user, I want to use voice commands in the chat interface so that I can interact with the chatbot hands-free. Integrate Web Speech API on the frontend Chat page for speech-to-text input and text-to-speech output. On the backend, ensure the POST /api/chat endpoint handles voice-transcribed text identically to typed input. Add a voice toggle button to the Chat UI with mic animation.

As a universal user, I want to use the chatbot in my preferred language so that I receive responses in the language I select. Implement i18n on the frontend using react-i18next with at minimum English (default) and Spanish. On the backend, pass a language parameter to the LLM router so AI responses are generated in the correct language. Add a language selector to the NavBar and Chat page.

As a guest, I want to use the backend API for recommendations so that I receive personalized suggestions based on my preferences and history. Implement FastAPI endpoints: GET /api/recommendations?persona=guest&preferences=[] that queries an AI model or rule-based engine and returns ranked suggestions. Store preference data per user in MySQL.

As a staff member, I want to use the backend API for task coordination so that I can create, assign, update, and complete operational tasks. Implement FastAPI endpoints: GET /api/tasks, POST /api/tasks, PATCH /api/tasks/{id}, DELETE /api/tasks/{id}. Support staff assignment, status tracking (todo/in-progress/done), and MySQL persistence.

As a guest, I want to use the backend API for bookings so that I can create, retrieve, update, and cancel room or service reservations. Implement FastAPI endpoints: POST /api/bookings, GET /api/bookings/{id}, PATCH /api/bookings/{id}, DELETE /api/bookings/{id}. Include validation, availability checks, and MySQL persistence via SQLAlchemy and Alembic migrations.

As an event attendee, I want to use the frontend Venue page so that I can view details about the event venue including layout, amenities, and accessibility information. Implement a venue detail page with an illustrated floor plan or map, key info cards (capacity, facilities, accessibility features), and a 'Chat for More Info' CTA linking to /Chat. Warm Beige surface with Golden Sand accents.

As a guest, I want to use the frontend Profile page so that I can save and manage my preferences, view past bookings, and personalize my experience. Implement a profile page with sections for personal info, saved preferences (tag chips in Golden Sand), booking history list, and notification settings. Themed consistently with stone-hospitality design. Arrived from Recommendations when saving preferences.

As an event attendee, I want to use the frontend Confirmation page so that I can receive a booking or registration confirmation and get updates. Implement a confirmation screen showing event/booking details, a confirmation number, a summary card, and options to receive email or SMS updates. Themed with the stone-hospitality palette. Arrived from Events registration flow.

As a guest, I want to use the backend API for my profile so that I can save preferences, view booking history, and update personal info. Implement FastAPI endpoints: GET /api/profile/{user_id}, PATCH /api/profile/{user_id}, GET /api/profile/{user_id}/bookings. Store preferences as JSON and link to booking records in MySQL.