A modern, responsive digital learning platform built for Thapar University students.
- Consistent Color Palette: Implemented a comprehensive design system with primary, accent, and semantic colors
- Typography Scale: Standardized font sizes and weights across components
- Component Library: Created reusable UI components with consistent styling
- Custom CSS Variables: Centralized theming with CSS custom properties
- Mobile-First Approach: Completely redesigned for mobile responsiveness
- Flexible Sidebar: Collapsible sidebar that adapts to screen size
- Responsive Grid: Dynamic grid layouts that work on all devices
- Touch-Friendly: Improved touch targets and interactions
- Smooth Animations: Added subtle transitions and hover effects
- Loading States: Beautiful skeleton loading components
- Error Handling: Comprehensive error boundaries and user feedback
- Accessibility: Improved focus states, ARIA labels, and keyboard navigation
- Enhanced Sidebar: Modern collapsible sidebar with active states and icons
- Improved TopBar: Dynamic greeting, user status, and responsive layout
- Better Footer: Comprehensive footer with links, contact info, and social media
- Hero Section: Eye-catching welcome area with user stats
- Quick Stats: Visual indicators for learning progress
- Card Components: Modern course cards with progress indicators
- Empty States: Engaging empty states with clear CTAs
- Modern Cards: Enhanced course cards with hover effects and better information hierarchy
- Loading Components: Smooth skeleton loading states
- Interactive Elements: Better button states and micro-interactions
- Visual Feedback: Improved toast notifications and status indicators
- Tailwind CSS: Extended configuration with custom utilities
- Component Architecture: Better component composition and reusability
- Type Safety: Improved prop handling and error prevention
- Performance: Optimized images and reduced layout shifts
First, run the development server:
npm install
npm run devThe application will be available at http://localhost:3001 (or the next available port).
- Colors: Consistent primary (blue), accent (red), and semantic color scales
- Typography: Poppins and Montserrat font families with defined scales
- Spacing: Consistent spacing scale using Tailwind utilities
- Components: Reusable UI components with proper composition
- Mobile: < 640px (sm)
- Tablet: 640px - 1024px (md/lg)
- Desktop: > 1024px (xl)
- ✅ Fully responsive design
- ✅ Modern, consistent UI
- ✅ Smooth animations and transitions
- ✅ Accessible navigation
- ✅ Loading states and error handling
- ✅ Mobile-optimized experience
Primary: #102c57 (Dark Blue)
Accent: #b52827 (Red)
Success: #38a169 (Green)
Warning: #d69e2e (Yellow)
Error: #e53e3e (Red)Headings: Poppins (Bold)
Body: Poppins (Regular/Medium)
Accent: Montserrat- Adaptive Sidebar: Expands on desktop, overlay on mobile
- Flexible Grid: 1-4 columns based on screen size
- Responsive Images: Optimized for different screen densities
- Touch Interactions: Improved for mobile devices
- CSS-in-JS: Tailwind CSS for optimized styling
- Component Lazy Loading: Efficient component loading
- Image Optimization: Next.js optimized images
- Smooth Animations: Hardware-accelerated transitions
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.