Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The "CBT Premium" web application is an interactive learning platform designed for individuals preparing for the real estate agent certification exam. It focuses on providing personalized study experiences with features that simulate an exam environment, enhancing user engagement and retention through tailored learning paths and AI assistance.

## CORE FEATURES
- **CBT Practice Tests**: Access to past exam questions in a simulated test environment, allowing users to practice under real exam conditions.
- **Random Mock Exams**: Generate random tests to help users assess their knowledge and get accustomed to various question formats.
- **Unlimited Subject Practice**: Users can practice an unlimited number of questions across various subjects, helping to solidify their understanding.
- **AI Explanations**: After answering questions, users receive AI-generated explanations to enhance their learning and understanding of concepts.
- **Weakness Analysis**: The app analyzes user performance to identify weak areas and suggests targeted practice sessions.
- **Progress Tracking**: Users can monitor their study streaks, upcoming exam dates, and receive daily learning path recommendations.

## 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 desktop layout will utilize a left sidebar for navigation, while the mobile layout will feature a bottom tab bar for easy access to key sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand for efficient state management and local storage handling.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install necessary libraries (React Router, Tailwind CSS, Zustand).
2. **Create the main layout**: Implement the left sidebar for desktop and bottom tab bar for mobile, ensuring responsive design.
3. **Develop core components**:
   - Dashboard: Include greeting messages, performance metrics, and quick access buttons.
   - Exam Selection Screen: Allow users to choose between different test formats clearly.
   - Exam Interface: Design the question interface with a timer and submission functionality.
   - Results Screen: Present results clearly, highlighting scores and areas for improvement.
   - Subject Practice: Create a card interface for subject selection with immediate feedback on answers.
   - Incorrect Answers Notebook: Develop a review section for incorrect answers with filtering options.
   - Analysis Screen: Implement a visual representation of performance trends and patterns.
   - Subscription Plans: Design an upgrade screen with clear distinctions between Free, Basic, and Pro plans.
4. **Integrate AI functionality**: Use an AI API to provide explanations and generate questions dynamically.
5. **Test the application**: Conduct thorough testing to ensure that all features work seamlessly across devices.

## USER EXPERIENCE
Users will experience a streamlined onboarding process, leading them directly to a personalized dashboard upon login. They can seamlessly transition between practice tests, review results, and analyze their performance trends. The application will maintain a focus on user engagement through timely notifications, progress tracking, and motivational insights, ensuring users feel supported as they prepare for their certification exams.