Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The GateStudyPlanner is a web application designed to help students prepare for the GATE exam with a structured 12-month study plan. It provides a comprehensive overview of monthly topics, learning materials, and practice tasks, allowing users to track their progress and milestones efficiently.

## CORE FEATURES
1. **Monthly Study Plan**: Users can view a detailed month-by-month breakdown of study topics, learning materials, and practice milestones.
2. **Task Completion Tracking**: Mark tasks as completed for each week, providing a visual indication of progress through checkboxes.
3. **CSV Download**: Users can download their study plan in CSV format for external tracking and analysis.
4. **Progress Visualization**: The application displays completion percentages for the current month, helping users stay motivated and focused on their goals.
5. **Responsive Design**: The interface is optimized for both desktop and mobile devices to enhance accessibility and usability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring readability and comfort during extended study sessions.
- **Layout**: 
  - A header section with the title and download button.
  - A horizontal tab navigation for monthly selection.
  - A main content area displaying month details, including weekly topics, tasks, and progress visualization.
  - A footer section with quick stats and a motivational note.
- **Typography**: 
  - Primary font: Sans-serif (e.g., Inter or Arial).
  - Font sizes: Large for headings (h1, h2), medium for subheadings (h3, h4), and small for body text, with appropriate line heights for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: Utilizing `shadcn/ui` for consistent and modern UI components.
- **State Management**: React's built-in state management (useState) for managing task completion and active month states.

## IMPLEMENTATION STEPS
1. **Set Up the Project**:
   - Initialize a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Set up `shadcn/ui` for UI components.
   
2. **Create the Main Application Structure**:
   - Develop the `GateStudyPlanner` component with the necessary state hooks for managing the study plan and completed tasks.
   - Implement the structure for the header, month tabs, and main content area.

3. **Implement Core Features**:
   - Create a function for toggling task completion and updating the state.
   - Build the CSV download functionality.
   - Implement the progress visualization using a progress bar.

4. **Design and Style the Application**:
   - Apply Tailwind CSS classes to create a clean, minimalist design.
   - Ensure responsive design for different screen sizes.

5. **Testing and Validation**:
   - Test the application on various devices to ensure responsiveness and functionality.
   - Validate that all features work as expected and that the user experience is smooth.

## USER EXPERIENCE
Users will interact with the application by selecting a month from the tab navigation, which updates the content area to display relevant week details. They can mark tasks as completed with checkboxes, immediately reflecting their progress. The completion percentage and progress bar provide visual feedback, while the option to download the study plan as a CSV encourages users to take their learning offline. Quick stats at the bottom summarize the overall plan, motivating users to adhere to their study schedules. The minimalist design ensures that users can focus on their studies without distractions.