Add event, gallery, and league data; implement event detail and events pages

- Created eventsData.js with event details including workshops, hackathons, and study groups.
- Developed galleryData.js for event images organized by categories.
- Introduced leaguesData.js for various learning leagues with descriptions and topics.
- Implemented EventDetailPage.jsx to display event details, images, and a modal for image viewing.
- Created EventsPage.jsx to list all events with a modern card layout and loading state.
- Enhanced user experience with loading indicators and error handling for data fetching.

Author: chahatkesh

docs/components/gallery-system.md

@@ -0,0 +1,214 @@
+# Minimal Gallery System Documentation
+
+## Overview
+The OpenLearn Gallery is redesigned with Apple's minimal design philosophy, featuring ultra-clean typography, generous white space, and seamless interactions. The gallery emphasizes content over decoration with a Pinterest-style masonry layout.
+
+## Design Philosophy
+
+### � **Apple Minimal Design**
+- **Pure White Background**: Clean, distraction-free viewing
+- **Generous Spacing**: Breathing room between all elements  
+- **Subtle Interactions**: Gentle hover effects and smooth transitions
+- **Content First**: Images and typography are the heroes
+- **Rounded Corners**: Consistent 24px radius for modern feel
+
+### ✨ **Key Features**
+- **Hero Section**: Large typography with minimal description
+- **Category Filters**: Simple pill-shaped buttons with smooth transitions
+- **Masonry Layout**: Pinterest-style responsive grid
+- **Full-Screen Modal**: Clean image viewer with white background
+- **Smooth Animations**: 60fps performance with easing curves
+
+### 🎨 **Visual Hierarchy**
+- **Typography**: Ultra-large headings (text-8xl) with light weight descriptions
+- **Colors**: Pure whites, soft grays, and deep black for contrast
+- **Spacing**: 24px+ margins and padding throughout
+- **Shadows**: Subtle depth with soft shadow effects
+
+## Technical Implementation
+
+### Data Structure (Simplified)
+```javascript
+// Minimal Gallery Data Schema
+{
+  events: [
+    {
+      id: 'unique-event-id',
+      title: 'Event Name',
+      category: 'Workshop|Hackathon|Study Group|Guest Lecture|Showcase',
+      date: 'YYYY-MM-DD', 
+      description: 'Event description',
+      images: [
+        {
+          id: 'unique-image-id',
+          url: 'image-url',
+          alt: 'accessibility description',
+          caption: 'image caption'
+        }
+      ],
+      featured: boolean,
+      location: 'Event location'
+    }
+  ],
+  categories: [
+    { id: 'category-id', name: 'Category Name' }
+  ]
+}
+```
+
+### Key Components
+
+#### `GalleryHero`
+- **Minimal Header**: Large typography (text-8xl) with single subtitle
+- **No Background Patterns**: Pure white background
+- **Centered Layout**: Maximum focus on typography
+- **Smooth Entry Animation**: Gentle fade-in with custom easing
+
+#### `CategoryFilter`
+- **Pill Buttons**: Rounded-full design with subtle shadows
+- **Active State**: Dark background with scale animation
+- **Hover Effects**: Gentle scaling and background changes
+- **Simplified Categories**: Reduced from 7 to 6 categories
+
+#### `EventCard`
+- **Pinterest Layout**: CSS columns for masonry effect
+- **Large Event Headers**: 4xl typography with generous spacing
+- **Minimal Metadata**: Date and location with subtle icons
+- **Image Grid**: Natural aspect ratios with hover effects
+
+#### `ImageModal`
+- **White Background**: Clean viewing environment
+- **Rounded Corners**: 3xl border radius for modern feel
+- **Subtle Close Button**: Gray background with hover states
+- **Caption Display**: Light typography below image
+
+### Animation Details
+- **Custom Easing**: `[0.16, 1, 0.3, 1]` Apple-style bezier curves
+- **Stagger Timing**: 200ms delays for natural flow
+- **Scale Effects**: Subtle 1.02 scale on hover
+- **Duration**: 400-800ms for smooth interactions
+
+### Layout System
+- **Masonry Grid**: CSS columns for Pinterest-style layout
+  - 1 column on mobile
+  - 2 columns on tablet  
+  - 3 columns on desktop
+  - 4 columns on large screens
+- **Container Width**: max-w-7xl with 6px padding
+- **Image Spacing**: 6px gaps with break-inside-avoid
+
+### Performance Optimizations
+- **Lazy Loading**: Images load as needed
+- **Optimized Images**: Unsplash URLs with quality parameters
+- **Efficient Animations**: GPU-accelerated transforms
+- **Minimal DOM**: Reduced component complexity
+
+## Removed Features (Minimal Approach)
+- ❌ Statistics dashboard
+- ❌ Featured badges  
+- ❌ Background patterns
+- ❌ Color-coded categories
+- ❌ Complex gradients
+- ❌ Orientation events category
+
+## Current Event Categories
+1. **All** - Shows all events
+2. **Workshops** - Educational sessions
+3. **Hackathons** - Coding competitions  
+4. **Study Groups** - Collaborative learning
+5. **Talks** - Guest lectures (simplified name)
+6. **Showcases** - Project demonstrations
+
+## Color Palette (Minimal)
+```css
+/* Pure Minimal Colors */
+--background: #ffffff;
+--text-primary: #111827;     /* gray-900 */
+--text-secondary: #6b7280;   /* gray-500 */  
+--text-tertiary: #9ca3af;    /* gray-400 */
+--surface: #f9fafb;          /* gray-50 */
+--surface-hover: #f3f4f6;    /* gray-100 */
+--border: #e5e7eb;           /* gray-200 */
+```
+
+## Typography Scale
+```css
+/* Large Typography Hierarchy */
+h1: text-8xl (128px) font-bold   /* Hero title */
+h2: text-4xl (36px) font-bold    /* Event titles */
+body: text-lg (18px) font-light  /* Descriptions */
+small: text-sm (14px) font-medium /* Metadata */
+```
+
+## Responsive Breakpoints
+- **Mobile**: < 640px (1 column masonry)
+- **Tablet**: 640px-1024px (2 columns)  
+- **Desktop**: 1024px-1280px (3 columns)
+- **Large**: > 1280px (4 columns)
+
+## Accessibility Features
+- **High Contrast**: WCAG AA compliant color ratios
+- **Large Touch Targets**: 44px minimum button sizes
+- **Keyboard Navigation**: Full modal keyboard support
+- **Screen Reader**: Comprehensive alt text and ARIA labels
+- **Focus Management**: Proper focus trapping in modal
+
+## Browser Support
+- Chrome 90+ ✅
+- Firefox 88+ ✅  
+- Safari 14+ ✅
+- Edge 90+ ✅
+- iOS Safari 14+ ✅
+
+## File Structure
+```
+src/
+├── data/
+│   └── galleryData.js          # Simplified data structure
+├── pages/
+│   └── GalleryPage.jsx         # Minimal gallery component
+└── docs/
+    └── components/
+        └── gallery-system.md   # This documentation
+```
+
+## Adding New Events
+
+### 1. Add to Gallery Data
+```javascript
+{
+  id: 'new-event-2024',
+  title: 'New Workshop',
+  category: 'Workshop',
+  date: '2024-12-01', 
+  description: 'Brief description of the event...',
+  images: [
+    {
+      id: 'img-1',
+      url: 'https://images.unsplash.com/photo-id?w=800&h=600&fit=crop&q=80',
+      alt: 'Descriptive alt text',
+      caption: 'Image caption'
+    }
+  ],
+  featured: false,
+  location: 'Event venue'
+}
+```
+
+### 2. Image Guidelines
+- **Source**: High-quality Unsplash images preferred
+- **Dimensions**: Natural aspect ratios (no fixed sizes)
+- **Quality**: &q=80 parameter for optimized loading
+- **Size**: &w=800&h=600 for consistent quality
+- **Alt Text**: Descriptive accessibility text
+- **Captions**: Brief, meaningful descriptions
+
+## Future Minimal Enhancements
+- [ ] Infinite scroll pagination
+- [ ] Image lazy loading improvements  
+- [ ] Advanced image compression
+- [ ] Gesture navigation in modal
+- [ ] Search functionality
+- [ ] Admin upload interface
+
+The gallery now embodies true Apple minimalism with focus on content, generous white space, and seamless user experience.

