Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with a streamlined profile management experience. It enables users to view their role, navigate to their profile, and log out seamlessly. The application focuses on simplicity and ease of access, allowing users to manage their settings efficiently.

## CORE FEATURES
1. **Clickable Role Display**: Users will see their role prominently displayed on their profile name, which will be clickable, leading to a hover menu.
2. **Hover Menu**: The hover menu will provide quick access options to "My Profile" and "Logout," streamlining user interactions.
3. **My Profile Page**: The current settings page will be converted into a dedicated "My Profile" page, where users can view and edit their personal information.
4. **Responsive Design**: The application will be fully responsive, ensuring an optimal experience across various devices and screen sizes.
5. **User Authentication**: Secure login and logout functionality to protect user data and enhance security.

## 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 layout will feature a clean header with the clickable profile name, followed by the hover menu. The main content area will display the My Profile page with well-organized sections for user information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for handling user authentication state

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: 
   - Develop a `Header` component that includes the clickable role display and hover menu.
   - Create a `Profile` component for the My Profile page, structuring it to display user details.
4. **Implement Hover Menu**: Use CSS and JavaScript to create an interactive hover menu that appears on role click.
5. **User Authentication**: Set up a simple authentication system using the React Context API to manage user login/logout.
6. **Responsive Design**: Ensure that all components are responsive, adapting to different screen sizes using Tailwind CSS utilities.
7. **Testing**: Test the application thoroughly for usability, ensuring all features work as intended and the user experience is smooth.

## USER EXPERIENCE
Users will interact with the application by clicking on their role, which reveals a hover menu with options to navigate to their profile or log out. The My Profile page will allow users to view their information in a structured format, with clear calls to action. The minimalist design ensures that users can focus on their tasks without distractions, enhancing overall usability.