Issue: Add page numbers and navigation controls to replace simple "Load More" button

[gitbiruk2010]

Description

The home page currently uses a basic "Load More Events" button for pagination. The current button disappears after clicking because the condition data && data.length > 0 doesn't persist across re-renders after pagination increments.

According to industry standards from major event platforms, better UX patterns minimally include:

1. Numbered pagination (e.g., "1 2 3 ... 10") - Used by Eventbrite, allowing users to jump to specific pages
2. Previous/Next buttons with page indicators - Used by Meetup (e.g., "Previous | Page 2 of 5 | Next")

Industry Best Practice:
Implement Material-UI Pagination component with Previous/Next arrows and page numbers. This provides:

• Clear indication of current page and total pages
• Ability to jump to any page
• Better accessibility with keyboard navigation
• Consistent with the existing Material-UI design system

Tasks

Tasks:

• Import and implement MUI Pagination component in app/page.tsx
• Calculate total pages based on numOfEventsToGet (6 events per page) and total event count
• Replace "Load More Events" button with Pagination component below the event cards
• Update state management to handle page selection (not just increment)
• Add logic to fetch total event count from the backend (may require new API endpoint)
• Style pagination component to match the theme (dark/light mode support)
• Test pagination with various event counts (empty, < 6, multiple pages)
• Ensure pagination works correctly with tag filtering

Steps to Reproduce Current Issue:

1. Ensure database has at least 12 events
2. Navigate to home page
3. Observe "Load More Events" button appears (showing 6 events)
4. Click "Load More Events" button
5. Notice more events load BUT button disappears
6. Refresh page - button reappears showing page 1 again
7. No way to go back to previous page or see current page number

Expected Behavior:
Material-UI Pagination component showing "< 1 2 3 >" allowing users to navigate between pages, see current page, and jump to any page.

Files to Modify:

• nsc-events-nextjs/app/page.tsx (replace button logic)
• Optionally: nsc-events-nextjs/utility/queries.ts (if total count API is needed)

Reference:

• MUI Pagination: https://mui.com/material-ui/react-pagination/

Visual Aids

Expand ⬇️