Add event pagination with show/hide logic and scroll behavior

Inamarie84 commented 1 month ago

✅ What does this PR do?

This PR implements client-side pagination for the event section on the News page, allowing users to reveal or hide additional event cards interactively.

✅ Description of Task to be completed

Show 6 events by default
Add functionality to the downward arrow to display 6 more events when clicked
Add an upward arrow to hide the extra events again
Implement smooth scroll behavior when revealing/hiding events
Maintain all existing styles and structure defined by teammates
Add hover effects and easing transitions for better UX

✅ How should this be manually tested?

Navigate to the News page
Scroll to the “Upcoming events” section
Click the downward arrow to load more events
Verify that 6 additional events appear smoothly and the page scrolls to them
Click the upward arrow and confirm that the extra events are hidden and the page scrolls back to the top of the section
Hover over the arrows to see transition effects

✅ Any background context you want to provide?

The pagination uses mock data for events since the CMS is not yet integrated.
This work is based on the Figma design and scoped specifically to the downward/upward arrow behavior in the News page, not the EventNavigation component, which is handled separately.

netlify[bot] commented 1 month ago

Deploy Preview for musikkforandrerliv failed.

Name	Link
Latest commit	3242c1f5f3935c759181d04149d8eaceebd26d7b
Latest deploy log	https://app.netlify.com/projects/musikkforandrerliv/deploys/6840520968720b0008b5ece2

Inamarie84 commented 1 month ago

Related to #1186

Niksubishi commented 1 month ago

Approved. Conflicts resolved. Merged.

NoroffFEU / musikkforandrerliv.no