Ai hacksdays/card

What does this MR do and why?

This MR implements the complete AI HackDays feature with dynamic data fetching from the Strapi backend. It includes a project showcase page with summary statistics (total teams, participants, colleges), a project gallery with responsive cards, and a detailed project modal view.

Key Features Implemented:

• Summary Statistics Section: Displays total teams, participants, and unique colleges in clean card-based UI
• Project Gallery: Responsive grid layout showcasing all hackday projects
• Project Cards: Dark-themed cards with team name, college, members, and demo links
• Project Modal: Detailed view with full team member list and external project links
• API Integration: Fetches data from Strapi endpoint /ai-hack-days-projects
• Error Handling: Loading states, error messages, and retry functionality

Why this change?

• Provides a quick overview of hackathon participation metrics
• Improves user experience with clear summary metrics and project showcase
• Replaces static values with dynamic backend data
• Keeps UI modular using reusable components
• Follows clean frontend practices with proper state management

References

• Related feature: AI HackDays Page
• Backend: Strapi API integration (ai-hack-days-projects)
• Based on mentor guidance for dynamic data rendering

Screenshots or screen recordings

Before

• Summary cards showing static values (0)
• No backend integration
• No project gallery
• 

After

• Summary cards display dynamic values (Teams, Participants, Colleges)
• Data fetched from Strapi API
• Complete project gallery with responsive design
• Proper loading state implemented
• Dark mode support throughout
• 

How to set up and validate locally

1. Clone the repository:

   git clone <repo_url>
   cd <project_folder>

2. Install dependencies:

   npm install

3. Run the application:

   npm start

4. Open browser and navigate to:

   http://localhost:3000/aihackdays

5. Verify:

   • Summary cards show correct values from backend
   • Project gallery displays all projects
   • Loading state appears before data loads
   • Modal opens when clicking "View Full Details"
   • No console errors
   • UI is responsive on different screen sizes

MR acceptance checklist

• Code follows clean and modular structure
• API integration implemented correctly
• No hardcoded values
• No breaking changes
• UI working as expected
• Test cases added
• Responsive design implemented
• Dark mode support working
• Error handling implemented