Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is an online training course platform designed for human resources professionals and administrative investigation experts. The platform will host a comprehensive training course that includes all course details and detailed explanations of course terminology. The focus is on providing a clean, minimalist user experience that facilitates learning and interaction.

## CORE FEATURES
1. **Course Overview**: A section that provides a summary of the course, including objectives, target audience, and prerequisites.
2. **Course Modules**: Structured content divided into modules or sections, each containing detailed information and resources relevant to the course.
3. **Interactive Quizzes**: Assessments at the end of each module to test knowledge retention and understanding of the material.
4. **User Registration & Profiles**: Secure user authentication allowing learners to create profiles, track progress, and save their course data.
5. **Feedback and Support**: A feature allowing users to submit feedback or ask questions, with options for instructor responses.
6. **Certificates of Completion**: Automated generation of certificates for users who complete the course, providing a tangible acknowledgment of their achievement.

## 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 header for navigation, a hero section for course promotion, followed by sections for course modules, quizzes, and user feedback, all presented in a single-column format for simplicity and ease of navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if state management across components is needed)

## IMPLEMENTATION STEPS
1. **Setup Environment**: Initialize the project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS for styling, shadcn/ui for UI components, and any necessary libraries for routing and state management.
3. **Create Course Structure**: Develop the main components for the course overview, modules, quizzes, and user profiles.
4. **Implement User Authentication**: Set up user registration and login functionality to manage user profiles and track learning progress.
5. **Add Interactivity**: Integrate quizzes and feedback mechanisms, ensuring users can interact with content effectively.
6. **Design UI Components**: Style each component using Tailwind CSS, adhering to the specified design specifications for a consistent look and feel.
7. **Test Functionality**: Conduct thorough testing to ensure all features work as intended, and the application is responsive across devices.
8. **Deploy the Application**: Choose a hosting solution (e.g., Vercel, Netlify) and deploy the application for public access.

## USER EXPERIENCE
Users will begin their journey on the landing page, where they will find an overview of the course and options to register or log in. Once logged in, they can navigate through the course modules at their own pace, take quizzes to reinforce learning, and provide feedback on their experience. A user-friendly interface with clear navigation will enhance the overall learning experience, ensuring accessibility and engagement throughout the course. The responsive design will guarantee usability across various devices, making learning convenient and effective.