Casimir43/enhancement/660 update prg page to match newest figma design

[Casimir43]

📄 Pull Request Overview

Closes #660

🔧 Changes Made

Added a tab switcher to flip between Action Plan, Annual Report, and Association Rules. Also cleaned up the board member section and applied new design features.

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected. ✅
• JSDoc: I have added or updated JSDoc comments for all relevant code. ✅
• Debugging: No console.log() or other debugging statements are left. ✅
• Clean Code: Removed commented-out or unnecessary code. ✅
• Tests: Added new tests or updated existing ones for the changes made. ✅
• Documentation: Documentation has been updated (if applicable). ✅

---

📝 Additional Information

• On mobile, tabs show icons instead of text since small text doesn't fit well
• On mobile, the document images move below the text so the text can use the full width

[Skoivumaki]

Small UI fixes:

• Text overflows when in split-view. (good rule is, if website looks bad on larger tablets, split-view is going to break):

• Your mobile implementation of CustomSwitch is clean, but in terms of user experience, its often bad to use icons to represent complex words. Simply fix it by disabling CustomSwitch for mobile and loop the tabs as seen in Figma example 1 (mobile). Just remember to make it look good and not overflow:

Otherwise everything looks good 👍

[eleino]

Looks good, aside from the scaling issue on smaller screens, which is partly due to the Figma design using larger font sizes than usually. You could consider adding an intermediate breakpoint with a smaller font size so the page looks good on smaller screens as well.

[eleino]

One other thing: Why are you using <img> tag here instead of the Nextjs <Image> tag? In general we should avoid using code that requires disabling eslint checks if there are working alternatives.