Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to teach users how to effectively use artificial intelligence through an engaging and interactive game format. Similar to platforms like Duolingo or Brilliant, it operates on a subscription model, providing monthly access to learning modules that enhance users' understanding of AI concepts and applications.

## CORE FEATURES
1. **Interactive Learning Modules**: Users can navigate through different topics related to AI, with engaging quizzes and challenges to reinforce learning.
2. **Subscription Management**: A seamless system for users to manage their subscriptions, including monthly payments and renewal options.
3. **Progress Tracking**: Users can view their learning progress, achievements, and areas for improvement through a personalized dashboard.
4. **Community Forum**: A space for users to discuss topics, ask questions, and share insights with fellow learners.
5. **Gamification Elements**: Leaderboards, badges, and rewards to motivate users and enhance engagement through friendly competition.
6. **Feedback Mechanism**: Users can provide feedback on modules to continuously improve the learning experience.

## 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 main layout will consist of a top navigation bar with links to modules, a central content area displaying the current learning module or dashboard, and a sidebar for progress tracking and community discussions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API as needed for managing user data and application state.

## IMPLEMENTATION STEPS
1. **Set up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**: Build components for the navigation bar, learning modules, progress dashboard, and community forum.
3. **Implement Routing**: Use React Router to set up navigation between different sections of the application.
4. **Develop Learning Modules**: Create interactive quizzes and challenges using React components, ensuring they are engaging and user-friendly.
5. **Set Up Subscription Management**: Integrate a payment system for subscription handling, using a service like Stripe for secure transactions.
6. **Implement State Management**: Set up Redux or Context API to manage user authentication, subscription status, and progress tracking.
7. **Design Responsive Layout**: Ensure the application is responsive across devices, utilizing Tailwind CSS for layout adjustments.
8. **Testing**: Conduct thorough testing for usability, functionality, and performance before launch.

## USER EXPERIENCE
Users will start their journey by signing up and selecting a subscription plan. Once logged in, they will be greeted with a dashboard displaying their current progress and available learning modules. Users can navigate through interactive modules, track their progress, and engage with the community forum to enhance their learning experience. The gamification elements will provide incentives for users to return and keep learning, creating a fun and motivational atmosphere.