Remix

Make your own version of Learnexa AI

Edit the prompt below and generate a customized version in seconds.

Original by rn5225231

Describe your app

Create a modern, professional, fully responsive AI-powered education and productivity website called “Learnexa AI”.

The website should combine:
1. AI tools
2. Learning platform
3. Notes management
4. Productivity tools

The website design must be:
- Fully responsive for mobile, tablet, and desktop
- Modern glassmorphism UI
- Dark/light mode toggle
- Smooth animations
- User friendly
- Fast loading
- Clean spacing
- Rounded cards and buttons
- Attractive gradients
- Professional typography
- Sticky navbar
- SEO friendly

Use:
- HTML
- CSS
- JavaScript
- React if needed
- Tailwind CSS preferred
- Firebase or MySQL ready backend structure
- Component-based architecture

--------------------------------------------------
MAIN WEBSITE STRUCTURE
--------------------------------------------------

Create these pages:

1. Home Page
2. AI Tools Page
3. Courses Page
4. Course Details Page
5. Dashboard Page
6. Notes Page
7. Login/Register Page
8. Contact Page
9. About Page

--------------------------------------------------
HOME PAGE
--------------------------------------------------

Create a beautiful hero section with:
- Large heading:
  “All-in-One AI Learning Platform”
- Subheading:
  “Generate prompts, create images, convert documents, learn courses, and save notes in one place.”
- CTA buttons:
  “Get Started”
  “Explore Courses”

Add:
- Animated gradient background
- Floating AI icons
- Search bar
- Statistics section
- Testimonials
- Popular tools section
- Featured courses
- FAQ section
- Footer with social links

--------------------------------------------------
NAVBAR
--------------------------------------------------

Sticky responsive navbar with:
- Logo
- Home
- AI Tools
- Courses
- Notes
- Dashboard
- About
- Contact
- Login button
- Dark mode toggle

Mobile navbar should become hamburger menu.

--------------------------------------------------
AI TOOLS PAGE
--------------------------------------------------

Create AI tools cards with hover effects.

Tools:
1. Human to AI Prompt Generator
2. Prompt to Image Generator
3. YouTube Video to Notes Converter
4. AI Resume Generator
5. AI Code Generator
6. Document Converter

Each tool card should have:
- Icon
- Description
- Try Now button
- Modern hover animation

--------------------------------------------------
PROMPT GENERATOR PAGE
--------------------------------------------------

Create:
- Input textarea
- Prompt category dropdown
- Generate button
- AI output area
- Copy button

Categories:
- Social media
- Coding
- Education
- Marketing
- Design

--------------------------------------------------
PROMPT TO IMAGE PAGE
--------------------------------------------------

Create:
- Prompt input
- Image size selector
- Style selector
- Generate button
- Image gallery output

Use modern AI image generation layout similar to Leonardo AI.

--------------------------------------------------
DOCUMENT CONVERTER PAGE
--------------------------------------------------

Create drag-and-drop upload UI.

Allow conversions:
- PDF to DOCX
- DOCX to PDF
- TXT to PDF
- PPT to PDF

Add:
- Upload animation
- Progress bar
- Download button

--------------------------------------------------
YOUTUBE TO NOTES PAGE
--------------------------------------------------

Create:
- YouTube URL input
- Generate Notes button
- Notes output section
- Editable notes area
- Save notes button
- Download notes button

Add:
- Timestamp highlights
- AI summary cards

--------------------------------------------------
COURSES PAGE
--------------------------------------------------

Create beautiful course cards similar to Coursera and Udemy.

Each card contains:
- Course image
- Course title
- Instructor
- Rating
- Duration
- Level
- View Details button

Add:
- Search courses
- Filter by category
- Filter by level

--------------------------------------------------
COURSE DETAILS PAGE
--------------------------------------------------

Show:
- Large course banner
- About course
- Skills learned
- Course modules
- Embedded YouTube videos
- Instructor section
- Reviews
- Enroll button

After clicking enroll:
- Open learning section
- Show YouTube learning video
- Show notes writing section
- Save notes feature

--------------------------------------------------
NOTES PAGE
--------------------------------------------------

Create:
- Rich text editor
- Save notes button
- Download notes
- Delete notes
- Search notes
- Notes cards UI

--------------------------------------------------
DASHBOARD PAGE
--------------------------------------------------

Dashboard should contain:
- User profile
- Completed courses
- Saved notes
- AI usage history
- Recently viewed courses
- Progress charts
- Certificates section

--------------------------------------------------
LOGIN/REGISTER PAGE
--------------------------------------------------

Create modern authentication UI with:
- Email login
- Google login
- Password visibility toggle
- Forgot password
- Smooth animations

--------------------------------------------------
DESIGN REQUIREMENTS
--------------------------------------------------

Use:
- Glassmorphism cards
- Soft shadows
- Smooth hover animations
- Framer motion animations
- Rounded corners
- Gradient buttons
- Responsive grid layouts
- Minimal modern UI

Color palette:
- Dark blue
- Purple gradients
- Cyan accents
- White text

--------------------------------------------------
EXTRA FEATURES
--------------------------------------------------

Add:
- AI chatbot assistant
- Voice search
- Notification system
- Bookmark courses
- Like/save AI outputs
- Loading skeleton animations
- Toast notifications
- Scroll animations

--------------------------------------------------
FOOTER
--------------------------------------------------

Footer should contain:
- Logo
- Quick links
- Social media icons
- Newsletter subscription
- Copyright section

--------------------------------------------------
TECHNICAL REQUIREMENTS
--------------------------------------------------

Make code:
- Clean
- Reusable
- Well organized
- SEO optimized
- Accessible
- Responsive
- Production-ready

Use:
- Lazy loading
- Optimized images
- Smooth transitions
- Proper spacing
- Mobile-first design

Create a premium startup-level UI similar to:
- Coursera
- Notion
- ChatGPT
- Canva
- Leonardo AI
- Duolingo

The final website should look like a real AI startup product.

Free to use. No credit card required.