feat: Enhance LeaguesCarousel with responsive design, detailed league information, and improved styling

Author: chahatkesh

docs/components/league-display-enhancement.md

@@ -0,0 +1,89 @@
+# League Display Enhancement
+
+## Overview
+The LeaguesCarousel now displays detailed information about each league including starting dates and facilitating organizations.
+
+## Updated League Data Structure
+
+Each league now includes:
+```javascript
+{
+  id: 'league-id',
+  name: 'League Name',
+  title: 'Full League Title',
+  description: 'League description...',
+  cover: '/path/to/cover.jpg',
+  color: '#HEX_COLOR',
+  startingDate: 'DD Month YYYY',     // NEW
+  facilitatedBy: 'Organization Name'  // NEW
+}
+```
+
+## Current League Schedule
+
+### 📚 **Soft Skills League**
+- **Starting:** 28 August 2025
+- **Facilitated by:** Zeal Society
+- **Focus:** Communication, leadership, and interpersonal skills
+
+### 💰 **Finance League**
+- **Starting:** 30 August 2025
+- **Facilitated by:** Fnnest NITJ
+- **Focus:** Financial literacy and investment strategies
+
+### 💻 **Competitive Programming League**
+- **Starting:** 1 September 2025
+- **Facilitated by:** Coding Club
+- **Focus:** Algorithmic thinking and problem-solving
+
+### 🤖 **Machine Learning League**
+- **Starting:** 2 September 2025
+- **Facilitated by:** OpenLearn
+- **Focus:** ML algorithms and AI applications
+
+### ⚛️ **Quantum Computing League**
+- **Starting:** 5 September 2025
+- **Facilitated by:** QMania
+- **Focus:** Quantum algorithms and computational science
+
+### 🌐 **Internet of Things League**
+- **Starting:** 7 September 2025
+- **Facilitated by:** Electronics Society
+- **Focus:** Connected devices and smart systems
+
+## Visual Display Features
+
+### Card Layout
+Each league card now shows:
+1. **League Badge** (top-left with color coding)
+2. **Title & Description** (main content area)
+3. **League Details Section** (new addition):
+   - 📅 **Starting Date** (highlighted in league color)
+   - 👥 **Facilitated By** (organization name)
+4. **Call-to-Action Button**
+
+### Responsive Design
+- **Mobile:** Compact layout with smaller text and icons
+- **Tablet/Desktop:** Full-size layout with enhanced spacing
+- **Visual Icons:** Calendar and people emojis for better UX
+
+### Styling Enhancements
+- Subtle border separator for league details
+- Color-coded starting dates matching league themes
+- Consistent typography hierarchy
+- Touch-friendly sizing for mobile devices
+
+## Usage Example
+
+The carousel automatically displays all league information:
+```jsx
+<LeaguesCarousel />
+```
+
+No additional props needed - all data is pulled from `leaguesData.js`.
+
+## Benefits
+- **Clear Schedule Visibility** - Users can see when leagues start
+- **Organization Recognition** - Credits facilitating societies
+- **Better Decision Making** - More information helps users choose
+- **Professional Presentation** - Enhanced visual hierarchy

docs/components/leagues-carousel-enhancement.md

@@ -0,0 +1,73 @@
+# LeaguesCarousel Component - Responsive Enhancement
+
+## Overview
+The LeaguesCarousel component has been significantly enhanced for better responsiveness and user experience across all device types.
+
+## Key Improvements
+
+### 📱 Mobile Responsiveness
+- **Adaptive Layout**: Cards switch from horizontal to vertical layout on mobile devices
+- **Touch Gestures**: Full swipe support for natural mobile navigation
+- **Optimized Sizing**: Smaller text, padding, and spacing for mobile screens
+- **Hidden Arrow Navigation**: Cleaner interface on mobile with touch-only navigation
+- **Mobile-First Design**: Responsive breakpoints and mobile-optimized interactions
+
+### 🖥️ Desktop & Tablet Experience
+- **Enhanced Arrow Navigation**: Improved positioning and hover effects
+- **Keyboard Support**: Arrow key navigation for accessibility
+- **Smooth Animations**: Refined transitions and micro-interactions
+- **Better Visual Hierarchy**: Improved typography and spacing scaling
+
+### ♿ Accessibility Improvements
+- **ARIA Labels**: Comprehensive labeling for screen readers
+- **Keyboard Navigation**: Full keyboard support with arrow keys
+- **Focus Management**: Proper focus indicators and management
+- **Role Attributes**: Semantic HTML with proper ARIA roles
+
+### 🎨 Visual Enhancements
+- **Custom CSS Module**: Dedicated styling for enhanced performance
+- **Loading States**: Responsive loading indicators
+- **Smooth Transitions**: Enhanced animations with cubic-bezier easing
+- **Hover Effects**: Improved interactive feedback
+
+## Technical Features
+
+### Responsive Breakpoints
+- **Mobile**: < 768px - Vertical layout, touch navigation
+- **Tablet**: 768px - 1023px - Hybrid layout with optimized spacing
+- **Desktop**: > 1024px - Full horizontal layout with all features
+
+### Touch Interaction
+- **Swipe Detection**: Minimum 50px swipe distance for activation
+- **Touch Prevention**: Prevents accidental activations
+- **Smooth Gestures**: Natural iOS/Android-like swipe behavior
+
+### Performance Optimizations
+- **CSS Module**: Scoped styles for better performance
+- **Efficient Re-renders**: Optimized state management
+- **Lazy Loading**: Efficient image handling with fallbacks
+- **Smooth Scrolling**: Hardware-accelerated animations
+
+## Usage
+
+The component automatically detects screen size and adjusts its behavior accordingly:
+
+```jsx
+<LeaguesCarousel />
+```
+
+## Browser Support
+- ✅ Modern browsers (Chrome, Firefox, Safari, Edge)
+- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
+- ✅ Touch devices and desktop
+- ✅ Keyboard navigation
+
+## Files Modified
+- `LeaguesCarousel.jsx` - Main component with responsive logic
+- `LeaguesCarousel.module.css` - Custom styles and responsive utilities
+
+## Future Enhancements
+- Multi-card display on ultra-wide screens
+- Intersection Observer for performance
+- Prefers-reduced-motion support
+- Advanced gesture recognition

src/components/dashboard/WelcomeBanner.jsx

@@ -30,9 +30,6 @@ const WelcomeBanner = ({ user, onExploreClick }) => {
           {/* Compact Feature Pills */}
           <div className="flex flex-wrap gap-3 mb-4">
             <div className="flex items-center gap-2 bg-white/30 backdrop-blur-sm rounded-full px-4 py-2 border border-white/40">
-              <div className="w-6 h-6 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
-                <BookOpen className="text-white" size={12} />
-              </div>
               <span className="text-sm font-medium text-gray-800">Learn at Your Pace</span>
             </div>