Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based portfolio showcasing educational work related to the employee lifecycle. It allows users to interactively explore various stages of the lifecycle, view completed projects, and filter content based on specific populations and contributors, providing a clear and engaging experience.

## CORE FEATURES
1. **Interactive Lifecycle Stages**: Users can select different stages of the employee lifecycle (e.g., recruitment, onboarding, development, retention) to view relevant projects and contributions.
2. **Population Filters**: Allows users to filter the showcased work based on specific populations (e.g., new hires, management) to tailor the displayed content.
3. **Contributor Profiles**: Users can click on individual contributor or leader profiles to see their specific contributions and projects, allowing for deeper insights into team efforts.
4. **Project Showcase**: A visual grid or list that displays projects associated with each lifecycle stage, including descriptions, images, and links to further details.
5. **Responsive Design**: Ensures a seamless experience across devices, adapting layouts for mobile, tablet, and desktop views.
6. **User Feedback Mechanism**: An option for visitors to provide feedback or comments on showcased projects, fostering engagement and interaction.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing clean lines, ample white space, and a focus on typography to enhance readability and user experience.
- **Color Mode**: A light theme featuring dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: Utilize a simple grid layout for the project showcase, with a sidebar for lifecycle stages and population filters. The header will include a navigation bar for easy access to different sections of the portfolio.
- **Typography**: Use a sans-serif font (e.g., Inter or Roboto) for body text, with a larger, bold font for headings. Maintain a clear hierarchy with appropriate font sizes and weights.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling, ensuring a responsive and adaptive layout.
- **UI Components**: Utilize shadcn/ui for pre-built components to speed up development and maintain consistency.
- **State Management**: Implement React Context API or Redux for managing application state as needed.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the layout**: Develop the main layout structure, including the header, sidebar, and content area using Tailwind CSS.
3. **Implement lifecycle stages**: Create a component for displaying the lifecycle stages and enable interaction to filter showcased projects.
4. **Build the project showcase**: Design a grid or list component that dynamically displays projects based on the selected lifecycle stage and filters.
5. **Develop contributor profiles**: Create a detailed view for contributor profiles, allowing users to click through from projects to see individual contributions.
6. **Add user feedback**: Implement a simple feedback form that users can fill out, linking it to the relevant projects for context.
7. **Ensure responsiveness**: Test and refine the layout for various screen sizes to ensure a consistent user experience across devices.

## USER EXPERIENCE
Users will land on a clean homepage with a prominent header and sidebar for interaction. They will select a lifecycle stage, which dynamically updates the project showcase. Users can filter content by population, click on contributor profiles for more information, and leave feedback on projects. The overall experience will be intuitive, allowing users to navigate easily and engage with the content presented.