Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Smart Talks is a mobile and web communication application designed for hierarchical access to notifications. The main purpose of the application is to facilitate efficient communication within organizations, providing users with a streamlined experience to view notifications based on their access level.

## CORE FEATURES
1. **User Authentication**: Secure login screen that supports multiple access levels (admin, manager, employee).
2. **Notification Hall**: Central dashboard displaying notifications relevant to the user's access level, with options to filter and sort.
3. **User Management**: Admin interface for managing user roles and permissions within the application.
4. **Real-time Updates**: Notifications are updated in real-time to ensure users receive the latest information without needing to refresh.
5. **Search Functionality**: Ability to search through notifications for quick access to important messages.
6. **Mobile Responsiveness**: Fully responsive design for optimal user experience on both mobile and desktop devices.

## 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 main layout will feature a top navigation bar for quick access to different sections, a side panel for user-specific options, and a central content area (Notification Hall) for displaying notifications.

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

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize a new React project with TypeScript and configure Tailwind CSS.
2. **Create Authentication Flow**: Implement user authentication using a suitable library (e.g., Firebase Auth, Auth0) to manage user roles.
3. **Design the Navigation and Layout**: Build the top navigation bar and side panel using Tailwind CSS for styling.
4. **Develop Notification Hall**: Create a component that fetches and displays notifications dynamically based on user access levels.
5. **Implement Real-time Updates**: Integrate a WebSocket or similar service to push notifications to users in real-time.
6. **Add Search Functionality**: Implement search functionality to filter notifications.
7. **Test Responsiveness**: Ensure that the application is fully responsive and adjusts for different screen sizes.
8. **Deploy the Application**: Choose a hosting service (e.g., Vercel, Netlify) for deployment of the web app and set up mobile distribution.

## USER EXPERIENCE
Users will start by logging into the application, where they will be directed to the Notification Hall based on their access level. The interface will allow them to easily navigate through notifications, filter content, and receive updates in real-time. The minimalist design will ensure that users can focus on their tasks without distractions, enhancing overall productivity.