Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for "Academia Creativa" Online Course Platform

## APPLICATION OVERVIEW
"Academia Creativa" is a comprehensive online course platform designed to offer a variety of courses in graphic design, branding, illustration, Notion. The platform aims to provide users with high-quality educational resources while ensuring a premium and modern user experience. It will include features for course browsing, user engagement, and administrative functionalities.

## CORE FEATURES
1. **Landing Page**: A visually appealing landing page featuring course highlights, testimonials, and a call-to-action for sign-ups.
2. **Course Catalog**: A searchable and filterable course catalog displaying various courses along with detailed information and pricing.
3. **Course Detail Page**: A dedicated page for each course providing detailed insights, instructor information, and a purchase option.
4. **User Dashboard**: A personalized dashboard for enrolled students to track progress, access certificates, and continue courses.
5. **Admin Dashboard**: A management interface for administrators to oversee student registrations, course offerings, and financial metrics.

## 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 application will utilize a responsive grid layout for course listings and a two-column layout for detail pages, ensuring a seamless experience across different devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React's built-in state management.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Folder Structure**: Organize folders for components, pages, and styles.
3. **Build Landing Page**: Implement the landing page with a sticky navbar, hero section, course catalog, testimonials, and a CTA banner.
4. **Develop Course Detail Page**: Create a detailed view for each course, including modules and learning outcomes.
5. **Implement User Dashboard**: Create a dashboard for users to view their course progress and certificates.
6. **Design Admin Dashboard**: Build an admin interface to manage users, courses, and financial data.
7. **Ensure Responsiveness**: Utilize Tailwind CSS to ensure the application is mobile-friendly.
8. **Add Mock Data**: Use hardcoded mock data for courses, testimonials, and user profiles.
9. **Test Functionality**: Verify that all parts of the application work as intended and refine based on feedback.

## USER EXPERIENCE
Users will begin at the landing page, where they can browse courses and testimonials, sign up, or log in. Upon logging in, they will access their dashboard to view enrolled courses and progress. Admin users will utilize their dashboard to manage courses and students efficiently. Each interaction is designed to be intuitive, ensuring that users can easily navigate between sections, access course content, and track their learning journey.

---

This prompt provides a comprehensive overview and structured guidance for developing the "Academia Creativa" online course platform, ensuring alignment with the user's vision and design specifications.