Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
TELAR is a web application designed to guide artisans through a structured journey of growth and development. It provides an intuitive UI that facilitates learning and progress tracking, ensuring even those with low digital literacy can navigate easily and effectively.

## CORE FEATURES
1. **Welcome Screen**: A friendly introduction to TELAR, providing a clear overview and inviting users to begin their journey.
2. **Artisan Maturity Test**: A simple, interactive questionnaire designed to assess the artisan's current skills and knowledge level.
3. **Diagnostic Results**: A straightforward presentation of the test results, offering personalized insights into the artisan's strengths and areas for improvement.
4. **Dashboard**: A visual map of the artisan's journey, highlighting completed steps and the next recommended actions, enhancing navigation and progress tracking.
5. **Next Steps Recommendation**: Clear, actionable guidance tailored to the artisan's specific needs based on their diagnostic results.
6. **Motivational Microcopy**: Thoughtfully crafted text throughout the application to encourage and support users, ensuring a warm and friendly tone.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean and organized layout, prioritizing usability and accessibility through ample white space and a simple color palette.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability.
- **Layout**: A card-based layout for dashboard elements, ensuring clarity and separation of information. Key screens should follow a consistent structure with clear navigation paths.
- **Typography**: Use of a modern sans-serif font (e.g., Inter or Roboto) for body text, with larger, bolder type for headings to establish a clear visual hierarchy. Ensure ample line spacing for improved readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
- **Styling**: Tailwind CSS for rapid styling and responsiveness, enabling a clean and modern aesthetic.
- **UI Components**: Utilize shadcn/ui for ready-to-use components that align with the minimalist design.
- **State Management**: Use React context or Zustand for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Core Components**: Develop the main components for the Welcome Screen, Artisan Maturity Test, Diagnostic Results, Dashboard, and Next Steps Recommendation.
3. **Design Layout**: Implement a card-based layout for the Dashboard and ensure consistent spacing and alignment across all screens.
4. **Integrate State Management**: Set up React context or Zustand to manage user data and progress throughout the application.
5. **Implement Microcopy**: Write and integrate motivational microcopy across various screens to enhance user engagement.
6. **Testing**: Conduct usability testing with target users to gather feedback and make adjustments based on their experiences.

## USER EXPERIENCE
Key user interactions should be straightforward and guided, ensuring that artisans feel supported throughout their journey. The Welcome Screen should be inviting, leading directly into the Artisan Maturity Test. After completing the test, users will receive their results in an easily digestible format on the Diagnostic Results screen. The Dashboard will serve as the central hub, visually indicating their progress and suggesting next steps in a clear and encouraging manner. Throughout the experience, users will encounter helpful microcopy that reinforces their capabilities and guides them gently along their path to growth.