Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an all-in-one employee portal designed as a web application to facilitate seamless company communication. It will serve as a central hub for employees to access important information, communicate with colleagues, and manage various tasks related to their work environment.

## CORE FEATURES
1. **User Authentication**: Secure login and role-based access for employees and administrators to ensure data safety and personalized experiences.
2. **Company Announcements**: A dedicated section for posting company news and updates, ensuring all employees are informed.
3. **Internal Messaging System**: A real-time chat feature that allows employees to communicate easily with colleagues and teams.
4. **Document Management**: A centralized repository for important documents, policies, and resources that employees can easily access.
5. **Event Calendar**: A shared calendar that displays upcoming company events, meetings, and deadlines, helping employees stay organized.
6. **Feedback System**: A feature that allows employees to submit feedback or suggestions regarding workplace improvements.

## 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 consist of a top navigation bar, a sidebar for quick access to features, and a content area for displaying main functionalities. The design will prioritize responsiveness and easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React Context or a state management library like Redux if necessary for global state handling.

## IMPLEMENTATION STEPS
1. **Set Up the React Project**: Initialize a new React project with TypeScript and install necessary dependencies (`tailwindcss`, `shadcn/ui`, etc.).
2. **Design Layout Structure**: Create a basic layout with a responsive navigation bar and sidebar using Tailwind CSS for styling.
3. **Implement User Authentication**: Set up a login page with form validation and integrate authentication logic.
4. **Create Core Features**: Develop the main features (announcements, messaging, document management, event calendar, and feedback system) as separate components.
5. **Integrate State Management**: If using Redux or Context, implement the global state management for handling user data and application state.
6. **Responsive Design Testing**: Ensure all components are responsive and function well on various screen sizes.
7. **Deployment Preparation**: Prepare the application for deployment by optimizing assets and ensuring code quality.

## USER EXPERIENCE
Key user interactions will include a smooth login process, intuitive navigation through the sidebar, quick access to the messaging system, and easy retrieval of documents. The event calendar will allow users to click on events for more details, while the feedback system will enable one-click submission of suggestions. Overall, the application will focus on providing a seamless and engaging experience for employees, encouraging communication and collaboration within the organization.