Unlock Your Creative Potential. Master Your Code. - comprehensive, premium e-learning platform website for graphic design (Photoshop) and web...
Generated Prompt
```markdown ## APPLICATION OVERVIEW This project is a comprehensive e-learning platform designed for graphic design (Photoshop) and web development courses. The main purpose is to attract and convert aspiring designers and developers into students by providing high-quality, structured learning experiences within a polished, professional environment. ## CORE FEATURES 1. **Homepage**: Engaging hero section with a strong tagline, clear CTAs for course exploration, and sections highlighting the platform's mission, offerings, and testimonials. 2. **Courses Listing Page**: A dynamic grid of available courses with robust filtering and sorting options to help students find courses that meet their needs. 3. **Course Detail Page**: Detailed information for each course including curriculum, instructor profiles, student reviews, and an easy enrollment process. 4. **User Authentication**: Secure login, signup, and password management through Supabase Auth for user accounts and access to courses. 5. **Student Dashboard**: A personalized area for users to track enrolled courses, progress, and access community features. 6. **Blog Page**: A section for articles related to design and development topics, enhancing SEO and providing additional value to users. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with ample white space, a minimal color palette, and a strong focus on typography. - **Color Mode**: Light theme with dark text on light backgrounds. - **Layout**: A structured, responsive layout with a sticky header for navigation, allowing easy access to key sections. The homepage features a full-width hero, followed by mission, benefits, featured courses, testimonials, and a prominent call-to-action section. - **Typography**: Primary font: Geist Sans for headings and UI elements. Secondary font: Inter for body text, ensuring clarity and readability across all devices. ## TECHNICAL REQUIREMENTS - **Framework**: Next.js 14+ for server-side rendering, SEO optimization, and performance. - **Styling**: Tailwind CSS 3+ for utility-first styling and rapid development. - **UI Components**: Utilize shadcn/ui for consistent and elegant UI design. - **State Management**: React's built-in state management for handling user interactions and application state. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a Next.js project with TypeScript and Tailwind CSS. 2. **Create Core Pages**: Build the homepage, courses listing, course detail, about, testimonials, blog, contact, and authentication pages. 3. **Implement Routing**: Set up dynamic routing for courses and ensure seamless navigation between pages. 4. **Design Components**: Develop reusable components for the hero section, course cards, testimonials, and navigation using Tailwind CSS for styling. 5. **Integrate Supabase**: Set up Supabase for authentication, database management, and API integrations for course data and user profiles. 6. **Add Payment Processing**: Integrate Stripe for secure payment processing and course enrollment. 7. **Implement User Dashboard**: Create a dashboard for users to track their courses, progress, and community interactions. 8. **SEO Optimization**: Ensure all pages are optimized for search engines with proper meta tags, structured data, and fast loading times. ## USER EXPERIENCE The user experience is designed to be intuitive and engaging, with a mobile-first approach. Key interactions include: - **Navigation**: A sticky header that allows easy access to all main sections and pages. - **Course Discovery**: A user-friendly course listing page with functional filters and sorting options to help users find suitable courses. - **Enrollment Process**: A straightforward enrollment process with clear CTAs and secure payment integration. - **Community Interaction**: A dashboard feature encouraging users to engage with fellow students, potentially through forums or chat functionalities. The entire site should exude professionalism and sophistication, inviting users to explore and invest in their learning journey. ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
