Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
The application is a web-based interactive team dashboard component titled "Team Glide Path & Progression Roadmap". Its main purpose is to visually represent the learning journey and progression paths for team members, outlining their current roles, target roles, and required training in a clean and modern format.

# CORE FEATURES
1. **Interactive Progression Paths**: Displays 5 ascending steps for each team member, illustrating their current and target roles along with required training.
2. **Dynamic Resource Badge**: A badge in the top right corner lists necessary resources for roles, updating automatically as roles change.
3. **Hover Effects**: Each team member’s path block subtly scales up on hover, enhancing interactivity and engagement.
4. **Visual Anchors**: Circular badges with relevant icons for each step, representing strategic elements of the roles.
5. **Responsive Design**: The layout adjusts seamlessly across different screen sizes, ensuring usability on both desktop and mobile 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 layout features a centered header and interconnected ascending paths for each team member, with a clear visual hierarchy and sufficient white space around each element.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive and utility-first design.
- **UI Components**: shadcn/ui for streamlined component management.
- **State Management**: Not specified, but consider using React Context or Redux if necessary for managing app state.

# IMPLEMENTATION STEPS
1. Set up a new React project with TypeScript and install Tailwind CSS to enable utility-first styling.
2. Create a main component for the "Team Glide Path & Progression Roadmap" and structure the layout with a header and progression paths.
3. Implement the header with the main title, subtitle, and resource badge using Tailwind CSS for styling.
4. Design the progression paths using a flexbox or grid layout in React, ensuring each step is a separate component to allow for scalability.
5. Add hover effects to each path block using Tailwind's transition classes to achieve the scaling effect.
6. Incorporate icons for the visual anchors using an icon library such as Font Awesome or Material Icons.
7. Ensure responsiveness by testing the layout on various screen sizes and adjusting styles with Tailwind's responsive utilities.
8. Test the entire application for interactivity, ensuring that all elements display correctly and the hover effects function as intended.

# USER EXPERIENCE
Users will interact with the dashboard by viewing the progression paths of their team members, which are clearly defined and visually engaging. Each team member's current and target roles, along with required training, will be easily accessible. The hover effects will provide a tactile experience, encouraging exploration of each pathway, while the responsive design will ensure usability across different devices. Overall, the user experience will focus on clarity, simplicity, and effective visualization of team progression.