Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
AcademyOS is a modern, interactive web platform designed for Police Academy exam preparation. This MVP focuses on delivering a visually appealing landing experience with an OS-inspired dashboard interface, prioritizing user engagement and a seamless experience as users prepare for their admission exams.

## CORE FEATURES
1. **Top Taskbar / OS Header**: Displays system branding, live clock and date, network status, and a user profile card featuring the cadet's avatar and ranks.
2. **Main Desktop / Hero Window**: Includes a compelling hero banner with a motivational headline and quick-action CTA buttons for upcoming training features.
3. **Exam Countdown Widget**: A dynamic countdown timer that updates to show the time remaining until the next official entrance exam session.
4. **Analytics & Progress Overview Window**: Interactive widgets with circular progress bars showcasing overall readiness, study streaks, and daily study hours.
5. **Subject Curriculum Grid Window**: Cards representing key subjects with status tags, difficulty indicators, and high-tech icons for easy navigation.
6. **Schedule & Announcements Window**: A minimalist timeline widget that highlights key dates such as the medical exam and fitness test.

## 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: A fluid desktop layout featuring a top taskbar, a central hero window, and modular panels for analytics, curriculum, and schedules, all designed to mimic an OS desktop interface.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API for managing user state and progress data

## IMPLEMENTATION STEPS
1. **Set up the Project**: Create a new React project using Create React App with TypeScript. Install Tailwind CSS and configure it for use.
2. **Create Basic Layout**: Implement the overall structure with a top taskbar and main desktop area using Tailwind CSS classes for styling.
3. **Develop the Top Taskbar Component**: Create a component that includes the system branding, clock, user profile, and network status.
4. **Design the Hero Window**: Develop the hero banner component with dynamic text and CTA buttons styled with the primary color.
5. **Implement Interactive Widgets**: Create the analytics and curriculum grid components with progress bars and subject cards, utilizing React state for interactivity.
6. **Build the Schedule Window**: Add a timeline component that displays key dates and announcements related to the Police Academy exams.
7. **Add Responsiveness**: Ensure that the design is fluid and adjusts for mobile screens, providing a simplified taskbar for smaller devices.
8. **Test and Optimize**: Review the application for responsiveness, interactivity, and overall user experience, making adjustments as necessary.

## USER EXPERIENCE
Users will interact with the AcademyOS platform by navigating through the dashboard, where they can view their progress, access study materials, and check upcoming exam dates. The intuitive layout and OS-inspired design create a familiar environment, making it easier for users to focus on their exam preparation. Dynamic elements such as countdown timers and progress indicators will keep users engaged and motivated throughout their study journey.