Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is an online paid course application designed to provide users with access to various educational courses. The application will focus on delivering a clean and user-friendly interface, allowing users to easily navigate through available courses, enroll, and track their progress.

## CORE FEATURES
1. **Course Catalog**: A comprehensive list of available courses with brief descriptions, images, and pricing information.
2. **User Authentication**: Secure login and registration processes for students to manage their accounts and enroll in courses.
3. **Course Enrollment**: Seamless enrollment process for users to purchase and access courses.
4. **Progress Tracking**: A dashboard for users to track their course progress and completed lessons.
5. **Payment Integration**: Secure payment processing for course purchases using popular payment gateways.
6. **Feedback System**: Allow users to leave reviews and ratings for courses they have completed.

## 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, a hero section displaying featured courses, a grid layout for course listings, a footer with contact information and links to social media, and a responsive design for optimal viewing on all devices.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: Build reusable components such as Header, Footer, CourseCard, and ProgressTracker.
4. **Implement Routing**: Use React Router to set up different routes for the course catalog, user profile, and course detail pages.
5. **Add Authentication**: Implement authentication using a library like Firebase or Auth0, including login and registration forms.
6. **Integrate Payment Gateway**: Set up a payment processor (like Stripe) to handle course purchases.
7. **Develop Course Features**: Create features for users to browse, enroll, and track their courses.
8. **Testing**: Perform unit and integration testing to ensure all components work as intended.

## USER EXPERIENCE
Key user interactions include a smooth onboarding process where users can easily register or log in, browse the course catalog with filters, enroll in courses with a straightforward checkout process, and monitor their learning progress through an intuitive dashboard. The design prioritizes usability, ensuring that all necessary information is accessible without clutter, enhancing overall user satisfaction.