NextGen Innovators Website

A fully functional, responsive multi-user platform for learners, sellers, and buyers.

Features

Homepage (index.html)

• Responsive navigation with mobile menu
• Three user type cards (Sell, Buy, Learn)
• Paint brush background image
• Modal for user type selection
• Footer with app store links
• Font Awesome icons throughout

Authentication Pages

• learner-signup.html - Learner registration with social login
• seller-signup.html - Seller registration with social login
• buyer-signup.html - Buyer registration with social login
• All pages open in new tabs and redirect to respective dashboards
• Loading animations during authentication

Dashboard Pages

• learner-dashboard.html - Document management, courses, certificates
• seller-dashboard.html - Investor connections, funding progress, profile readiness
• buyer-dashboard.html - Financial information form, identity verification
• All dashboards fully responsive with mobile sidebar toggle
• Working navigation between sections
• Interactive buttons and forms

File Structure

NextGen Website/
├── index.html                 # Homepage
├── styles.css                 # Homepage styles
├── script.js                  # Homepage JavaScript
├── learner-signup.html        # Learner authentication
├── seller-signup.html         # Seller authentication
├── buyer-signup.html          # Buyer authentication
├── auth-styles.css            # Authentication page styles
├── auth.js                    # Authentication JavaScript
├── learner-dashboard.html     # Learner dashboard
├── seller-dashboard.html      # Seller dashboard
├── buyer-dashboard.html       # Buyer dashboard
├── dashboard-styles.css       # Dashboard styles
├── dashboard.js               # Dashboard JavaScript
└── Paint Mess Acrylic Colors Painting Brushes.jpg  # Background image

Technologies Used

• HTML5
• CSS3 (Flexbox, Grid, Animations)
• JavaScript (ES6+)
• Font Awesome 6.4.0 (Icons)

Responsive Design

• Desktop: Full layout with sidebar
• Tablet: Adjusted spacing and grid layouts
• Mobile: Collapsible sidebar, stacked layouts, touch-friendly buttons

Interactive Features

Homepage

• Click user cards to open signup pages in new tabs
• Mobile menu toggle
• Signup modal with role selection
• Smooth animations

Authentication

• Social login buttons (Google, Microsoft, X, LinkedIn)
• Loading states during authentication
• Automatic redirect to dashboards

Dashboards

• Sidebar navigation with active states
• Mobile sidebar toggle
• Tab switching
• File upload functionality
• Form validation
• Progress tracking
• Connect with investors
• Document management
• Course viewing
• Real-time notifications

Button Functionality

All buttons are fully functional:

• Navigation links update active states
• Upload buttons trigger file selection
• Connect buttons change state when clicked
• Save buttons show loading and success states
• Form inputs are interactive
• Tab buttons switch content views

Color Scheme

• Learner: Yellow (#eab308)
• Seller: Blue (#3b82f6)
• Buyer: Green (#10b981)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Usage

1. Open index.html in a web browser
2. Click on a user type card (Sell, Buy, or Learn)
3. Sign up page opens in new tab
4. Click any social login button or "Sign Up"
5. Automatically redirects to respective dashboard
6. Explore all dashboard features and navigation

Notes

• All images should be placed in the root directory
• Font Awesome is loaded from CDN
• No backend required - pure frontend implementation
• Ready for integration with backend APIs
• All forms are client-side validated
• Responsive down to 320px width

Future Enhancements

• Backend API integration
• Real authentication system
• Database connectivity
• Payment processing
• Real-time messaging
• Video course streaming
• Advanced analytics
• Multi-language support