feat:Add AI HackDays Page and Integrate into viswam/frontend

📌 What is this MR?

This Merge Request introduces a new AI HackDays page into the viswam/frontend project and integrates it with the existing website structure.

It includes UI components, navigation updates, and data integration to display hackathon-related information such as:

• Event title and description
• Statistics (Teams, Participants, Colleges)
• Hackathon projects section

🚀 What does this MR do?

• ✅ Adds a new page: AI HackDays

• ✅ Integrates the page into the main navigation bar

• ✅ Displays key metrics:

  • Total Teams
  • Participants
  • Colleges

• ✅ Adds a Hackathon Projects section

• ✅ Uses API/JSON data (like events_api.json or related files)

• ✅ Applies consistent UI styling using existing design system (Tailwind / CSS)

• ✅ Ensures responsiveness across devices

🎯 Motivation / Use Case

Previously, there was no dedicated page to showcase hackathon events and projects.

This MR:

• Provides visibility to AI HackDay events
• Showcases participant engagement and innovation
• Improves user experience by organizing event data in a structured way
• Helps stakeholders track event impact and participation

⚙️ Implementation Details

• Created new page component (e.g., AiHackDays.tsx / route)

• Added route in frontend routing system

• Updated navbar to include AI HackDays

• Used static/API JSON data:

  • events_api.json
  • projects_api.json

• Designed UI sections:

  • Hero section (Title + tagline)
  • Stats cards (Teams, Participants, Colleges)
  • Projects listing section

• Ensured styling via Tailwind / existing CSS config

• Followed Prettier & ESLint rules (as seen in .prettierrc)

🧪 Test Cases Performed

✅ Functional Testing

• Page loads correctly at route:

  /aihackdays

• Navigation link redirects properly

• Data is correctly fetched and displayed

• Stats values render correctly:

  • Teams → 397
  • Participants → 1191
  • Colleges → 18

✅ UI Testing

• Page layout matches design expectations

• Cards align properly

• Fonts, spacing, and colors consistent

• Responsive behavior:

  • Desktop ✅
  • Tablet ✅
  • Mobile ✅

✅ Integration Testing

• Navbar integration works without breaking existing pages
• No conflicts with other routes
• JSON/API data integration works properly

✅ Performance Testing

• Page loads without delay
• No unnecessary re-renders
• Optimized component structure

✅ Lint & Format Checks

• Code formatted using Prettier
• No ESLint errors
• Clean and readable code

📸 Screenshots / Demo

⚠️ Breaking Changes

• ❌ No breaking changes
• Fully backward compatible

🔮 Future Improvements

• Add filtering for hackathon projects
• Connect with live backend APIs
• Add animations and transitions
• Add project detail pages

issue linked:#36 (closed)

🏁 Conclusion

This MR successfully adds and integrates the AI HackDays page into the frontend, enhancing the platform by showcasing hackathon activities, participation, and projects in a structured and visually appealing way.