Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to provide users with the ability to generate and manage reports for their completed online AI courses, including downloadable certificates. The main purpose is to facilitate the creation of visually appealing reports and certificates in a streamlined manner, allowing users to showcase their achievements effectively.

## CORE FEATURES
1. **Course Registration**: Users can register and track their AI courses, including details such as course title, completion date, and instructor information.
2. **Report Generation**: A feature that allows users to generate a professional report summarizing their course details and achievements.
3. **Certificate Creation**: Users can create and download a personalized certificate of completion with customizable fields.
4. **Progress Tracker**: A dashboard that displays the user's progress in ongoing courses and a history of completed courses.
5. **User Authentication**: Secure login and registration functionality to manage user accounts and protect personal data.
6. **Contact & Support**: A section for users to reach out for support, feedback, or additional information regarding their courses.

## 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 layout will consist of a top navigation bar for user navigation, a central content area for displaying reports and certificates, and a footer with contact information and links to resources.

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

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create User Authentication**: Implement user registration and login functionality using Firebase Auth or Auth0.
3. **Design Components**: Build the UI components for the navigation bar, report generation area, and certificate display using Tailwind CSS.
4. **Implement Routing**: Use React Router to manage navigation between different views like the dashboard and report generation.
5. **Integrate State Management**: Setup Redux or Context API to manage the user’s course data and progress.
6. **Build Report Generation Logic**: Create functions to compile course data into a report and format it for display and download.
7. **Test Functionality**: Conduct thorough testing for user flows, report generation, and certificate downloads to ensure a smooth user experience.

## USER EXPERIENCE
Users will begin by registering or logging into their accounts. Once authenticated, they will be directed to their dashboard, where they can view their course progress and initiate report generation. The intuitive interface will guide them through customizing their reports and certificates before allowing them to download or share their achievements. Clear call-to-action buttons and responsive design will ensure optimal usability across devices.