Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
EduEnroll is a web application designed as a professional university-grade Learning Management System (LMS) that automates course registration and facilitates secure digital curriculum delivery. The platform enables students to discover courses, apply for seats, and access proprietary content after manual faculty approval, creating a high-trust environment for academic engagement.

## CORE FEATURES
1. **Landing Page**: A visually appealing hero section that introduces EduEnroll, followed by a clear "How it Works" section detailing the enrollment process (Enroll -> Approve -> Learn) and showcasing university statistics.
2. **Auth Portal**: A professional login/signup interface with centered cards for user authentication, providing easy access to student and faculty dashboards.
3. **Student Dashboard**: A user-friendly dashboard allowing students to toggle between their "Enrolled" (Active) and "Applied" (Pending) courses, enhancing navigation and user experience.
4. **Course Catalog**: A searchable grid layout displaying available courses with live counters for "Seats Remaining," allowing students to make informed enrollment decisions.
5. **Classroom (The Gate)**: A split-screen view for lesson access, featuring a sidebar for lesson navigation and a PDF/video player that is only accessible to students with 'approved' status.
6. **Profile Management**: A dedicated page for users to update their personal information including name, bio, and profile picture, ensuring a personalized 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 structured flow starting from the landing page, leading to the auth portal, and subsequently to the student dashboard where users can access the course catalog, classroom, and profile management features.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API for handling state across the application.

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize a new React project using Create React App with TypeScript. Install Tailwind CSS and set it up for styling.
2. **Create the Landing Page**: Design the hero section with a brief introduction to EduEnroll and the enrollment process. Include statistics and a call-to-action for users to register.
3. **Develop the Auth Portal**: Implement the login and signup components using centered cards for a professional appearance. Ensure form validation and error handling are included.
4. **Build the Student Dashboard**: Create components for displaying enrolled and applied courses using toggle functionality. Ensure the dashboard is responsive and user-friendly.
5. **Implement the Course Catalog**: Develop a searchable grid layout for courses, with live updates for available seats. Integrate API calls to fetch course data.
6. **Design the Classroom Interface**: Create a split-screen view for lesson content, ensuring that access is restricted based on user approval status. Implement the PDF/video player component.
7. **Set Up Profile Management**: Develop a profile management page where users can update their information and upload a profile picture.
8. **Integrate State Management**: Implement routing and state management to handle user roles (students and faculty) and navigate between different sections of the application seamlessly.

## USER EXPERIENCE
EduEnroll provides a seamless user experience by guiding students through a clear enrollment process. The intuitive interface allows easy navigation between sections, with a focus on accessibility and responsiveness. Students can quickly find and apply for courses, manage their profiles, and access learning materials, all while enjoying a clean and professional design that reflects the premium academic environment.