Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Roomspace is an employee-facing web application designed for booking meeting rooms within an organization. This application allows employees to efficiently search for available rooms, view detailed room information, submit booking requests, check their booking statuses, manage notifications, and update their profiles. The focus is on a clean, modern interface that enhances usability and provides a premium experience.

## CORE FEATURES
1. **Home Page**: A personalized landing for employees displaying a greeting message, upcoming bookings, and a primary call-to-action to book a room.
2. **Find Room**: A search interface allowing users to filter rooms by date, time, capacity, and facilities, displaying available rooms in a grid format.
3. **Room Detail & Booking Confirmation**: A detailed view of selected rooms, including amenities and booking confirmation options.
4. **Booking Success**: A confirmation page that reassures users of their booking with key details and next steps.
5. **My Bookings**: A dedicated section for users to view and manage their own bookings, including the ability to edit or cancel reservations.
6. **Notifications**: A clean interface for viewing important updates and alerts related to room bookings.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The application will feature a top navigation bar, a centered main content container, and multi-column card layouts where appropriate, ensuring a structured and visually balanced experience.

## TECHNICAL REQUIREMENTS
- **Framework**: Vue with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (as needed for state management)

## IMPLEMENTATION STEPS
1. Set up a new React project with TypeScript and Tailwind CSS.
2. Install necessary dependencies, including shadcn/ui for UI components.
3. Create the main application layout with a top navigation bar.
4. Design and implement the Home page with a greeting, upcoming bookings, and a Book a Room button.
5. Develop the Find Room page with a search bar and a grid layout for room cards.
6. Create the Room Detail & Booking Confirmation page featuring room information and booking options.
7. Implement the Booking Success page for post-booking confirmation.
8. Build the My Bookings page to show users their reservation history and actions.
9. Develop the Notifications page to display alerts and updates.
10. Set up the Profile page for users to manage their account details.
11. Incorporate responsive design for mobile and tablet views, ensuring usability across devices.
12. Add subtle micro-interactions for buttons, notifications, and loading states to enhance user experience.

## USER EXPERIENCE
Users will experience a seamless interaction flow that begins on the Home page, where they are greeted and can easily navigate to find a room. The Find Room feature allows for quick searching with filters, leading to room selection. Upon selecting a room, users are directed to the Room Detail page to confirm their booking, followed by a Booking Success page. Users can then review their bookings or notifications from the respective sections. Each interaction is designed to be intuitive, fast, and visually appealing, ensuring a premium user experience.