[CON/Find A Mentor:] Implement pagination for the 'Find a mentor' page

[katamatata]

Context/background

Our browsing pages have become increasingly slow because of a large number of mentor cards that impact page load times and overall performance, especially for low-powered devices or slower internet connections.

Why are we doing this?

We want to allow users to access and interact with the content more efficiently while maintaining optimal page load times. By implementing pagination, we will limit the number of cards loaded simultaneously and reduce the initial load time. Also, pagination will enhance the overall user experience as it provides a more organized and focused browsing experience and simplifies navigation on a page.

What needs to be done?

• [x] Considering new mentoring topics feature and Ligia's new design of the Find a mentor page, design a solution for pagination, breaking down the content into smaller, more manageable chunks for desktop, tablet, and mobile layouts.
• [x] Frontend: Implement the pagination for the Find a mentor page for desktop, tablet, and mobile layouts according to the design
• [ ] Backend: Implement the pagination for the Find a mentor page

UI/UX design assets/specification

Make sure to follow the existing design system and guidelines.

UX/UI Design file

Here is the design file. If you have any questions, please reach out to @ligiamxm

[katamatata]

This ticket should be implemented after the new mentoring topics logic goes live.

[astkhikatredi]

For this ticket keep in mind the https://github.com/talent-connect/connect/issues/278 about scrolling of mentor's page