public/leagues/cp-cover.jpg

@@ -4,7 +4,8 @@ import LandingPage from './pages/LandingPage'
 import AboutPage from './pages/AboutPage'
 import CohortsPage from './pages/CohortsPage'
 import CommunityPage from './pages/CommunityPage'
-import GalleryPage from './pages/GalleryPage'
+import EventsPage from './pages/EventsPage'
+import EventDetailPage from './pages/EventDetailPage'
 import SignInPage from './pages/SignInPage'
 import SignUpPage from './pages/SignUpPage'
 import DashboardPage from './pages/DashboardPage'
@@ -42,7 +43,10 @@ const App = () => {
         <Route path="/about" element={<AboutPage />} />
         <Route path="/cohorts" element={<CohortsPage />} />
         <Route path="/community" element={<CommunityPage />} />
-        <Route path="/gallery" element={<GalleryPage />} />
+        <Route path="/events" element={<EventsPage />} />
+        <Route path="/events/:eventId" element={<EventDetailPage />} />
+        {/* Backward compatibility - redirect old gallery route */}
+        <Route path="/gallery" element={<Navigate to="/events" replace />} />
         <Route path="/signin" element={<SignInPage />} />
         <Route path="/signup" element={<SignUpPage />} />
         <Route path="/privacy" element={<PrivacyPolicyPage />} />

public/leagues/finance-cover.jpg

@@ -41,7 +41,7 @@ const Navbar = () => {
     { name: 'About', href: '/about' },
     { name: 'Cohorts', href: '/cohorts' },
     { name: 'Community', href: '/community' },
-    { name: 'Gallery', href: '/gallery' },
+    { name: 'Events', href: '/events' },
   ];
 
   const isActivePath = (path) => {