Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based RoadMap tool designed to facilitate project management by allowing users to define project phases, track progress, and share ideas. Team members can mark phases as "done," "need to improve," or "stuck," while also contributing their thoughts and suggestions, ensuring seamless collaboration and transparency.

## CORE FEATURES
1. **Project Phases Management**: Create, edit, and delete project phases with status indicators (done, need to improve, stuck) to visualize project progress.
2. **Team Member Contributions**: Each team member can submit their intentions, prompts, and ideas related to the project phases, fostering a collaborative environment.
3. **Progress Tracking**: Visual indicators for each phase to quickly assess the overall status of the project, enhancing clarity for all stakeholders.
4. **User Profiles**: Create profiles for each team member that display their contributions and updates, promoting accountability and recognition.
5. **Commenting System**: Allow team members to comment on each other's submissions, encouraging discussion and idea refinement.
6. **Notification System**: Notify users of updates or changes to phases and contributions to keep everyone informed.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, emphasizing clean lines and an uncluttered interface with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and easy readability.
- **Layout**: A single-page layout featuring a sidebar for phase navigation and a main content area that displays the selected phase's details, contributions, and comments. The layout should be responsive, adjusting seamlessly to different screen sizes.
- **Typography**: Use a modern sans-serif font like Inter or Roboto for body text, with larger, bold headings to create a clear hierarchy. Maintain consistent font sizes and weights for better readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid UI development and consistent design.
- **UI Components**: Utilize shadcn/ui for pre-built components that adhere to the minimalist design principles.
- **State Management**: Consider using React Context or Zustand for managing the application state, especially for user contributions and phase management.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install required dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create the Layout**: Design the overall layout with a responsive sidebar for navigation and a main content area.
3. **Build Core Components**: Develop components for project phases, contributions, and user profiles, ensuring they adhere to the minimalist aesthetic.
4. **Implement State Management**: Set up state management for phases, contributions, and user profiles, ensuring real-time updates across the application.
5. **Integrate Notifications**: Implement a notification system to alert users of changes or new contributions.
6. **Testing & Feedback**: Conduct user testing to gather feedback on usability and adjust design elements based on user experience.

## USER EXPERIENCE
Users will have a straightforward interaction flow: Upon logging in, they will see the project phases in the sidebar. Clicking on a phase displays its details in the main content area, including status indicators and contributions. Users can easily update the phase status, add new ideas, and comment on others' contributions, ensuring an intuitive and collaborative experience. The clean design allows users to focus on project management without distractions.

i will provide the roadmap just design it from a to z and make it look proffesional
and add a tab for Prompts + Button and Prompt for > Description of the prompt > the Propmt itself